Skip to main content

Highlight Code Snippets with Rouge in Jekyll 3

Highlight Code Snippets with Rouge in Jekyll 3

In Jekyll 3, Rouge is the default highlighter which provides support for over 60 languages. Like Jekyll, Rouge is written in Ruby. Alternatively you can use Pygments which is written in Python.

Check Current Versions

Before installing Rouge, we need to make sure we have a recent version of Jekyll, like 2.5 or 3 and at least Kramdown 1.5. To check current versions, open Terminal (I’m using Mac OS X Yosemite) and run the following commands:

jekyll --version
kramdown -version

Install Kramdown and Rouge

To install Kramdown and Rouge in one shot, run the following command:

gem install kramdown rouge

We should get output similar to this:

Fetching: kramdown-1.9.0.gem (100%)
Successfully installed kramdown-1.9.0
Parsing documentation for kramdown-1.9.0
Installing ri documentation for kramdown-1.9.0
Done installing documentation for kramdown after 1 seconds
Successfully installed rouge-1.10.1
Parsing documentation for rouge-1.10.1
Done installing documentation for rouge after 2 seconds
2 gems installed

The Style Sheet

All we need now is a theme, which is a style sheet that will highlight code snippets appropriately. At the time of writing this post I’m using a slightly modified version of the Rouge Railscasts theme railscasts.css, which I obtained from Jakob Lægdsmand’s site.

Load the style sheet in the <head> section of your page or template, for example:

<link rel="stylesheet" href="/assets/css/railscasts.css">

That’s it. All code snippets surrounded by

{% highlight <language> %}
    ...
{% endhighlight %}

will be highlighted according to the style sheet in place. Just make sure you replace <language> with the actual language of the snippet. Here’s the list of languages supported by Rouge.

For more information, check out the Jekyll docs on Templates.