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
.