Highlight with Jekyll and pygments doesn't wor

Question

I want to use pygments with jekyll

I have the following code:

{% highlight java %}
NullPointerException at org.springframework.core.GenericTypeResolver.getTypeVariableMap
{% endhighlight %}

When I generate my site with jekyll --pygments, the html result is:

<div>
  <pre><code class="java">NullPointerException at org.springframework.core.GenericTypeResolver.getTypeVariableMap</code>
  </pre>
</div>

In this html output there aren't the expected <span class="n"> or <span class="s2"> tags, and the code is not highlighted.

Am I doing something wrong?

Answer 1

An alternative to installing pygments separately and generating the CSS, one can directly pull the CSS from the Jekyllrb documentation here

The direct link extracted from the documentation I mentioned above is here: https://github.com/mojombo/tpw/blob/master/css/syntax.css

(It's the authors official version on GitHub)

The file is called syntax.css, drop it into your css folder, and create a relative link to the stylesheet in the header of any/all files to enable syntax highlighting.

This can be done as such for example, I placed it in head.html or css.html where I have all the relative links, it's in the _include folder so it gets included in all layouts that uses it:

<link rel="stylesheet" href="/css/syntax.css">

You might also need to add this to your _config.yml:

highlighter: pygments

Tested to work on Jekyll and also on GitHub Pages (which is special as it only allows a very limited set of plugins)

A related SO question that also assisted me in arriving to the right solution is here. I was also puzzled by why my code still wasn't highlighted in a template I'm porting over even after adding the line in _config.yml. The reason it just works on the auto-generated Jekyll site when doing jekyll new test-site is because the generated template already includes the SASS (.scss) for syntax-highlighting (in the _sass directory) which helps generate it all into one main.css.

Answer 2

You need to have the css generated to highlight.

$ pygmentize -S default -f html > css/pygments/default.css