前言

环境

  • Ghost 版本:2.1.1;
  • highlight 版本:9.1.2;
  • Casper 版本:2.6.2;

背景

作为一个程序猿的站点,没有代码高亮的功能怎么能行?!

分析

上网搜了一下,一共搜到了两个库,分别是 highlight.jsPrism。对比了很多,我得出的结论是 Prism 比较轻量,highlight.js 比较老牌。因为我目前倒不是很关注网站的响应速度和性能,所以就选择了 highlight.js

实施

使用 highlight.js

使用 highlight.js 很简单。只需要添加三个组件。

  • 代码的样式文件;
  • 分析代码确定样式的 JavaScript 脚本文件;
  • 用来调用脚本文件的脚本;

详情可以参见 highlight.js 用法。在博文中,我一般在 markdown 代码段中使用高亮,有些情况下需要指定需要高亮的代码是哪种语言,具体支持哪些语言和在 markdown 中该指定该语言的正确写法也在以上页面中。

highlight---supported-languages

为了方便使用,我直接使用了 BootCDN 的服务。使用的时候直接复制 BootCDN 的标签。

样式文件

highlight.js 默认提供了很多代码样式,选择一个自己喜欢的样式。将 CSS 文件的标签粘贴在后台 -> Code Injection -> Blog Header。需要注意的是,当前 Casper 主题的代码背景颜色的黑色,如果使用普通的高亮主题,代码一般都是深色的,将会隐藏在背景中,所以如果不想修改 Casper 样式的话,选择一个 dark 的样式比较好。可以直接在 highlight.js Demo 选择样式预览。

脚本文件

BootCDN 提供的 hightlight.js 脚本文件是根据具体的代码语言打包的,自己站点上写的是哪种代码就需要引入对应代码的脚本文件。因为我一般是使用 JavaScript,因此默认就引入了对应的脚本文件。将复制好的标签粘贴在后台 -> Code Injection -> Blog Footer。

调用脚本文件函数

将以下代码放在刚才的脚本文件下面一行即可。

<script>hljs.initHighlightingOnLoad();</script>

屏蔽 casper 主题对代码文字颜色的设置

以上工作都做好以后重启了 Ghost 服务,刷新页面后发现代码还是没有颜色的变化,打开 Chrome 调试工具后发现,当前针对代码生效的 CSS 规则如下。

.post-full-content pre code * {
  color: inherit;
}

是在 screen.css 文件中定义的,于是我又在后台路径 ghost/current/content/themes/casper/assets/css/ 下找到了 screen.css 文件并注释掉了。重启以后发现还是不行。后来又尝试过了很多办法,还是不行。

最后在 Chrome 的调试工具中发现,站点调用的不是 css 文件夹下的原始文件,而是被压缩以后的文件,在 built 文件夹下。

于是,从 Casper GitHub 上 clone 了项目,按照 README.md 文件的说明。先修改了 css 文件夹下面的原始文件。

$ yarn install

然后安装好依赖以后,再压缩新的样式文件。

$ yarn zip

然后将 built 文件夹下生成的压缩的样式文件上传到服务器后重启,代码的颜色高亮就出现了。

参考资料