Syntax Highlighting your code in Jekyll with Rouge
Syntax highlighting is important (especially for programming blogs) because it improves the readability of posts. This article will introduce a syntax highlighter - Rouge.
I think maybe someone who attaches a code snippet into the blog wants to get a beautiful syntax highlighting style, just like we see in some popular IDEs, Visual Code, Eceplise, Atom…
I also like that, so I decided to add a syntax highlighter to my blog.
My blog was constructed by Jekyll, Jekyll also has built-in support for syntax highlighting of code snippets using either Rouge or Pygments, and Rouge is the default syntax highlighter in Jekyll 3 and above. It’s also supported by Github Pages, which means the website that using Rouge can be deployed on Github Pages.
There is nothing special about the installation, like an ordinary Jekyll plugin installation.
and declare in the
If you use
kramdown, add this
Syntax highlighting with Rouge
Rouge can support syntax highlighting of over 100 languages, find them here.
To render a code block with syntax highlighting, surround your code as
linenos argument will force the highlighted code to include line numbers.
There are some syntax highlighting style themes available in Rouge, you can look for them at
Rouge comes built-in with
rougify, a command-line tool that converts a style theme to a
Use below command to view the themes that Rouge supports.
As of Rouge 1.11.1, the available themes are:
Use below command to generate
CSS file for the syntax highlighting style you want.
Copy the generated style CSS file to your site’s style folder and don’t forget to include the stylesheet file into your
And that’s all you need to start having syntax highlighting on your Jekyll site using Rouge.
Hope that’s somehow useful for you! 🙂