Why do we need change?

On February 2, 2016, Github posted an article about an update in Github Page. Basically, it will run Jekyll 3.0 in Github Page, and the major impact are below:

  1. GitHub Pages will only support kramdown, Jekyll’s default Markdown engine.
  2. GitHub Pages now only supports Rouge.
  3. Local builds are significantly faster.

If you are building your website under Github Page, or even use Jekyll 3.0 to build directly, the main problem is that the old highlight function is no long workable. This post is gonna talk about how to use Rouge highlight under Jekyll 3.0.

Configuration setting

First of all, change some settings in your _config.yml. markdown will use kramdown, highlighter will use rouge, also change syntax_highlighter to rouge. Below is the code:

1
2
3
4
5
highlighter: rouge
markdown: kramdown
kramdown:
  input: GFM
  syntax_highlighter: rouge

Use Rouge Highlight

Install rouge first locally, and change to whichever style you like.

Install Rouge

1
$ gem install rouge

Rouge style

1
2
3
4
5
6
7
8
9
10
11
12
$ 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, molokai, monokai, monokai.sublime, thankful_eyes

You can find many avaiable themes, choose whichever you like. I would like to use monokai.sublime as an example.

1
$ rougify style monokai.sublime > assets/css/syntax.css

It will generate a css file, link this css file into html, and highlight will be avaiable in your website.

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

Change Background Color

If you prefer to use black as your code block background color, you should add the following code into css file.

1
pre[class='highlight'] {background-color:#000000;}

Reference

This is the end of post