14

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?

user1261841
  • 143
  • 1
  • 4

2 Answers2

29

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.

Martin Tournoij
  • 26,737
  • 24
  • 105
  • 146
Alan W. Smith
  • 24,647
  • 4
  • 70
  • 96
  • 2
    Having only just discovered this post, I've already created a repo which includes all the themes over here [https://github.com/iwootten/jekyll-syntax](https://github.com/iwootten/jekyll-syntax) hopefully it will be of use to people here. Additionally, you can use the `-a` option to indicate the class jekyll highlights under, eg `pygmentize -S default -f html -a .highlight > default.css` – Ian Wootten May 14 '14 at 20:20
  • 1
    Just like to add that the new _config.yml variable for code highlights is `highlighter : pygments` or `rouge` etc, and no longer `pygments: true` – matrixanomaly Apr 26 '15 at 02:37
5

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.

Madhur Ahuja
  • 22,211
  • 14
  • 71
  • 124
  • 1
    Mojombo (creator of jekyll) has [a syntax.css](https://github.com/mojombo/tpw/blob/master/css/syntax.css) that might be simpler to extend (also, has a light background). – huon Mar 11 '12 at 04:48
  • 1
    Actually, you can go to pygments site, http://pygments.org/demo/35195/, choose the suitable theme and then extract the syntax.css yourself – Madhur Ahuja Mar 11 '12 at 04:59
  • I mean, how should I include teh syntax.css? Where should I put it? – user1261841 Mar 12 '12 at 00:25
  • My current problem is, when I create a new post, the syntax.css is not included. Should I put it under assets/ directory? Or how should I tell jekyll where to find the syntax.css? – user1261841 Mar 12 '12 at 00:27
  • You should refer its link in your default layout file. You can put it anywhere as long as you are able to link to it. – Madhur Ahuja Mar 12 '12 at 01:15
  • THanks Madhur! Your file was very useful! – Mark May 05 '13 at 22:17