Rrism 是一个轻量级的 JS 前端代码高亮插件,借此可以非常简单的让 Ghost 实现代码高亮。

准备 ghost 主题

在 ghost 后台 Design 中下载 casper 主题到本地解压。将文件夹重命名,例如 casper-prism

下载 Prism

下载地址:http://prismjs.com/download.html

选择需要的语言,然后在页面最下方分别下载定制的 prism.jsprism.css 文件。

提示:可以直接将这两个文件直接下载到 casper-prism/assets/css/casper-prism/assets/js/ 目录中。

编辑主题模板

在编辑器中打开 casper-prism/default.hbs 文件,在页面顶部和底部分别添加 CSS 和 JS 文件引用标签。

{{!-- Styles'n'Scripts --}}
    <link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}" />
    <link rel="stylesheet" type="text/css" href="{{asset "css/prism.css"}}">
...
{{!-- jQuery + Fitvids, which makes all video embeds responsive --}}
    <script type="text/javascript" src="{{asset "js/jquery-3.2.1.min.js"}}"></script>
    <script type="text/javascript" src="{{asset "js/jquery.fitvids.js"}}"></script>
    <script type="text/javascript" src="{{asset "js/prism.js"}}"></script>

上传主题

casper-prism 文件夹压缩成 zip 包,上传到 ghost 后台并启用新主题。

提示:再次编辑主题后只需要重新上传主题压缩包即可,无需重命名主题文件夹,ghost 会询问是否覆盖原主题。

代码高亮

使用时在代码块第一行标记要解析的语言:

```php
```