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:

gem install pygments.rb redcarpet

If you are using a Gemfile you should add the following to your Gemfile:

gem "pygments.rb"
gem "redcarpet"

Then run bundle install. Next open up your _config.yml. Make sure you have the markdown engine set to redcarpet and the highlighter set to pygments:

markdown: redcarpet
highlighter: pygments

If you are using Jekyll 2 then instead of highlighter: pygments you should put pygments: true instead of highlighter: pygments.

What we have done so far will work fine, and we can highlight syntax in a block by doing:

{% highlight perl6 %}
say "This is going to be highlighted!";
{% endhighlight %}

Showing up on the page like this:

say "This is going to be highlighted!";

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 create an assets folder. We will need to override our themes head.html to add in a css file. So copy your theme's head.html to the _includes folder. Add this line to your head.html between the head tags:

<link rel="stylesheet" href="/assets/syntax_line.css">

Now go into the assets folder and create a file called syntax_line.css.

/* Add padding to the left of the code block */
.code { padding-left: 10px; }
/* linenodiv pre styles line numbers */
.linenodiv pre {  margin: 0px 0px 22px 0px; color: #ccc; border-radius: 0; border: none; border-right: solid 1px; word-wrap: normal; }

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 pip.