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>