Do I need to generate a css file from Pygments for my jekyll blog, to enable colorful code snippet?

Question

This is my first time to use Jekyll and Pygments. But I don't know how to insert colorful code snippet.

I successfully installed Pygments, following the official steps, with the markdown like this:

{% highlight ruby %}
def foo
  puts 'foo'
end
{% endhighlight %}

I see the html source code including the classes, however there is no color for the this snippet.

Do I need to generate some css files from Pygments and include them? And how?

Answer 1

Yes, you need to either install or create CSS classes to make the code highlighting work Pygments does visible. After installing Pygments, this can be done by running the following from the command line:

pygmentize -S default -f html > pygments.css

This will create a pygments.css file with the default in your current directory; pygments -L style will list all available styles.

You can either move this into your HTML tree and call it with a corresponding:

<link rel="stylesheet" type="text/css" href="/path/to/pygments.css">

Or, copy the contents of pygments.css and place it in an existing style sheet. That will get you started. You can edit the CSS from there to customize as appropriate.

---

Two notes:

1. You've probably already done this, but for the benefit of people who are new to Jekyll and Pygments, you'll probably also have to add pygments: true to your _config.yml file to get Pygments working. (Or, run jekyll with jekyll --pygments which has the same effect.)

2. The original Jekyll installation documentation wasn't very clear about how to get Pygments working when this question was asked. I added 'Pygments Usage' section since then to hopefully help clear things up there as well.

Answer 2

You need to include syntax.css

You can take the sample from my repo https://github.com/madhur/madhur.github.com/blob/master/files/css/syntax.css

and then customize it according to your theme. Mine is customized for dark backgrounds.