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
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
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
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/file.md -o ~/Documents/__Boulot/__yoricm/__dl/file.html