要想实现对代码的高亮,首先要搞清楚Jekyll把你在文章(md文件)中的代码块都解析成什么样了。

Jekyll默认使用kramdown解析器,其它解析器不作讨论,然后这里需要注意一下,在Jekyll中你可以使用两种方法来表明代码块:{% highlight ruby %}或者用三个反单引号来包括代码块。

但是它们解析出来的HTML结构却不同:

如果你是使用这种方法标注代码块(Jekyll增强功能,Liquid标签)

{% highlight ruby %}
def show
  @widget = Widget(params[:id])
  respond_to do |format|
    format.html # show.html.erb
    format.json { render json: @widget }
  end
end
{% endhighlight %}

那么它解析出来的HTML是这样的:

figure.highlight > pre > code.language-ruby > 一大堆span

如果你是这样标注代码的:(这是markdown语法)

(因为我在markdown文件中打出这样很麻烦,所以截图了)

那么它解析出来的HTML是这样的:

即:

div.highlighter-rouge > div.highlight > pre.highlight > code > 一大堆span

当你没有标注是什么语言的时候,它将会直接解析出一个code标签而不会再解析出关键字

虽然这两者解析出的HTML结构不同,但他们最后解析出的关键字样式是相同的,这就是因为它们使用的高亮器都是Rouge,所以你可以直接使用rouge生成高亮样式文件引用即可。

rougify style monokai.sublime > rouge.css

monokai.sublime是高亮样式,但是我一直没找到在哪里可以查看到具体有哪些样式和预览。

还有一种高亮生成方案是Pygments,这里不作讨论,但是它俩解析出来的小标签是一样的,所以你完全也可以用Pygments生成样式给rouge用。

pygmentize -S default -f html -a .highlight > default.css

这里default也是代码样式,您可以换成其它样式,具体可以到Pygments — Pygments查看到一些样式预览,我现在是使用的Pygments生成的tango主题。

还有其它的方法就是使用highlightjs,利用js自动解析出pre code中的代码给他们加上span标签,可以在Getting highlight.js进行下载,解压下载的压缩包里面有个style文件夹里面是样式文件,只要在页面中引入highlight.js文件和样式文件就就可以了,具体样式的预览可以在highlight.js demo看到。