Utiliser Pygments pour la coloration syntaxique du code dans JekyllUse Pygments to highlight code syntax in Jekyll

This post is a follow-up of this post and this post which describe how to use Jekyll to generate a static website. The particular topic that the current post is addressing is syntax hightlighting with pygments. It is widely inspired by this post, which saved me a couple of hours to set up pygments properly, and is designed to be used on Ubuntu 14.04 LTS.

  1. the first step consists in installing Pygments and in generating a CSS file from pygments:
    sudo apt-get install python-pygments
    

    the corresponding CSS file is then generated using:

    pygmentize

  2. in the second step, we set-up jekyll installation to use pygments. First, edit the file _config.yml and add the following line
    highlighter: pygments
    

    then, move the previously generated file pygments.css into a subdirectory of your jekyll installation, say assets/css and add the following line in the header of your default layout (this is the file _layouts/default.html in this post):

    pygments

  3. you can now use Pygments using liquid tags. For instance, the R code
    data("iris")
    plot(iris$Sepal.Length ~ iris$Sepal.Width)
    

    will give the following (not very spectacular) syntax hightlighting:

    highlightR

    if set between liquid tags for hightlighting:

    {% highlight r %}  
    data("iris")
    plot(iris$Sepal.Length ~ iris$Sepal.Width)
    {% endhighlight %}
    

    The list of available languages and names for these languages can be found in your Pygments installation /var/lib/gems/1.9.1/gems/pygments.rb-0.6.0/vendor/pygments-main/pygments/lexers.