Posts Jekyll 代码块展示
Post
Cancel

Jekyll 代码块展示

展示代码是每个技术博客与生俱来的使命,当中为代码片段展示行号,却是一个重要的细节。对 Jekyll 用户的好消息是,官方对此提供了 Liquid 封装模版的支持。

语法高亮

语法高亮代码块,使用highlight标签,例如要展示一段html代码:

1
2
3
{% highlight html %}
<p>This is some text in a paragraph.</p>
{% endhighlight %}

高亮展示效果与 Markdown 的`或者~类似,或说一样。

显示行号

此外,Jekyll 支持行号显示,在highlight标签后面使用linenos

1
2
3
{% highlight html linenos %}
<p>This is some text in a paragraph.</p>
{% endhighlight %}

改进样式

原生.linenos类展示略粗糙,以上一段源码为栗子,原始效果如下:

简直车祸现场,歪果审美不敢恭维。果断修改样式,添加 CSS:

1
2
3
.highlight pre { border: 0; }
.highlight .lineno { color: #aaa; text-align: right; }
.highlight .code { border-left: 1px solid #ccc; }

修改后的效果:

Liquid 代码块

Markdown 解析文章的时候,如遇到 Liquid 的源码,由于 { }符号转义字符的问题,代码块中 Liquid 的部分会隐身。看下面示例代码

1
2
3
4
{% highlight html linenos %}
<p>{% if site.data.showAuthor %}Author:{{ site.data.author }}{% endif %}</p>
<p>This is some text in a paragraph.</p>
{% endhighlight %}

在 Jekyll 编译后展示的效果为:

1
2
<p></p>
<p>This is some text in a paragraph.</p>

可见第一行的 Liquid 部分已经隐身了。为此,Jekyll 提供了一种优雅的解决方法:用标签{% raw %}{% endraw %} 包围 Liquid 代码段即可。

1
2
3
4
5
6
{% highlight html linenos %}
{% raw %}
<p>{% if site.data.showAuthor %}Author:{{ site.data.author }}{% endif %}</p>
<p>This is some text in a paragraph.</p>
{% endraw %}
{% endhighlight %}

编译结果:

1
2
<p>{% if site.data.showAuthor %}Author:{{ site.data.author }}{% endif %}</p>
<p>This is some text in a paragraph.</p>

使用场景的考虑

在上文 语法高亮 部分提到,在不需要行号的情况下,{% highlight %}...{% endhighlight %}`的效果是一样的,所以在撰写 Post 的时候,遇到代码块内容不是十分重要,或者行数少于 10 行时,建议直接用`,毕竟效率第一。当然了,如果你是重度编码癖坚持要敲完一大串词组,就算皇帝也无权干涉。

当且仅当需要展示行号时,才考虑用{% highlight %}...{% endhighlight %}

参考

OLDER POST NEWER POST

Comments powered by Disqus.

Search Results