另一种Ghost添加代码高亮方式

前面介绍了用Prism给Ghost添加代码高亮,prism.js代码高亮的原理是用JS分析页面html源码,找到代码片段后通过class类识别出语言,然后根据语法在代码片段中插入标签,结合引用的CSS样式实现高亮。这种方案操作起来简单粗暴,在页面挂上css和js文件就可实现高亮。代码高亮对网站来说不是刚需,仅仅为了实现这个功能就外挂两个引用文件不划算。

我们在Ghost后台用Markdown书写内容,然后Ghost将markdown转为html。如果在markdown转为html这个过程中调用prism.js处理代码片段,那生成页面只需有CSS样式就可实现高亮,不用引用JS文件。

下面以本站为例,记录实现过程。

准备Prism

在服务器上进入Ghost安装目录,安装prism

cd /srv/www/denpe.com  
npm install prismjs  

安装成功后node_modules文件夹下会出现prismjs目录。理论上这样安装完事就可以支持所有语言代码高亮,我对node不熟,没折腾出来,默认只支持几个语言。好在可以从Prism官网下载支持所有语言的JS文件(200K左右),用他替换/srv/www/denpe.com/node_modules/prismjs/prism.js这个文件。

然后下载prismjs的CSS文件上传至casper/assets/css,编辑主题文件夹下的default.hbs</head>前插入以下代码。

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

修改showdown-ghost的扩展

Ghost的markdown转html由showdown支持,Ghost开发者弄了个showdown-ghost分支,所在目录/srv/www/denpe.com/node_modules/showdown-ghost showdown本身支持自定义扩展,我们可以自创建一个新扩展来调用prism处理代码片段。但是showdown-ghost和ghost后台结合一起有乱七八糟的问题,自定义扩展无法使用(应该是我不会折腾)。我这里通过修改已经被Ghost使用过的扩展highlight来调用prism处理代码片段。highlight扩展文件位置/srv/www/denpe.com/node_modules/showdown-ghost/src/extensions/highlight.js下载已经修改好的highlight.js 替换它。

更新生效

完成上面操作后新更新的文章发布后会自动实现代码高亮(不支持文章实时预览高亮),旧的文章需要后台点进去手动更新后才能生效,如果以前用过其他代码高亮需要删除旧的相关内容和文件。