Ghost配置2——添加代码高亮

使用Ghost的初体验,主题外观都很满意,除了代码段的显示效果。

没有代码高亮,这效果怎么说呢?就像是使用了文本编辑器在写代码,说不上离经叛道,但就是从心底觉得一个字:土。
图片描述

用Ghost加高亮做关键字,能搜出一大堆的代码高亮方案。不过在Ghost版本2.0以后,再去修改代码来载入js和css文件已经没有必要。因为Ghost有了新的功能:代码注入(Code Injection)。

对于Ghost的所有页面,都使用了default.hbt作为了基础模板文件。在模板的header和body末尾,都可以注入用户自定义的代码。

加入highlight.js

目前第三方高亮模块,主要以highlight.js和prism.js为主,二者没有太大的区别。我选择了应用更广泛的highlight.js
图片描述

highlight.js主要有两部分组成,一部分是引用的CSS文件,一部分是JS文件。进入Ghost管理后台,点击code injection菜单,分别将二者写入即可。
图片描述

在Blog Header中,填入:

<link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/monokai.min.css" rel="stylesheet">

在Blog Footer中,填入:

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script> 
<script >hljs.initHighlightingOnLoad();</script>

注意,我这里选择了monokai的高亮风格,也可以根据实际需要,选择自己的样式风格。具体样式,可以参考这里

让高亮生效

加入highlight.js后,并没有让高亮效果马上生效。Ghost的编辑器在输入代码段之前,需要输入三个`符号,然后自动弹出一个代码段输入的卡片。而highlight例子中,需要输入三个`并指定语言名称才会有高亮效果。如:

#```html  // 这里实际没有#
<html>
    ...
</html>

问题是,用现在的编辑器在我输三个`的时候就会自动弹出代码段输入卡片,根本不给我写语言名称的机会呐。

被这个问题困扰了半天,突然一想:编辑器不是自带插入markdown片段的功能吗?于是试了一试,问题便迎刃而解了。

阅读 1.7k更新于 2018-10-19
推荐阅读
目录