The default syntax highlighter in Jekyll is Rouge. You can also use the Pygments highlighter which supports ~100 languages way more than 2x what Rouge supports (So many!). Especially great for me is Pygments supports Perl 6 highlighting ☺.
For this tutorial I am using Jekyll 3.
First install pygments.rb and redcarpet with:
If you are using a Gemfile you should add the following to your
Next open up your
_config.yml. Make sure you have the markdown engine set to
redcarpet and the highlighter set to pygments:
If you are using Jekyll 2 then instead of
highlighter: pygments you should put
pygments: true instead of
What we have done so far will work fine, and we can highlight syntax in a block by doing:
Showing up on the page like this:
Now we will make a change so that line numbers won't look terrible.
Get in the root of your jekyll site's folder. If you don't already have it
We will need to override our themes head.html to add in a css file.
So copy your theme's head.html to the
Add this line to your head.html between the head tags:
Now go into the assets folder and create a file called
If you want to use some of the different themes that pygment comes with, you can generate a css file this way:
pygmentize -f html -S friendly > syntax.css
You will have to make sure that pygment and pygmentize are installed with
either your package manager or using