分享 Jekyll 高亮的另一个选择:JS 高亮

cxh116 · October 18, 2012 · Last by alexzou replied at February 14, 2015 · 12717 hits

Jekyll官方文档指导用户使用Liquid,再配合Pygments实现高亮,但作为 markdown 的忠实粉丝,怎么能用如此繁锁的语法。

Liquid 代码块写法:

{% highlight ruby %}
def foo
  puts 'foo'
end
{% endhighlight %}

markdown GFM fenced code 代码块写法:

ruby def foo puts 'foo' end

我相信你一眼就会爱上 markdown 的写法。

markdown 高亮可以用 Pygments,也可以用前台 JS 高亮,由于 Jekyll 使用 redcarpet 时定制 Pygments 高亮复杂度过高,所以我选择了简单的 JS 高亮。

需要用的到 gem 包版本

  • gem "jekyll", :git => 'git://github.com/chitsaou/jekyll.git', :branch => 'redcarpet-2.0', Jekyll 0.11.0 版本不支持 redcarpet 2.0 以上,官方还没有合并此 Pull Request
  • gem "redcarpet", "~> 2.1.1", 2.0 以上才支持 fenced code

修改 Jekyll _config.yml

redcarpet:
  extensions: [fenced_code_blocks]
  render_options:

页面引入highlight.js,当然你也可以换成其它的 javascript 高亮库,但 highlight.js 支持自动检测语言,而且主题也多。

<link rel="stylesheet" href="http://yandex.st/highlightjs/7.1/styles/default.min.css">
<script src="http://yandex.st/highlightjs/7.1/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

最后,调用 Jekyll 需要加--redcarpet参数,例如jekyll --redcarpet --server --auto.
如果问题,可以参考我的 Jekyll 配置,https://github.com/mangege/mangege

查看效果

好东西。

确实比 Pygments 要好,而且使用更方便。

刚才按照 lz 的说明设置了,还真是不错,比 pygments 省事。 我在 jekyllbootstrap 下使用,因为没有 gemfile,需要先安装 redcarpet 的 gem。

现在的 jekyll 版本 (v0.12.0) 已经支持 redcarpet,可以在 config 文件之中更改 markdown 的引擎为 redcarpet,然后,使用默认的设置就可以使用 lz 所言的简便效果了。 今天刚试了下,所以与各位分享。

而根据Mort所进行的对比,highlight.js 的显示效果其实比不上 pygments 的。对语法的识别不太好。

You need to Sign in before reply, if you don't have an account, please Sign up first.