css - 使用红地毯在 jekyll 中突出显示语法

Question

我正在尝试让代码突出显示以用于使用 jekyll 构建的简单博客。我希望能够在用 markdown 编写的帖子中突出显示代码，所以我启用了 redcarpet 作为标记语言。这一切正常，代码被格式化为<pre></pre>标签，代码的所有各种元素都得到相应的类。例如

<span class="n">function</span>
<span class="n">saySomething</span>
<span class="p">()</span>
<span class="p">{</span>

etc.

这太棒了，但这并没有给我们实际的突出显示（颜色）。所以我想必须有一些 css 准备好复制和粘贴，它实际上做了不同代码元素的样式。还是我完全错过了什么？

我查看了一些代码高亮库，如prettify或prism，但这些库在浏览器中使用 javascript 进行了自己的格式化。但是由于 redcarpet 已经完成了格式化代码的繁重工作，因此没有必要再做一次。

有什么提示吗？

score 6 · Accepted Answer

6

你需要一些 CSS 魔法。使用这个或从这里选择一个。

于 2014-12-10T09:23:11.367 回答

score 3 · Accepted Answer

您可以使用荧光笔本身创建 CSS

rougify style > rouge.css

或者

coderay stylesheet > coderay.css

score 0 · Accepted Answer

我喜欢分享我所面临的解决方案，并且花了很多时间来摆脱这个问题。默认语法高亮在Jekyll. 就像大卫说的，你真的需要一些CSS魔法。检查此要点以解决语法突出显示问题。

3 回答 3