Syntax highlight with Rouge in Jekyll
Rouge is a popular syntax highlighter written in Ruby to provide the capability of syntax highlighting for code written on HTML pages. By default, Jekyll 3 and above versions come with Rouge. It can highlight 100 different languages, and output HTML or ANSI 256-color text. Its HTML output is compatible with stylesheets designed for pygments.
To get syntax highlighting working in Jekyll, we need to enable the Rouge syntax highlighter. Open the _config.yml
file and add the following line:
highlighter: rouge
If you’re still using Jekyll 2, then open your terminal and enter the following command:
gem install rouge
Rouge is compatible with the Pygments syntax highlighter, which means that we can use themes created for Pygments. You can preview themes here. Once you found your favorite theme, view the page source to find it and copy or save it to your site CSS file.
Pygments themes use .syntax
as the default class, so you will need to replace the .syntax
with .highlight
class in the pygments.css
file or change the default .highlight
CSS class name to .syntax
in the Jekyll’s _config.xml
a file like this:
markdown: kramdown
highlighter: rouge
kramdown:
input: GFM
syntax_highlighter_opts:
default_lang: html
css_class : 'syntax'
When writing markdown with some code to be read by Jekyll, you can enable syntax highlighting with:
{% highlight javascript %}
document.write("JavaScript is a simple language for javatpoint learners");
{% endhighlight %}