用Prism给Ghost添加代码高亮

常见的Web代码高亮工具有Prismhighlight.js。它们都是用CSS配合JavaScript来实现代码高亮,原理大同小异,两者都不支持IE9以下的浏览器,这无关紧要,看代码的访问者通常用现代浏览器。相比而言 Prism 代码更为轻巧但要在代码前手动指定语言才生效,highlight.js略显臃肿。本站使用Prism实现代码高亮。

Prism用法很简单,到官网获取 JavaScript 和 CSS 文件,然后引用到网站页面里就行。这里以本站为例主要说Ghost博客系统的使用方法。我只关注前端相关内容,语言只选了 Markup、CSS和JavaScript。下载到的css和js文件加起来不到10k。将下载到的文件分别上传到casper主题的casper/assets/css和casper/assets/js文件夹。
Prism官网截图

文件引用

编辑主题里的default.hbs。在</head>前插入

{{# if post}}
<link rel="stylesheet" type="text/css" href="/assets/css/prism.css" />  
{{/if}}

编辑post.hbs文件,文档最后面{{/post}}之后插入

<script src="/assets/js/prism.js" type="text/javascript"></script>  

重启Ghost高亮代码即可使用,但在此之前发布内容如果未明确指定代码语言,是不会有效果的,需要需要在代码块旁指定语言类型。如:

```javascript
var a=0;  
alert(a);  

prism还可显示代码行数,在区块右上角显示代码语言等功能,只需在下载代码时勾选所需功能即可。但是不建议这么做,只要做到代码高亮突出显示达到目的,弄些太花哨的东西没意义。CSS和JS文件如果只有几十行,非常建议直接将内容写入到style和script标签里,这样减少http请求,提高页面访问速度。