Syntax code highlighting in markdown

How pages are rendered

All pages on this website are written in the markdown format, then they get transformed into html format.

This transformation is not done on the fly when someone is browsing the website. Instead, it is done on the server after each page is written or modified. Like compiling each page so it is ready to be served.
When a web page is requested, the server returns the html version it has pre-calculated.

This conversion from .md to .html is currently done using the javascript library Showdownjs. This library comes with a command line interface that can be used with installing node.js.


By default, the source code we put into triple backtick ``` is not colored nor highlighted.

Showdownjs needs to be pluged to another library in order to detects each keywords from the language being used, and generate the right html tags around them. Then a css stylesheet will prettify the code, based on those additional html tags and classes.

The challenge here is to use highlightjs in conjunction with showdownjs so that the final html web page has colored syntax highlighting.

Installing Showdown-highlight extension

Using npm:

npm install --save showdown-highlight

The command to transform .md file to .html with syntax highlighting

The trick is to specify the full path of both showdownjs and showdown-highlight or else it won't recognize them out of the box.

The command is a bit long, but it works:

node ~/npm/node_modules/showdown/bin/showdown.js makehtml -e ~/npm/node_modules/showdown-highlight --simpleLineBreaks -i ~/Documents/__Boulot/__yoricm/__dl/ -o ~/Documents/__Boulot/__yoricm/__dl/file.html