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导入了CSS

---

我期望的是：

会发生什么：

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

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

Answer 1

我通过检查该元素并查看是什么导致异常语法突出显示来找出是什么原因造成的。

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

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

我要做的就是删除更改背景颜色的行，并且一切正常。