【迁移】新博客语法高亮插件配置

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

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

安装插件

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