由于Ghost目前还没有实现语法高亮的功能,所以我们决定采用highlight.js这个工具来帮助我们的文档实现语法高亮。

highlight.js通过扫描文档结构,自动将<code>块中的代码着色,能够自动识别代码的种类,同时还拥有多种多样的代码风格,总有一款适合你,这里我们以github的风格来作为范例。

现在问题来了,我们要下载整个highlight.js的包文件,解压之后还要把文件上传到服务器目录下,然后进行引用,比较麻烦,同时这里流量比较捉急的童鞋们也不希望什么资源都在站点下载。所以这里我们要祭出bootcdn了,在bootcdn中我们可以找到各种JS组件的缓存地址,这里直接放出我们需要的几个文件地址。

接下来,进入后台,在SETTINGS的Code Injection页面,我们在Blog Header部分添加:

<link href="//cdn.bootcss.com/highlight.js/9.4.0/styles/github.min.css" rel="stylesheet">

在Blog Footer部分添加:

<script src="//cdn.bootcss.com/highlight.js/9.4.0/highlight.min.js"></script>
<script type="text/javascript">
    hljs.initHighlightingOnLoad();
</script>

然后点击保存,最后去博客内容页看看代码块部分?It works!