What You Will Learn In This Post

In this post, I’m going to explain how to set up syntax hightlighting for Jekyll in GitHub style. Although I would not say GitHub code syntax style is the prettiest one, it is a good choice if you don’t want to write your own.

If you are using Jekyll, then pygments enables you to write syntax-highlighted code like:

{% highlight js %}
alert('Hello, world!');
{% endhighlight %}

which will be then generated into:

alert('Hello, world!');

To enable pygments, you just need to add pygments: true in _config.yml.

pygments-style-github.git

pygments-style-github.git is a great project designed to create syntax CSS files in GitHub style.

$ git clone git://github.com/hugomaiavieira/pygments-style-github.git
$ cd pygments-style-github/
$ (sudo) python setup.py install
$ pygmentize -S github -f html > syntax.css

That’s all you need to do with it. But I spent a lot of time wondering why it’s not working, which turns out to be that I typied $ pygmentize ... into $ python ... by mistake. :sweat:

Writing Blogs

When writing blogs, you may use {% highlight css %} and {% endhighlight %} to bracket your code, where css may be changed into other languages like html, js and so on.

Further Reading

If you want to display the language of the syntax-highlighted code, be sure to check out this post.