Skip to content

How to add syntax highlighting to Jekyll Sites

Jekyll supports syntax highlighting by default using gem rouge. It can highlight 100 different language.

You need to add one line in config.yml

highlighter: rouge

and need to ensure that rouge gem is installed. If you have forked any Jekyll site then you can skip this step, else run:

gem install rouge

Themes: There are many themes available for syntax highlighting. They can be previewed here. They can be downloaded from here.

I personally prefer Github flavoured theme which I downloaded from here.

Once you have decided the theme then you can replace the file _syntax-highlighting.scss file located in _scss directory. Every Jekyll site must have this file by default.

Please see below some of the use cases.

Ruby:

require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html

Python:

import numpy as np
import pandas as pd

df = pd.read_csv('employee.csv')

df.head()

HTML

<head>
  <body>
    Hello..!
  </body>
</html>
2025-01-12 Jun 2019