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:
This is the same block but rendered using [Prism](https://prismjs.com/):
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.
