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:
- GitHub Pages will only support kramdown, Jekyll’s default Markdown engine.
- GitHub Pages now only supports Rouge.
- 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.
First of all, change some settings in your
markdown will use
highlighter will use
rouge, also change
rouge. Below is the code:
highlighter: rouge markdown: kramdown kramdown: input: GFM syntax_highlighter: rouge
Use Rouge Highlight
Install rouge first locally, and change to whichever style you like.
$ gem install rouge
$ 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.
$ 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.
<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
This is the end of post