HomeBlog
Syntax Highlighting for Jekyll - 羡辙杂俎
2014.02.10 01:27:57
Syntax Highlighting for Jekyll

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.

博文对你有帮助吗?如果有的话,要不要送我一本书呢?:heart_eyes:

微信公众号“羡辙部落格”(xianzheblog)提供本站优质非技术类博文推送。

Creative Commons License
Every blog post in this site by Wenli Zhang is licensed under a CC 3.0 License, based on a work at Github. You can see the source code of this blog site at github.com/Ovilia/blog.

Comments

comments powered by Disqus