放过Pygments,让Prism来给Jekyll博客加上代码高亮

2014-03-31 - hikerpig

jekyll目前至少支持Redcarpet和RDiscount以及kramadown几种类markdown引擎，

rdiscount 是基于C实现的 markdown 引擎 discount 的ruby调用，优点不用说也知道就是快。缺点是扩展性差(不过要扩展的功能也能通过jekyll的插件来实现)，关于discount的语法可以去看看discount主页或者国内的一篇介绍。
Redcarpet 就是大家喜闻乐见的Github Flavored Markdown, 有个好东家, 基于ruby实现，易于扩展，插件也貌似比较多。

kramadown没有了解，不过估计应该像前两者一样都支持Fenced code block, 我选择的是Redcarpet, 在用一对三个反引号包裹代码块上附加的文本会被认为是代码高亮的提示，输出html的时候它会被转为class属性。

例如：

console.log('测试code block');

输出结果为:

  <pre>
    <code class="js">
      console.log('测试code block');
    </code>
  </pre>

后端的处理

首先在jekyll的站点设置文件_config.yml里关闭pygment:

pygment:  false

前端的处理

CSS

Prism内置多种主题都挺好看，我选择了prism-okaidia的样式文件。

Prism在处理完高亮的时候，是根据代码块的language-*类名来选择对应语言的语法的。难道我们写文章的时候还要在每个高亮文法前都加上这个后缀么？No no，因为我们是懒人，绝对没门。因此在让Prism执行高亮之前，我们还得做一些小小的处理:

javascript

_prismHandler = function() {
  $('code').not('[class*="language-"]').addClass(function() {
    var _lang = $(this).attr('class')  || 'markup'; // 默认为markdown语法
    _lang = _lang.replace(/(language|lang)+\-/gi, '');
    return 'language-' + (Prism.languages.hasOwnProperty(_lang) ? _lang : 'markup');
  });

  Prism.highlightAll();
};

激动人心的时刻到来了：

$(document).ready(function(){
  _prismHandler();
})

为什么折腾

除了因为作为菜鸟前端的局限外(感觉自己捅自己好轻松啊),折腾一番的好处当然就是，把代码高亮的任务转移给了客户端，每次重新生成网站的时候速度就xiu xiu xiu地上去了。

选择Prism是因为当初看MDN教程的时候觉得代码块的配色实在是太美丽（因为作者也是个美丽的程序媛？）, 等宽字体Consolas非常舒适。

不过说起来Prism好段时间没有更新，对于语言的支持也不是很完善（当然它有不错的扩展机制，你完全可以自己写一个语言的关键词定义)。如果哪天折腾之魂又出现了的话，可以尝试下用Highlight，目前支持51种语言和20多种主题配色，官网也有方便的自定义包下载，让你在学习新语言的时候也能够满足漂漂亮亮地晒漂亮代码的需求（高手们真的care这个事情么= =）。

补充一下

Prism 的不足

这个项目的维护得不是很频繁，试用了一下除了html、javascript、css以外的几种语言，感觉结果都不是特别精确，请看我的更新文章。

参考文章

discount主页 discount 跟标准markdown的区别
discount_brief 国内的一篇介绍文章