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>

posted @ 2017-03-31 14:02  baiyangcao  阅读(918)  评论(0编辑  收藏