Updated syntax highlighter to Prism JS

blog/renderBlogPost.js

@@ -4,7 +4,7 @@ const utils = require('../utils/utils.js');
 
 const sql = require('../utils/sql');
 
-const argsFull = '--from markdown-markdown_in_html_blocks+raw_html --toc --toc-depth=3 -N --mathjax -t html5';
+const argsFull = '--from markdown-markdown_in_html_blocks+raw_html --toc --toc-depth=3 -N --mathjax -t html5 --no-highlight';
 const argsPreview = '--mathjax -t html5';
 
 
@@ -100,6 +100,18 @@ module.exports=
 
                 module.exports.convertToHTML(markDown, blocks).then(function(result)
                 {
+                    // hackey stuff to fix this open issue on pandoc https://github.com/jgm/pandoc/issues/3858
+                    //search for pattern <pre class="LANG"><code> and replace with <code class="language-LANG">
+                    var re = /\<pre class=".*?"><code>/;
+                    while (result.search(re) != -1)
+                    {
+                        var preTag = result.match(/\<pre class=".*?"><code>/g)[0];
+                        var finishIndex = preTag.split('"', 2).join('"').length;
+                        lang = preTag.substring(12, finishIndex);
+                        var newHTML = `<pre><code class="language-${lang}">`
+                        var original = `<pre class="${lang}"><code>`;
+                        result = result.split(original).join(newHTML);
+                    }
 
                     result = result.split("<figcaption>").join("<figcaption style=\"visibility: hidden;\">");
 
@@ -197,7 +209,7 @@ module.exports=
                     else
                     {
                         html = html.split("<img").join("<img style=\"max-width: 100%;\" ");
-                        html = html.split("<code>").join("<code class='hljs cpp'>");
+                        // html = html.split("<code>").join("<code class='hljs cpp'>");
                         resolve(html);
                     }
                 };

includes/html/footer.html

@@ -55,8 +55,8 @@
 
 <script src="/includes/js/navBar.min.js" async></script>
 
-<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js"></script>
-<script>hljs.initHighlightingOnLoad();</script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/prism.min.js" integrity="sha512-rYNMWcr8EuYc/6mSBu0wD+hSoA4KkHvYRlmJEJGQI4bsho0OiX8fPOVB822QQZizkTUdkUCnJLnN8SAUBg9y9w==" crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/autoloader/prism-autoloader.min.js" integrity="sha512-X4dQSI7eXvU12QcGK4YiwB30fIdLL7bxJbpC8149YrjO/3nSLLDFZNWBol5hBYPLePVHr0IBBNKKtw9zfULPOw==" crossorigin="anonymous"></script>
 
 <script>
 
@@ -89,6 +89,8 @@
         };
     }
 
+
+
     ( function() {
 
         lazyLoad();

includes/html/header.html

@@ -10,10 +10,6 @@
 
     <!--<link rel="stylesheet" href="/includes/css/purge.css" media="screen">-->
     <link rel="stylesheet" href="/includes/css/bootstrap.css" media="screen">
-    <link rel="stylesheet" href="/includes/css/code.css" media="screen">
-
-
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.2.0/styles/default.min.css">
 
     <meta name="description" content="Blog of Jeffery Russell, featuring technical guides, and projects.">
 

templates/blog/blogMain.html

@@ -80,9 +80,8 @@
                 lazyLoad();
 
                 //highlights code
-                document.querySelectorAll('pre code').forEach((block) => {
-                    hljs.highlightBlock(block);
-                });
+                Prism.highlightAll();
+                
                 //renders latex math
                 MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
                 resolve();

templates/blog/header.html

@@ -14,10 +14,8 @@
 
     <!--<link rel="stylesheet" href="/includes/css/purge.css" media="screen">-->
     <link rel="stylesheet" href="/includes/css/bootstrap.css" media="screen">
-    <link rel="stylesheet" href="/includes/css/code.css" media="screen">
 
-
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.2.0/styles/default.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/themes/prism-coy.min.css" integrity="sha512-m/Sn0Ay9ynzYIZZbbw5Jy2QEJhXXeppOimbFNz+5qj1wUOnrzt9Q2a4fRMFqp8SOFNZ3ZwVf+Zm/ezabpqlXXQ==" crossorigin="anonymous" />
 
     <meta name="description" content="Blog of Jeffery Russell, featuring technical guides, and projects.">
 

templates/blog/posts.html

@@ -167,15 +167,14 @@
             $('#POST_BODY').html(html.blogBody);
             $('#POST_PICTURE').html(html.hasPicture ?
                 '<img src="/blogContent/headerImages/' + html.picture_url + '" style="width:100%;">' :
-                 '');
+            '');
 
             //lazy loads youtube videos
             lazyLoad();
 
             //highlights code
-            document.querySelectorAll('pre code').forEach((block) => {
-                hljs.highlightBlock(block);
-            });
+            Prism.highlightAll();
+
             //renders latex math
             MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
         },