css - 防护代码块未正确突出显示

Question

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

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

奖励:没有专门针对 <div> ，您的 CSS 现在可以处理两个 Markdown 处理器的输出。

---

要使 protected 代码块在 Kramdown 中工作，您需要打开 recognition of GitHub Flavored Markdown :

kramdown:
  input: GFM

注意 Jekyll 读取 _config.yml仅在执行时执行一次。您需要重新启动 jekyll serve以申请进一步的更改。