Ghost中让Markdown通过PrismJS实现语法高亮

最近把WordPress换成了GHost,感觉GHost更加简洁专一,虽然本人文章没写多少,但没少倒腾系统,呵呵。之前WordPress是有一个语法高亮插件的,转到Ghost后是默认没有语法高亮的,后来在网上搜索了一下,认识了PrismJS,感觉还不错。

下载PrismJS

PrismJS的官网上http://prismjs.com/提供了定制化下载的功能,可以根据自己实际的需求,可以定制化选择主题、语言支持、扩展插件。然后系统会根据你的选择,提供个性化的JS/CSS文件下载链接。一共需要下载两个文件:prism.js & prism.css

配置PrismJS

prism.js和prism.css一般会放到如下的路径中:

/ghost/content/themes/casper/assets/js
/ghost/content/themes/casper/assets/css

我用的主题是ghost默认的casper,具体的可根据你的选择来替换。

然后编辑 /ghost/content/themes/casper/default.hbs css文件放到头部的位置:

    {{! Styles'n'Scripts }}
    ...
    <link rel="stylesheet" type="text/css" href="{{asset "css/prism.css"}}" />
    ...
    {{ghost_head}}
</head>  

js文件放到尾部:

    {{! The main JavaScript file for Casper }}
    ...
    <script type="text/javascript" src="{{asset "js/prism.js"}}"></script>
</body>  

default.hbs修改后需要重启ghost的服务,然后我们就可以在编辑器中加入语法高亮了!我们只需在代码段标示的开头部分加入 language-xxxx 即可,例如:

 ```language-javascript
   ...
   你的javascript代码
   ...
 ```

至于PrismJS支持哪些语言,以及相应的language-xxxx标示是什么,可以参考http://prismjs.com/#languages-list