我正在尝试找到正确的css,以使我的代码块在我的Jekyll驱动的Github Pages博客中看起来很好。我希望代码看起来像这样(我使用带语法高亮的kramdown):
我尝试了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;
}
答案 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是否不提供自己的荧光笔?它可能会。或不。 ;)