使用 Prism 实现 Ghost 代码高亮
Rrism 是一个轻量级的 JS 前端代码高亮插件,借此可以非常简单的让 Ghost 实现代码高亮。
准备 ghost 主题
在 ghost 后台 Design
中下载 casper
主题到本地解压。将文件夹重命名,例如 casper-prism
。
下载 Prism
下载地址:http://prismjs.com/download.html
选择需要的语言,然后在页面最下方分别下载定制的 prism.js
和 prism.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
```