Jekyll-based 博客中实现代码高亮
之前使用别人的博客模板，代码高亮so easy的，直接在_config中设置highlighter为pygments就可以了。可是自己改了一个模板，加上没有认真读Jekyll Docs，代码高亮失效了。好吧，还是自己动手。
在GitHub Pages中实现代码高亮有两个选择，一是自定义CSS，另一个是使用嵌入的Gists。
自定义CSS样式
要让Jekyll为你实现代码高亮，需要做以下三件事：
-
添加一个语法高亮的CSS文件到你的文件目录中，例如
css/syntax.css。Jekyll Docs中提到了一个现成的syntax.css，这个是和GitHub用的是同一种风格。 -
将刚才添加的CSS文件包含到相应的layout文件中，例如
_layouts/post.html。
1 <head>
2 ...
3 <link href="/css/syntax.css" rel="stylesheet">
4 ...
5 </head>-
第三步呢，就是在你的post中使用
highlightLiquid tags。当然，你需要在_config.yml中设置好highlighter。如果你不想显示行号，可以不用加linenos。 -
那么，举个栗子，这段Ruby代码经过Jekyll处理之后就变成：
1 def show
2 puts "Outputting a very lo-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-ong lo-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-ong lo-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-ong line"
3 @widget = Widget(params[:id])
4 respond_to do |format|
5 format.html # show.html.erb
6 format.json { render json: @widget }
7 end
8 enddef show
puts "Outputting a very lo-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-ong lo-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-ong line"
@widget = Widget(params[:id])
respond_to do |format|
format.html # show.html.erb
format.json { render json: @widget }
end
end还不错吧，你还可以进一步改进CSS（完整版的syntax.css），使行号与代码部分以不同样式分隔开，比如说我这里，让行号颜色变浅一些，并添加了竖线分割。要这么做，只需要在CSS中添加：
1 /* Add to css/syntax.css */
2 .highlight .lineno { color: #ccc; display:inline-block; padding: 0 5px; border-right:1px solid #ccc; }
3 .highlight pre code { display: block; white-space: pre; overflow-x: auto; word-wrap: normal; }使用GitHub Gists
除了上述Jekyll内置的代码高亮外，另一种实现代码高亮的方法就是采用GitHub Gists。
打开GitHub Gist，创建一个gist，然后复制Embed URL，就能在post中实现和GitHub中一样一样的代码高亮。
比如说这样：
目前我还是采用第一种方法，Gists备用吧。
Comments