Syntax highlighting in Jekyll

Here is a way to highlight your code on Jekyll site using the same Markdown syntax that Github supports. I have been using github markdown day-in & day-out mostly with github gists.

To use the same markdown syntax to highlight the code syntax in your Jekyll site. First, install the rouge gem.

    gem install rouge

Now in your _config.yml file

    markdown: kramdown
    highlighter: rouge
    kramdown:
      input: GFM

The above setting sets kramdown as my markdown and for syntax highlighting using the rouge the gem you just installed. Also, GFM says to use the Github Flavoured Markdown.

Now download the default CSS for the code styling from Github and copy to the CSS directory of your site and add the reference in _layout/default.html.

    <link rel="stylesheet" href="/css/syntax.css" type="text/css" />

Done!

Image by Lorenzo Cafaro from Pixabay