Did you know that you can navigate the posts by swiping left and right?

Syntax Highlighter of Jekyll with Rouge

September 22, 2016, September 24, 2016 | Comments

category: TECH
jekyll web css

On Feb 1, 2016, GitHub Pages announced to only support Rouge for syntax highlighting (see announcement). This means you don’t have to install Python in order for Pygments to highlight syntax.

Rouge is a pure Ruby syntax highlighter. It can highlight more than 100 languages and use backtick-style fenced code blocks within the kramdown markdown which is only supported by GitHub Pages starting from May 1st, 2016 in the same announcement.

Before using Rouge, you will need to install it first:

## Install Rouge
gem install rouge
## Fetching: rouge-2.0.6.gem (100%)
## Successfully installed rouge-2.0.6
## Parsing documentation for rouge-2.0.6
## Installing ri documentation for rouge-2.0.6
## Done installing documentation for rouge after 22 seconds
## 1 gem installed

Under Jekyll, you will also need to change _config.yml file:

markdown: kramdown
kramdown:
  input: GFM
  syntax_highlighter: rouge

According to documentation, there are three ways of customizing the themes. I personally only use CSS Theme options and will go through how to set it up.

Command rougify ships with Rouge and we can use it to first check available CSS themes for highlighting:

rougify help style
## usage: rougify style [<theme-name>] [<options>]
## 
## Print CSS styles for the given theme.  Extra options are
## passed to the theme.  Theme defaults to thankful_eyes.
##
## options:
##   --scope       (default: .highlight) a css selector to scope by
##
## available themes:
##   base16, base16.dark, base16.monokai, base16.monokai.light, base16.solarized,
##   base16.solarized.dark, colorful, github, gruvbox, gruvbox.light, molokai, 
##   monokai, monokai.sublime, thankful_eyes, tulip

In the end, we can find available themes for CSS to use. I pick up base16.solarized.dark theme to generate CSS file for my test site syntax highlighting.

rougify style base16.solarized.dark > css/syntax.css

And I include this generated CSS file into markdown file:

<link href="/test/css/syntax.css" rel="stylesheet">

Now we can see the corresponding languages are highlighted by Rouge here.

Using Rouge is one way for syntax highlighting. It comes together with Jekyll as Ruby gems and get supported by GitHub Pages. People also use other tools to do syntax highlight. My personal website actually use highlight.js to implement syntax highlight and you will get more languages support and more themem styles although the usage is quite simple as well, embed its CSS file into your web page.