如何将 github 的代码高亮样式, 应用于 jekyll minima 主题?
前言: 我挺喜欢默认的 minia 主题的.
说实话, 我真的挺喜欢 jekyll 默认的 minia 主题的. 某种程度上, 暗合了 我 “极简风” 的审美. 博客就是博客嘛, 干嘛搞那些乱七八糟的动效. 有些人的博客, 真的看的人头皮发麻. 你可以试想一下, 当你真着急解决某个问题, 搜索引擎给你推荐了某篇技术文章, 你满怀期待点进来, 结果就是各种加载缓慢,白屏, 然后是各种特效, 乱七八糟的附件一顿炫… 多少, 会让人有点扫兴. 技术博客, 更多的还是以技术为主; 让读者能快速地判断, 能不能解决自己眼下的问题. 可能有用, 就继续读; 不合适的意外读者, 趁早离开, 忙自己的正事, 也不是一件坏事.
问: minima 自带的样式, 不好看吗?
其实不是好不好看的问题, 某些情况下, 高亮的压根就是错误的,或者说极具误导性的.当然, 这里讨论的是 minia 2.5 版本. 一个发布于5年前的版本, 至今依然保有生命力, 真的应了那句 “less is more”. 顺便提一句 master 分支的 3.0版本, 仅从当前介绍看, 对我几乎没啥吸引力. 即使发布了, 我也大概率不会升级.
此处放两张默认高亮的图吧. 分别是 Java 代码和 JS 代码.
具体如何做呢?
方法并不复杂. 主要是分以下几步:
-
看文档, 熟悉 Github Page 自定义高亮的方法.推荐的有两种:
-
直接禁用 Jekyll 的语法高亮机制, 改用 highlight.js.
-
保留 Jekyll 的语法高亮机制, 只新增 github 的语法高亮样式.
-
-
综合权衡, 选择适合的语法高亮机制.
-
我最终选择了 第二种, 只新增一个 css 样式就行了.
-
不选择 highlight.js, 一部分是因为不想为一个不太大的提升, 牺牲页面加载性能; 另一方面,也是自己太懒了, 不想去折腾. 一共100+高亮, 还要根据情况选择加载还是的 JS 文件… 想想就头疼… 语法高亮, 能凑合看就行了, 别高亮的太离谱就行. 毕竟大家是来找解决方案的, 谁有闲心去关注语法高亮是不是真的好看.
-
具体实施: 将 github 高亮样式, 引入我的博客站.
- 第一步: 先获取 github 的语法高亮样式. 这一步会生成一个 github-syntax-highlighting.css 文件.
rougify style github > ./assets/github-syntax-highlighting.css
-
第二步: 将 css 文件, 转成 scss 文件.哈哈哈. 挺奇怪的需求吧. 我主要是想全局继续只保留一个 css 文件.转换方式, 我用的是这个工具网站.
-
第三步: 新建 _sass 目录, 并在该目录下新建文件 github-syntax-highlighting.scss.将前一步生成的 scss 文本, 拷贝到文件里. 此时第一步生成的 github-syntax-highlighting.css 就可以删除了.
-
第四步: 在 assets/main.scss 的末尾新增:
@import "github-syntax-highlighting";
注意: 如果你没有 assets/main.scss 这个文件, 建议看下这里, 初步了解下它可能的来由.
效果如何? 大部分场景下,够用了. 就喜欢这样够用又省心的功能. 凭一个单CSS文件增加的语法高亮, 还要啥小汽车!
我附上修改后的两个对应的截图, 供参考:
小感: 这种 “自由” 的感觉, 真好!
这种可以根据自己需要, 随心定制的感觉, 真的特别舒服. 用的也都是较为大众的技术栈, 大部分也都能找到相关的资料或者讨论. 根据我选台式机的标准看, Jekyll 算是一个还不错的 主板, 可玩性很强; 不想折腾的话,也有适合懒人的极简风选项.