使得代码块在CSS看起来不错

我想找到正确的CSS来让我的代码块在我的Jekyll powered Github页面博客中看起来不错。我想它的代码看起来像这样（我使用kramdown语法高亮）：使得代码块在CSS看起来不错

我试图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; }

来源

2016-02-28 Griff

我认为最简单的方法是将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>

但是，这是做它的标准方式，所以我想这对哲基尔的thingie吐出了这一点。

建议之后，我想知道杰基尔是否没有配备自己的荧光笔？它可能会。或不。 ;）

来源

2016-02-28 05:39:07 jacmoe

因为它托管在Github上，所以通过kramdown已经有语法高亮显示。我只是试图找到正确的配色方案，基本上使用我的pre {}块。我已经用我目前的内容编辑了我的问题。 – Griff

Kramdown是一个Markdown变体，而不是语法荧光笔？ – jacmoe

对不起，我为语法突出显示设置了胭脂。我不需要为突出显示设置样式吗？这不是在我的例子中的scss中完成的吗？ – Griff

使得代码块在CSS看起来不错

回答

相关问题