Fenced code blocks in Jekyll with kramdown?

Question

I have a GitHub Pages site, built with Jekyll, on which I want to add code highlighting.

When I try to use fenced code blocks, they are not rendered locally, but they work fine on the live GitHub site.

My Markdown file is like this:

```php
<?php

class Hello extends World
{
}
```

My config is like this:

markdown: kramdown
kramdown:
  input: GFM

highlighter: rouge

I didn't have kramdown or rouge installed originally but I've now installed both and made sure everything is up to date (Jekyll is 3.1.1). The code must be fine as it works on the live site. But I must be missing something locally.

Edit: the answer here doesn't work for me either.

Also maybe related, is there supposed to be CSS for the highlighting generated automatically, or do I need to download a "theme" from somewhere? I only know that it's working on GitHub Pages because it has various classes in the HTML like <span class="k">class</span>, but there is no CSS applied to them.

I think there is a bug in 3.1.1 that may be the difference between GH and local. There are a few threads about this on https://talk.jekyllrb.com. I don't use bundler, but I think your local config needs to run using bundler in order for the input: GFM to work. Could be totally wrong on that. As for the css for rouge, you do need to provide that, check here: https://github.com/mojombo/tpw/blob/master/css/syntax.css — Ron, Feb 18 '16 at 19:09

score 1 · Accepted Answer · answered Mar 31 '16 at 15:47

This is now working. I don't remember exactly what solved it, but the two main things I changed were:

I installed the GitHub Pages gem.
There were some issues with kramdown that were fixed in v0.10, which is included in the latest version of the GitHub Pages gem.

Fenced code blocks in Jekyll with kramdown?

1 Answers1