最近把博客迁移至GHOST,所以很多东西都需要重新整理和配置。对于喜欢敲代码的人而言,语法高亮是必不可缺的需求,毫无疑问,首先配置这个插件。原本是想写篇日志测试下配置后的插件显示效果,索性把过程记录下来。因为主要目的是插件应用,所以这里就不深入到阅读源码和代码层面的分析,没有太多内容可写,直接上干货了。对于想看湿货的朋友,可以直接忽略后面的内容。
语法高亮的插件,我用的是:prismjs, 它能高亮显示的语言种类很多,皮肤也有好几套,很赞。使用方式也很简单,见以下步骤:
安装插件
- 打开下载页面: 传送门
- 配置选项,勾选自己偏好的皮肤、语言以及附加功能。这点做的很人性化,按需配置
- 配置完毕之后,在页面底部点击下载
prism.js
和prism.css
两个文件 - 把这两个文件上传至服务器
- 复制
prism.js
到:ghost/content/themes/xxx/assets/js
文件夹,注意xxx是模板名称 - 复制
prism.css
到ghost/content/themes/xxx/assets/css
文件夹 - 编辑
ghost/default.hbs
文件
在模板页顶部添加css
文件链接
<link rel="stylesheet" href="{{asset 'css/prism.css'}}" />
在模板页底部添加js
文件链接,也可以在ghost/content/themes/xxx/partials/footer.hbs
文件里面添加。
<script src="{{asset 'js/prism.js'}}"></script>
如何使用
在Ghost后台编辑日志内容,添加如下内容进行测试:
```language-markup
<h1>Hello, World!</h1>
```
对于其它语言,格式为language-name
,只需将name
替换成你想高亮的语言名称即可,使用起来很便捷。
语法高亮测试
以下测试代码未经过编译测试,如果发现有输入错误,请无视。
c
#include <stdio.h>
void main(void)
{
printf("hello, world!");
}
python
def say(something):
print(something)
if ___name__ == '__main__':
say('Hello, world!')
javascript
function say(something){
alert(something)
}
say('Hello, world!');
c++
#include <iostream>
using namespace std;
int main(int args, char **argv)
{
cout<<"hello, world!"<<endl;
return 0;
}
go
package main
import(
"fmt"
)
func main(){
fmt.Println("Hello, world!")
}