我正在尝试让代码突出显示适用于使用 jekyll 构建的简单博客。我希望能够在用 markdown 编写的帖子中进行代码突出显示,所以我启用了红地毯作为标记语言。这工作得很好,代码被格式化为<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 进行自己的格式化。但是由于红地毯已经完成了格式化代码的繁重工作,因此没有必要再次这样做。
有什么提示吗?
你需要一些CSS魔法。使用这个或从这里选择一个。
您可以使用荧光笔本身创建 CSS
rougify style > rouge.css
或
coderay stylesheet > coderay.css
我喜欢分享我面临的解决方案,并且花了很多时间才摆脱这个问题。默认语法突出显示在Jekyll
中非常差。就像大卫说的,你真的需要一些CSS
魔法。检查此要点以解决语法突出显示问题。