Highlight: Use highlight.js.

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

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 {