Fenced code block not highlighted properly

Question

In Jekyll, when I set the Markdown converter to kramdown and bundle exec jekyll serve, this fenced code block

```javascript
function hey(name) {
    return 'Hey ' + name;
}

console.log(hey('Brienna'));
```

renders like this:

This happens no matter what I do. I've tried setting the input: GFM option, but it doesn't make a difference whether or not it's included.

However, when I set the Markdown converter to Redcarpet, the same code block renders like this:

This is what I want to see! But I don't want to use Redcarpet. I want to use kramdown.

As you can see from the rendered HTML below, the code block gets highlighted. I'm using a CSS stylesheet for Pygments, which Rouge is supposed to be able to work with. I noticed that the div's class changed between Markdown converters. With kramdown, its class is .highlighter-rouge, whereas with Redcarpet, its class is just highlight. Do I need to manually modify the CSS if switching between Markdown converters?

Kramdown:

Redcarpet:

Answer 1

Your Pygments CSS file looks like this:

.highlight { font-size: 13px; }
div.highlight, div.highlight code, div.highlight pre  { background: #29281e; }
div.highlight code { padding: 0; }
div.highlight .c { color: #75715e } /* Comment */

In the Kramdown output, the .highlight block is no longer a <div>, so simply removing all "div" instances from the CSS would restore syntax highlighting.

Bonus: without specifically targeting <div>, your CSS now works with output of both Markdown processors.

---

For the fenced code blocks to work in Kramdown, you need to turn on recognition of GitHub Flavored Markdown:

kramdown:
  input: GFM

Note that Jekyll reads _config.yml only once at execution time. You need to restart jekyll serve for further changes to apply.