Jekyll 使用 Rouge 主题
2017-03-31 00:00
495 查看
今日发现我的 Github Pages 中的代码并没有高亮,看了一下代码发现,原来的没有设置 css 样式的原因,我使用的代码高亮器是 rouge
其中:
之后再在模板页面上引用导出的 css 文件即可
首先将所有的样式文件导出,这里小生用了一个小小的 shell 脚本:
然后,为每一个文章的头信息中添加一个 syntax 属性,
用于表示应用于当前文章的样式
最后,在模板上添加上相应的链接,并提供一个默认的样式文件
至此,便可以随意的使用 Rouge 的样式了~~~
TIPs:
小生在用 Markdown 写文章时,发现引用块
如果添加,就会将引用块截断... ...
后来想到,引用快会被转换成 HTML 中的
所以小生就选择了最为笨拙的方法,
硬编码进去
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>
相关文章推荐
- Jekyll 使用 Rouge 主题
- 使用jekyll主题
- Github+Jekyll —— 创建个人免费博客(六)jekyll结构优化和Skinny-Bones主题的使用
- 使用XML实现BBS(主题列表篇)
- ASP.NET 2.0中动态混合使用MasterPage和主题
- 使用XML实现BBS(主题列表篇)
- 使用主题文件(包含CSS文件)时遇到的问题
- ASP.NET2.0 快速入门 ----使用主题对站点进行自定义
- 使用Windows XP的主题
- 在ASP.NET 2.0中使用样式、主题和皮肤
- 在ASP.NET 2.0中使用样式、主题和皮肤(转载)
- 使用XML实现BBS(主题列表篇)
- [导入]在ASP.NET 2.0中使用样式、主题和皮肤
- ASP.NET 2.0中使用样式、主题和皮肤
- 在ASP.NET 2.0中使用样式、主题和皮肤
- 使用Asp.net2.0的母版和主题
- 使用 WebSphere Studio Application Developer 的 WebSphere Portal Server 开发: 第 1 部分:Portal Server 2.1 的动态主题定制
- 自定义控件主题使用研究
- vs2005入门视频教程 之 主题和皮肤使用一 [视频]
- [翻译]在asp.net 2.0中使用主题