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

cxh116 · 2012年10月18日 · 最后由 alexzou 回复于 2015年02月14日 · 12734 次阅读

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 的。对语法的识别不太好。

需要 登录 后方可回复, 如果你还没有账号请 注册新账号