Syntax highlight with Rouge in Jekyll

Rouge is a popular syntax highlighter written in Ruby to provide the capability of syntax highlighting for code written on HTML pages. By default, Jekyll 3 and above versions come with Rouge. It can highlight 100 different languages, and output HTML or ANSI 256-color text. Its HTML output is compatible with stylesheets designed for pygments.

To get syntax highlighting working in Jekyll, we need to enable the Rouge syntax highlighter. Open the _config.yml file and add the following line:

highlighter: rouge

If you’re still using Jekyll 2, then open your terminal and enter the following command:

gem install rouge

Rouge is compatible with the Pygments syntax highlighter, which means that we can use themes created for Pygments. You can preview themes here. Once you found your favorite theme, view the page source to find it and copy or save it to your site CSS file.

Pygments themes use .syntax as the default class, so you will need to replace the .syntax with .highlight class in the pygments.css file or change the default .highlight CSS class name to .syntax in the Jekyll’s _config.xml a file like this:

markdown: kramdown
highlighter: rouge
kramdown:
  input: GFM
  syntax_highlighter_opts:
    default_lang: html
    css_class   : 'syntax'

When writing markdown with some code to be read by Jekyll, you can enable syntax highlighting with:

{% highlight javascript %}
document.write("JavaScript is a simple language for javatpoint learners");
{% endhighlight %}