css - 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

您的 Pygments CSS 文件如下所示：

.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 */

在 Kramdown 输出中，该.highlight块不再是 a <div>，因此只需从 CSS 中删除所有“div”实例即可恢复语法突出显示。

奖励：无需特别定位<div>，您的 CSS 现在可以与两个 Markdown 处理器的输出一起使用。

---

要使隔离代码块在 Kramdown 中工作，您需要打开对GitHub Flavored Markdown 的识别：

kramdown:
  input: GFM

请注意，Jekyll_config.yml在执行时只读取一次。您需要重新启动jekyll serve才能应用进一步的更改。