Set up Rouge syntax highlighting in Jekyll

Rouge is the default syntax highlighter in Jekyll 3 and later. It turns fenced code blocks into HTML with language-specific classes; a stylesheet then provides the colours.

Enable Rouge in _config.yml:

highlighter: rouge

If you are still using Jekyll 2, install Rouge separately:

gem install rouge

Add the colours

Rouge’s HTML output is compatible with stylesheets made for Pygments. You can preview themes here, then copy the theme rules into your site’s CSS.

The wrapper class still needs to match. If the stylesheet expects .syntax but Jekyll outputs .highlight, either replace .syntax with .highlight in the CSS or configure Kramdown to output .syntax:

markdown: kramdown
highlighter: rouge
kramdown:
  input: GFM
  syntax_highlighter_opts:
    default_lang: html
    css_class: syntax

After editing _config.yml, restart the Jekyll server and inspect a code block. Syntax highlighting needs both parts: Rouge must add the token classes, and the site must load CSS that styles those classes. Enabling the highlighter alone will not magically colour the code.