diff --git a/resources/public/js/highlight.js b/resources/public/js/highlight.js index a687a04..9091294 100644 --- a/resources/public/js/highlight.js +++ b/resources/public/js/highlight.js @@ -6,18 +6,16 @@ * * High Level API: * - * // Load basic dependencies and language support for present code tags * api.init() * * * Hooks To: * - * 'document:loaded' ~> highlight.init(); + * 'document:loaded' ~> highlight.init(); * */ (function (global) { - // Load minimal requirements function loadInitialScriptsAndStyles() { var link = document.createElement('link'); @@ -29,51 +27,29 @@ 'stylesheet'; link.href = - 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.1/themes/prism-tomorrow.min.css'; + 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/styles/railscasts.min.css'; mainScript.src = - 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.1/prism.min.js'; + 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/highlight.min.js'; + // On main script load, configure marked mainScript.addEventListener('load', function () { - // Escape early if back-end rendering is used - if (!('marked' in global)) { - // @TODO Autoload er - return Prism.highlightAll(); - } - - // Set up autoloading marked.setOptions({ - highlight: function (code, language) { - if (!(language in Prism.languages)) { - var additionalLanguageScript = - document.createElement('script'); - - additionalLanguageScript.src = - 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.1/components/prism-' + language + '.min.js'; - - // On success, highlight code for given language - additionalLanguageScript.addEventListener('load', function () { - [].forEach.call(document.querySelectorAll('.lang-' + language), function (element) { - Prism.highlightElement(element); - }); - }); - - // Remove if language not available - additionalLanguageScript.addEventListener('error', function () { - document.body.removeChild(additionalLanguageScript); - }); - - document.body.appendChild(additionalLanguageScript); - } - - return Prism.highlight(code, Prism.languages[language] || Prism.languages.markup); + langPrefix: 'hljs lang-', + highlight: function (code) { + return hljs.highlightAuto(code).value; }, }); }); + // Extend marked.js on edit page only + if ('marked' in global) { + document.body.appendChild(mainScript); + } + + // Preview page requires scripts only document.head.appendChild(link); - document.body.appendChild(mainScript); } // High Level API diff --git a/resources/public/style.css b/resources/public/style.css index 8e3faaa..7be1505 100644 --- a/resources/public/style.css +++ b/resources/public/style.css @@ -185,25 +185,26 @@ blockquote { margin-bottom: 7em; } -code, pre { - background: #efefef; +/* Code tags and pre tags alone to be monospaced */ +pre, code { font-family: monospace; } -/* Code tags alone to be slightly bigger than defaults */ -code { - font-size: 1.05em; +/* Non-syntax highlighted code and pre tags to get default background */ +pre, code:not([class*="lang-"]) { + background: #efefef; } -/* Prevent over-sized code in when syntax-highlighted */ -pre code { - font-size: 1em; +/* Non-syntax highlighted code tag to be slightly bigger so it outstands in text */ +code:not([class*="lang-"]) { + font-size: 1.05em; } -pre { - border: 1px solid #aaa; - padding: 0.5em; +/* Syntax highlighted code tag to get some padding, nice rounded corners and keep font-size */ +code[class*="lang-"] { border-radius: 3px; + font-size: 1em; + padding: 1em; } *:focus { @@ -231,7 +232,7 @@ td { padding: 0.5em; } -/* MEDIA QUERIES */ +/* MEDIA QUERIES */ @media screen and (min-width: 1024px) { article, .central-element { @@ -317,4 +318,4 @@ fieldset { #plain-password { width: 10em; -} \ No newline at end of file +}