围栏代码块未正确突出显示

Question

在 Jekyll 中，当我将 Markdown 转换器设置为 kramdown 和 bundle exec jekyll serve 时，这个围栏代码块

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

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

呈现如下：

无论我做什么，都会发生这种情况。我已经尝试设置input: GFM 选项，但是否包含它并没有什么区别。

但是，当我将 Markdown 转换器设置为 Redcarpet 时，相同的代码块呈现如下：

这就是我想看到的！但我不想使用 Redcarpet。我想使用 kramdown。

从下面呈现的 HTML 中可以看到，代码块被突出显示。我正在为 Pygments 使用 CSS 样式表，Rouge 应该能够使用它。我注意到div 的类在 Markdown 转换器之间发生了变化。对于 kramdown，它的类是 .highlighter-rouge，而对于 Redcarpet，它的类是 highlight。如果在 Markdown 转换器之间切换，是否需要手动修改 CSS？

克拉姆当：

红地毯：

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 块不再是 <div>，因此只需从 CSS 中删除所有“div”实例即可恢复语法突出显示。

奖励：无需专门针对 <div>，您的 CSS 现在可以与两个 Markdown 处理器的输出一起使用。

---

要让隔离代码块在 Kramdown 中工作，您需要开启 recognition of GitHub Flavored Markdown：

kramdown:
  input: GFM

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