DEV Community

loading...
Cover image for Syntax highlighting in Jekyll

Syntax highlighting in Jekyll

bitsmonkey profile image bitsmonkey Updated on ・1 min read

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
Enter fullscreen mode Exit fullscreen mode

Now in your _config.yml file

    markdown: kramdown
    highlighter: rouge
    kramdown:
      input: GFM
Enter fullscreen mode Exit fullscreen mode

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" />
Enter fullscreen mode Exit fullscreen mode

Done!

Image by Lorenzo Cafaro from Pixabay
Originally shared on Bitsmonkey Blog

Discussion (0)

pic
Editor guide