受保护的代码块未正确突出显示

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？

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块不再是<div>，因此只需删除所有＆＃34; div＆＃34; CSS中的实例将恢复语法高亮。

奖励：如果没有专门定位<div>，您的CSS现在可以使用Markdown处理器的输出。

要在Kramdown中使用受防护的代码块，您需要启用recognition of GitHub Flavored Markdown：

kramdown:
  input: GFM

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