使css中的代码块看起来很好

时间:2016-02-28 05:26:26

标签: css

我正在尝试找到正确的css,以使我的代码块在我的Jekyll驱动的Github Pages博客中看起来很好。我希望代码看起来像这样(我使用带语法高亮的kramdown):

enter image description here

我尝试了highlight.js,但我认为我的scss块正在覆盖格式:

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

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; /border-radius: 5px;/ }

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

1 个答案:

答案 0 :(得分:5)

我认为,最简单的方法是在页面中添加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是否不提供自己的荧光笔?它可能会。或不。 ;)