diff --git a/blogContent/posts/web-development/media/prism/after.png b/blogContent/posts/web-development/media/prism/after.png new file mode 100644 index 0000000..f6f230e Binary files /dev/null and b/blogContent/posts/web-development/media/prism/after.png differ diff --git a/blogContent/posts/web-development/media/prism/before.png b/blogContent/posts/web-development/media/prism/before.png new file mode 100644 index 0000000..7f89de4 Binary files /dev/null and b/blogContent/posts/web-development/media/prism/before.png differ diff --git a/blogContent/posts/web-development/media/prism/example2.png b/blogContent/posts/web-development/media/prism/example2.png new file mode 100644 index 0000000..5461012 Binary files /dev/null and b/blogContent/posts/web-development/media/prism/example2.png differ diff --git a/blogContent/posts/web-development/pandoc-syntax-highlighting-with-prism.md b/blogContent/posts/web-development/pandoc-syntax-highlighting-with-prism.md new file mode 100644 index 0000000..aad2eba --- /dev/null +++ b/blogContent/posts/web-development/pandoc-syntax-highlighting-with-prism.md @@ -0,0 +1,70 @@ +My blog uses Pandoc to convert markdown into HTML documents. However, the code highlighting that Pandoc does is dull. + +The image below is what a Pandoc code block looked like: + +![Before Using Prism](media/prism/before.png) + +This is the same block but rendered using [Prism](https://prismjs.com/): + +![After Using Prism](media/prism/after.png) + +Following the [PrismJS](https://prismjs.com/) website, all you need to do is link a CSS file and some javascript files to highlight the code chunks. EZ. + +```html + + + + +``` + +On the Pandoc side, you need to disable Pandoc from highlighting the code using the "--no-highlight" command-line argument. + +```bash +pandoc --from markdown-markdown_in_html_blocks+raw_html --toc --toc-depth=3 -N --mathjax -t html5 --no-highlight file.md +``` + +The HTML code that Pandoc produces will look something like this: + +```html +
+    
+        var i = 12;
+    
+
+``` + +The language tags that Pandoc produces is incorrect for most javascript highlighting libraries -- documented in Pandoc [issue 2858](https://github.com/jgm/pandoc/issues/3858). +The correct HTML standard for code blocks put the language tag on the code tag rather than in the pre tag. + +```html +
+    
+        var i = 12;
+    
+
+``` + +I ended up using some hacky regular expressions to convert from the Pandoc code format to the desired output. + +```javascript +var re = /\
/;
+while (result.search(re) != -1)
+{
+    var preTag = result.match(/\
/g)[0];
+    var finishIndex = preTag.split('"', 2).join('"').length;
+    lang = preTag.substring(12, finishIndex);
+    var newHTML = `
`;
+    var original = `
`;
+    result = result.split(original).join(newHTML);
+}
+```
+
+Although not greatly documented on their website, if you want to re-highlight code because you have a dynamic component of your website, you can use the "Prism.highlightAll()" function.
+
+```javascript
+Prism.highlightAll();
+```
+
+I am mesmerized by how fabulous code snippets look with Prism.
+
+![After example 2 prism usage](media/prism/example2.png)