Jekyll 使用 Rouge 主题

今日发现我的 Github Pages 中的代码并没有高亮，看了一下代码发现，原来的没有设置 css 样式的原因，我使用的代码高亮器是 rouge

highlighter: rouge

Rouge 是一个纯 Ruby 编写的代码高亮器，可用于 60 多种语言的高亮，其源代码托管在 GitHub上，在其主页文档上了解到可以根据不同的样式生成 css 文件

> rougify style (theme_name) > (css_file.css)

其中：

• (theme_name) 表示要使用的主题名称，详细的主题列表可以通过 rougify help style 获得
• (css_file.css) 表示要导出的样式文件路径

之后再在模板页面上引用导出的 css 文件即可

<link rel="stylesheet" type="text/css" href="{{ site.url }}/stylesheets/(css_file.css)">

为不同的博客配置不同的样式文件

样式那么多，想要为不同的文章配置不同的样式肿么搞？

首先将所有的样式文件导出，这里小生用了一个小小的 shell 脚本：

for style in base16 base16.dark base16.monokai base16.monokai.light base16.solarized base16.solarized.dark colorful github gruvbox gruvbox.light molokai monokai monokai.sublime thankful_eyes
do
    rougify style $style > syntax.$style.css
done

然后，为每一个文章的头信息中添加一个 syntax 属性，

用于表示应用于当前文章的样式

syntax: colorful

最后，在模板上添加上相应的链接，并提供一个默认的样式文件 syntax.css

{% if page.syntax %}
    <link rel="stylesheet" type="text/css" href="{{ site.url }}/stylesheets/syntax/syntax.{{ page.syntax }}.css">
{% else %}
    <link rel="stylesheet" type="text/css" href="{{ site.url }}/stylesheets/syntax.css">
{% endif %}

至此，便可以随意的使用 Rouge 的样式了~~~

TIPs：

小生在用 Markdown 写文章时，发现引用块 > 中并不能添加代码块，

如果添加，就会将引用块截断... ...

后来想到，引用快会被转换成 HTML 中的 blockquote 标签，

所以小生就选择了最为笨拙的方法，

硬编码进去 blockquote 标签不就阔以了，如下：

<blockquote>
this is test start
{% highlight shell %}
> this is code
{% endhighlight %}
this is test end
</blockquote>