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 for highlight the code syntax in your Jekyll site. First intall 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 use 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
Originally shared on Bitsmonkey Blog