github - Jekyll 语法高亮无法正常工作，在文本周围显示矩形

Question

我正在尝试更改 Jekyll 网站中代码的语法突出显示。

我尝试了什么：

第 1 步：我将代码放入 Jekyll 荧光笔中

{% highlight html %} // some code here {% endHighlight %}

第 2 步：我从这里下载了 monokai.css 文件：http://jwarby.github.io/jekyll-pygments-themes/languages/javascript.html 并将其保存到我的/assets/monokai.css

第 3 步：我通过@import url(monokai.css);在我的main.scss

---

我的期望：

怎么了：

如您所见，它没有正确突出显示。代码后面有一个矩形。

为什么会这样？任何帮助表示赞赏。谢谢！

Answer 1

通过检查元素并查看导致异常语法突出显示的原因，我发现了导致这种情况的原因。

在base.scss中，有几行修改了code类型。

pre,
code {
  background-color: #eef;
}

我所要做的就是删除改变背景颜色的线，事情就按预期工作了。