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
You 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] %}
// Code snippet here
{% 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.