UPDATE 2/2/2016: GitHub switched to Jekyll 3.0 for
gh-pages. This means you can now use this in your
They now use
kramdown by default. Old highlighting still works, but backticked codefencing seems to be the new preferred way. Unfortunately I’ve noticed that this doesn’t work for me.
Now, instead of
code is embedded in
<figure class="highlight"> <pre><code class="language-yaml" data-lang="yaml">... </code></pre> </figure>
Make sure that your styling for
figure.highlight doesn’t change the alignment.
In short words: don’t do it.
Although Jekyll is supposed to make writing blogs easier and more straight-forward (which it mostly does), but code highlighting will make your head scratch a bit.
I tried using
But that put my fenced codeblocks simply in a
code tag. This doesn’t help with highlighting, so I wasn’t happy.
The real solution is to not try to use GFM and do it with rouge or pygments. For that to work locally you need to make sure you’ve got that gem installed (
gem install rouge), and then in your
After that you can highlight your code blocks with the rouge filter:
Additionally, this will only add the proper classes to the
<pre><code>...</code></pre>-block. You’ll need to add a stylesheet yourself, like for example this one from Pygments compiled by @richleland.
You can add some other gems like
jekyll-mentions to get github
@-mentions in your blog.