语法高亮不够漂亮?这里有你想要的 Rouge 主题

语法高亮不够漂亮?这里有你想要的 Rouge 主题

发布于 2018-07-27 14:15 更新于 2018-08-12 06:51

写了那么久的代码,找到了满意的代码着色风格吗?想必文本编辑器的代码着色风格你已经找到了中意的了,那么你在网上 post 上去的代码呢?

Rouge 是一款基于 Ruby 的语法高亮工具,能为你的代码生成漂亮的语法高亮样式。本文将介绍如何使用它,并为大家提供它默认的语法高亮样式预览。


在 Jekyll 中使用 Rouge 语法高亮插件

Jekyll 中的 __config.yml 文件记录了 Jekyll 的最核心配置。其中,markdown 字段的值表示使用哪一款插件来将 Markdown 文本转换为 HTML 页面结构。

GitHub 推荐使用的 Jekyll 的 Markdown 插件为 kramdown。kramdown 是一个强大且高性能的文本转换引擎,你可以通过阅读 kramdown 和 markdown 较大的差异比较 - Hom 了解 kramdown 的强大之处。

不过,我们现在关系的是它可以使用的语法高亮工具 —— Rouge。在 Jekyll 的配置文件中这样配置它们:

markdown: kramdown
kramdown:
  input: GFM
  syntax_highlighter: rouge

其中,input: GFM 指的是 GitHub Flavored Markdown Spec

Rouge 支持的语言可以前往此处查看:Rouge

生成 Rouge 语法高亮样式

当然,以上配置只是告诉 kramdown 转换引擎在转换 Markdown 为 HTML 的时候,使用 rouge 格式的样式(具体只语法高亮所用的 css 的 class)。我们需要另外使用 rougify 工具生成对应的样式文件才行。

你需要先配好 Ruby 环境。如果没有配好,推荐阅读 快速在 Windows 上搭建 Jekyll 开发环境 快速配置。

随后,你便可以使用命令来安装 Rouge。

$ gem install rouge

安装之后,使用以下命令查看自带的样式有哪些:

$ rougify help style

随后得到的输出中可以得知样式有很多种。

usage: rougify style [<theme-name>] [<options>]

Print CSS styles for the given theme.  Extra options are
passed to the theme.  Theme defaults to thankful_eyes.

options:
  --scope       (default: .highlight) a css selector to scope by

available themes:
  base16, base16.dark, base16.light, base16.monokai, base16.monokai.dark, base16.monokai.light, base16.solarized, base16.solarized.dark, base16.solarized.light, colorful, github, gruvbox, gruvbox.dark, gruvbox.light, igorpro, molokai, monokai, monokai.sublime, thankful_eyes, tulip

使用以下命令生成一个 github 风格的样式到 assets/css/syntax.css 文件中:

$ rougify style github > assets/css/syntax.css

别忘了在你的 <head> 中把这份 css 文件加进去哦!

<link rel="stylesheet" href="{{ "/assets/css/syntax.css" | prepend: site.baseurl }}">

Rouge 自带语法高亮主题预览

虽然 Rouge 自带了很多种不同的语法高亮样式,但都没有办法直接看到语法高亮的效果。于是我尝试了一些,并贴出了我的 C# 代码在 Rouge 自带语法高亮主题下的效果。

一般来说很难找到一种语法高亮适用于各种语言,所以选择的时候推荐选一个差不多的,然后再慢慢改。

以下每张图片的后面都标注了这种风格主题再 rouge 中的名称,使用上一节中提到的命令可以生成语法高亮样式。

▲ github 需要额外设置前景色 #24292e

▲ colorful

▲ monokai.sublime

▲ tulip

▲ thankful_eyes

▲ monokai

▲ molokai

▲ igorpro

▲ gruvbox.dark

▲ gruvbox

▲ base16

我修改的样式

我发现我以前的样式与 monokai.sublime 是很接近的。这应该算是巧合,因为此前我是仿我的 VSCode 主题 One Dark Pro Vivid

既然如此,我就直接基于 monokai.sublime 修改好了。我将默认文字颜色从白色 #ffffff 改成了 #bbbbbb,然后将 diff 的颜色也修改成 monokai 的样式。

点击下载 syntax.monokai.sublime.css


参考资料

本文会经常更新,请阅读原文: https://walterlv.com/post/available-themes-of-rouge-style.html ,以避免陈旧错误知识的误导,同时有更好的阅读体验。

本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。欢迎转载、使用、重新发布,但务必保留文章署名 吕毅 (包含链接: https://walterlv.com ),不得用于商业目的,基于本文修改后的作品务必以相同的许可发布。如有任何疑问,请 与我联系 (walter.lv@qq.com)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小白课代表

ToDo!小黄条:能嵌入桌面的跨平台TODOLIST

28940
来自专栏GopherCoder

Django:web框架的学习(3)

16630
来自专栏一“技”之长

iOS8新特性扩展(Extension)应用之二——分享插件

        在上一篇博客中,介绍了iOS8新特性扩展功能之一的Today功能:http://my.oschina.net/u/2340880/blog/48...

10320
来自专栏阿杜的世界

Mac版Java开发环境配置

16930
来自专栏Crossin的编程教室

在BAE上搭建discuz论坛

各位同学,好久不见。假期结束,我们的课程又要继续了。这几天持续高温,让人只想躲在空调房里吃西瓜,你的城市是不是也在火炉上烤着呢?不过我相信,大家学习编程的热情比...

388100
来自专栏web前端教室

Redux基本用法,为周日的先行者课程准备着。

众所周知,React只是一个View层而已,它不是一个完整的前端解决方案。只是给出了页面组件化的解决思路,但组件之间如何沟通?代码之间的结构?它并没有给出更多的...

21270
来自专栏流柯技术学院

Atom + activate-power-mode震屏插件Windows7下安装

Atom是Github推出的一个文本编辑器,搜索一下大概是给Web前端用的,最近比较火的是他的一个插件activate-power-mode,可以实现打字屏振效...

16420
来自专栏DeveWork

DW Replace Open Sans:将WordPress 后台中的open-sans字体加载源从Google Fonts换为360 CDN

针对最近因为Google fonts被墙导致WordPress 打开慢的问题,Jeff 在上一篇《Google Fonts导致WordPress 速度问题的三个...

23170
来自专栏移动开发之家

Weex原理之带你去蹲坑

 本篇将节操满满的安利Weex(˶‾᷄ ⁻̫ ‾᷅˵),不一样的角度推荐你入坑,官网有的我们不拖泥,这里将给你补充官方没有的,深入到蹲坑给你排忧解难,总会给你点...

27530
来自专栏大数据钻研

大福利!献给网页开发者的20款Firefox插件

毫无疑问,比起其他浏览器,谷歌浏览器虽有着明显的优势,但是它的劲敌火狐却是很多前端攻城师和研发人员的挚爱,为了尽可能地提高用户体验,火狐浏览器的社区在插件开发和...

464110

扫码关注云+社区

领取腾讯云代金券