4

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: kramdown

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: 1 appearance

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:

kramdown elements

Redcarpet:

1 elements

approxiblue
  • 6,982
  • 16
  • 51
  • 59
brienna
  • 1,415
  • 1
  • 18
  • 45

1 Answers1

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.

approxiblue
  • 6,982
  • 16
  • 51
  • 59
  • Your suggestion to remove all 'div' instances form the CSS restores syntax highlighting. More needs to be done to get the same margins, padding, etc. I wasn't aware I had to manually edit the stylesheet -- is this a normal part of the process of switching between markdown converters? – brienna Mar 03 '16 at 20:42
  • I think it depends. The Pygments stylesheets are [generated by code](http://stackoverflow.com/a/14989819), which means they might differ slightly between versions. The CSS someone [generated and archived here, for example](https://github.com/iwootten/jekyll-syntax), don't have the div selectors. Your stylesheet does, and it came from a theme, and I'm not sure where or how the author got it. – approxiblue Mar 03 '16 at 20:55
  • Still, the CSS remains mostly similar, selectors like `.kd`, `.nx`, `.p`, etc should be unchanged, so a few tweaks here and there would be enough. If you want to, you could also use pygmentize to generate a new theme CSS. – approxiblue Mar 03 '16 at 21:03