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



我正在尝试让代码突出显示适用于使用 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魔法。检查此要点以解决语法突出显示问题。

相关内容

  • 没有找到相关文章

最新更新