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.
Enjoyed reading this?
If you found this article helpful, consider supporting my writing. Every little bit helps keep this blog going.
Related articles
- The HTTP Status Codes I Actually Check
A practical guide to common HTTP response codes, redirects, client and server errors, and the headers that explain them.
- What Makes a Website a Progressive Web App?
A practical look at service workers, web app manifests, installation, and the cases where a Progressive Web App is worth building.
- What a Static Site Generator Actually Does
A static site generator combines content and templates before deployment, producing HTML files that a web server can deliver directly.