css - 使CSS中的代码块看起来不错

Question

我试图在我的 Jekyll 支持的 Github Pages 博客中找到使我的代码块看起来不错所需的正确 css。我希望它的代码看起来像这样(我正在使用带有语法高亮显示的 kramdown):

我试过 highlight.js 但我认为我的 scss block 正在覆盖格式:


pre {
background-color: #D1D1D0;
overflow: auto;
font-family: 'Monaco', monospace;
padding: 0 1em;
}



<p>code {
font-family: Monaco, monospace;
font-size: $base-font-size;
line-height: 100%;
background-color: #eee;
padding: 0.2em;
letter-spacing: -0.05em;
word-break: normal;
/<em>border-radius: 5px;</em>/
}</p>



pre code {
border: none;
background: none;
font-size: $base-font-size * 0.875;
line-height: 1em;
letter-spacing: normal;
word-break: break-all;
}


Answer 1

我认为最简单的方法就是简单地包含 highlight.js在您的页面中。

查看 the Highlight.js demo看看你想用什么风格。
我想 Monokai 主题最适合您的屏幕截图。

Highlight.js 不需要您更改任何标记，因为它(通常)在自动模式下工作。

<link rel="stylesheet" href="/path/to/styles/default.css"/>
<script src="/path/to/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

在适当的地方插入上面的代码后，你所有的代码块都会被高亮。

假设它们是这样呈现的:

<pre><code>
    // code here
</code></pre>

但这是执行此操作的标准方法，所以我猜 Jekyll 东西会把它吐出来。

在推荐之后，我想知道 Jekyll 是否没有自带荧光笔？它可能会。或不。 ;)