Search code examples
jekyllsyntax-highlightinggithub-pageskramdownrouge

Fenced code blocks in Jekyll with kramdown?

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.

Solution

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

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