最近把博客迁移至GHOST，所以很多东西都需要重新整理和配置。对于喜欢敲代码的人而言，语法高亮是必不可缺的需求，毫无疑问，首先配置这个插件。原本是想写篇日志测试下配置后的插件显示效果，索性把过程记录下来。因为主要目的是插件应用，所以这里就不深入到阅读源码和代码层面的分析，没有太多内容可写，直接上干货了。对于想看湿货的朋友，可以直接忽略后面的内容。

语法高亮的插件，我用的是：prismjs, 它能高亮显示的语言种类很多，皮肤也有好几套，很赞。使用方式也很简单，见以下步骤：

安装插件

  1. 打开下载页面: 传送门
  2. 配置选项，勾选自己偏好的皮肤、语言以及附加功能。这点做的很人性化，按需配置
  3. 配置完毕之后，在页面底部点击下载prism.js和prism.css两个文件
  4. 把这两个文件上传至服务器
  5. 复制prism.js到：ghost/content/themes/xxx/assets/js文件夹，注意xxx是模板名称
  6. 复制prism.css到ghost/content/themes/xxx/assets/css文件夹
  7. 编辑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!")
}

分享内容