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

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

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

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

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

目前第三方高亮模块，主要以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片段的功能吗？于是试了一试，问题便迎刃而解了。