Syntax highlighting is important (especially for programming blogs) because it improves the readability of posts. This article will introduce a syntax highlighter - Rouge.

I think maybe someone who attaches a code snippet into the blog wants to get a beautiful syntax highlighting style, just like we see in some popular IDEs, Visual Code, Eceplise, Atom…

I also like that, so I decided to add a syntax highlighter to my blog.

My blog was constructed by Jekyll, Jekyll also has built-in support for syntax highlighting of code snippets using either Rouge or Pygments, and Rouge is the default syntax highlighter in Jekyll 3 and above. It’s also supported by Github Pages, which means the website that using Rouge can be deployed on Github Pages.

Install Rouge

There is nothing special about the installation, like an ordinary Jekyll plugin installation.

gem install rouge

and declare in the _config.yml

highlighter: rouge

If you use kramdown, add this

markdown: kramdown
kramdown:
input: GFM
syntax_highlighter: rouge

Syntax highlighting with Rouge

Rouge can support syntax highlighting of over 100 languages, find them here.

To render a code block with syntax highlighting, surround your code as

{% highlight ruby %}
def foo
  puts 'foo'
end
{% endhighlight %}

Including the linenos argument will force the highlighted code to include line numbers.

Stylesheet

There are some syntax highlighting style themes available in Rouge, you can look for them at

• Rouge Themes Doc / Rouge themes

Rouge comes built-in with rougify, a command-line tool that converts a style theme to a CSS file.

Use below command to view the themes that Rouge supports.

rougify help style

As of Rouge 1.11.1, the available themes are:

base16, 
base16.dark, 
base16.monokai, 
base16.monokai.light, 
base16.solarized, 
base16.solarized.dark, 
colorful, 
github, 
gruvbox, 
gruvbox.light, 
molokai, 
monokai, 
monokai.sublime, 
thankful_eyes

Use below command to generate CSS file for the syntax highlighting style you want.

rougify style monokai.sublime > syntax_monokai.css

Copy the generated style CSS file to your site’s style folder and don’t forget to include the stylesheet file into your head.html.

<link href="https://cdn.jsdelivr.net/gh/gangdong/gangdong.github.io@dev/assets/css/syntax_monokai.css" rel="stylesheet"/>

And that’s all you need to start having syntax highlighting on your Jekyll site using Rouge.

Hope that’s somehow useful for you! 🙂