语法高亮不够漂亮?这里有你想要的 Rouge 主题
写了那么久的代码,找到了满意的代码着色风格吗?想必文本编辑器的代码着色风格你已经找到了中意的了,那么你在网上 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: GFMsyntax_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 byavailable 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 文件加进去哦!
{% raw %}
<link rel="stylesheet" href="{{ "/assets/css/syntax.css" | prepend: site.baseurl }}">
{% endraw %}
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
参考资料
- Plugins - Jekyll • Simple, blog-aware, static sites
- kramdown 和 markdown 较大的差异比较 - Hom
- GitHub Flavored Markdown Spec
- jneen/rouge: A pure-ruby code highlighter that is compatible with pygments http://rouge.jneen.net/
- Rouge
我的博客会首发于 https://blog.walterlv.com/,而 CSDN 会从其中精选发布,但是一旦发布了就很少更新。
如果在博客看到有任何不懂的内容,欢迎交流。我搭建了 dotnet 职业技术学院 欢迎大家加入。
本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。欢迎转载、使用、重新发布,但务必保留文章署名吕毅(包含链接:https://walterlv.blog.csdn.net/),不得用于商业目的,基于本文修改后的作品务必以相同的许可发布。如有任何疑问,请与我联系。
语法高亮不够漂亮?这里有你想要的 Rouge 主题相关推荐
- 想有自己的博客吗?浏览器支持 MarkDown和语法高亮的最简单示例(使用markdown-it、highlight.js和mermaid)
MarkDown,写作神器,还是有必要掌握一下.写作也是一种很重要的能力,需要长久坚持和锻炼. 写作能力重不重要?语文重不重要?读书重不重要? 我觉得语文和写作能力是所有能力的基础,是重中之重.因为你 ...
- Vue页面代码高亮展示之Prism语法高亮工具
基本介绍 Prism 是一款轻量级.可扩展的语法高亮工具,在构建时考虑了现代 Web 标准.它被用于数百万个网站,包括您每天访问的一些网站. Prism 支持自定义扩展代码的语言.主题和插件选项,勾选 ...
- 生信人写程序2. Editplus添加Perl, Shell, R模板和语法高亮
https://www.editplus.com/ 前言 "工欲善其事必先利其器",生信工程师每天写代码.搭流程,而且要使用至少三门编程语言,没有个好集成开发环境(IDE,Inte ...
- typescript语法高亮插件_JavaScript开发者必备的10个Sublime Text插件
Sublime Text几乎是任何开发者在其工具箱的必备应用程序.Sublime Text是一款跨平台的,高度可定制的,高级的文本编辑器,既适合全功能的IDE(出了名的资源匮乏),又可匹配命令行编辑器 ...
- 在word中使用notepad++实现代码的语法高亮
转载自:http://blog.csdn.net/woohello/article/details/7621651 有时写文档时需要将代码粘贴到word中,但直接粘贴到word中的代码虽能保持换行与缩 ...
- 版本1.8.1Go安装以及语法高亮配置
注意点:普通用户和root用户高亮要设置两遍 ①下载go安装包 https://golang.org/doc/ 最新的版本:go1.8.1.linux-amd64.tar.gz ② 进入主目录: $: ...
- 如何让你在开发者工具中查看源代码有语法高亮和暗黑主题的效果
如何让你在Chrome浏览器开发者工具中查看源代码的时候,和在代码编辑器中有同样的代码语法高亮的效果,而且还是深色主题,如果你是深色主题的爱好者就更合你意了. 国外的美女开发者为你实现了这样功能的浏览 ...
- typescript语法高亮插件_vscode常用插件
插件介绍 HTML Snippets > 初级H5代码片段及提示 HTML CSS Support > 初级H5代码片段及提示 Debugger for Chrome > 让 vsc ...
- highlight.js 语法高亮,让你的页面更美观~
在网页开发过程中,经常会用到代码的展示,而不同颜色的代码,可以让页面看起来更直观,也更美观. highlight.js是一款基于JavaScript的语法高亮库,目前支持125种编程语言,有63种可供 ...
最新文章
- php软件安装及调试_PHP调试利器XDebug的安装与使用
- 软件质量保证划重点期末复习总结
- indy idhttpserver有关下载的两个问题
- mysql存储过程详解 mysql存储过程和函数
- 大数据分析平台的重点发展方向
- java轻量级和重量级_Java 偏向锁、轻量级锁和重量级锁
- atitit.html5动画特效----打水漂 ducks_and_drakes
- java中静态数组和动态数组的定义
- 网站上传服务器浏览器打不开,网站发布或自己上传程序后,网站打不开的原因有哪些?...
- r720支持多少频率的内存吗_二维码门禁你知道支持多少种识别方式吗?
- Git Commit Message校验踩坑指南
- 对比分析163VIP邮箱费用,原来有这么多的好处!
- UVM jelly_bean
- H3C交换机命名与板卡命名
- 标称属性样本相似性度量
- 引入html5,html5-css的引入
- SNMP Trap的session问题
- c语言源代码闪烁的红五星,c语言实现飘动的红五星(C language with red).doc
- 产品推荐-监控网页内容变化的守夜人
- 邮件自动被服务器删除,如何防止outlook等邮件客户端删除服务器上的邮件数据?...