Ghost博客中使用highlight.js为文章代码添加语法高亮

效果可以点击进入我的博客体验

搭建好Ghost后，默认并不会对页面中的代码作其他处理，并不能直观地显示出代码结构，我们可以通过highlight.js的帮助实现代码高亮。
此教程非常简易明了，助你在CentOS轻松用上highlight.js

顺手贴上highlight.js的介绍:
--支持 71 种编程语言的语法解析
--拥有 44 种样式
--自动检测编程语言
--同时为多种编程语言代码高亮
--可以在 node.js 平台上运行
--支持各种标签
--与任何 js 框架兼容

highlight.js主要是从页面下手，植入样式，看见网络上大多的做法都是本地下载highlight.js，再在页面上用js连接，不过我觉得那比较适合windows主机，我们来使用一个简单快捷的方法实现。主要是引入一个css文件和一个js文件，配合Bootstrap所提供的CDN链接，加载速度方面完全不用担心，进到BootCDN搜索highlight.js就能找到，提供历史各个版本各个样式

这里使用highlight.s9.0.0来作例子，亦可直接跟着同步设置

(演示系统为Centos 6)

首先我们需要在页面的里引入css文件：
进入Ghost下的主题目录：
~# cd /var/www/ghost/content/themes/
~# ls
casper-zh ghostium roon-zh

我这里有三个主题，我们接下来要修改主题文件夹下的default.hbs文件:
~# vi ghostium/default.hbs

找到标签,在其内添加我们需要的highlight.js的样式：

css1.png

然后在里引入js文件：

同时在其后面再添加一句js的调用代码：

body里js.png

工作完成，在我们ghost下所有的页面，highlight.js都会自动寻找< pre>标签对其操作使代码实现高亮，在markDown编辑器中我们只需要像往常一样使用“```”语法来键入代码块即可，除了我们可以为代码块指定语言外，highlight.js还会==自动分析==语言对其进行高亮处理，手动选择语言样式的书写格式如下：

  ```c++  
 //something
  `` `

附上：
highlight.js样式浏览1
highlight.js样式浏览2
highlight.js官网

样式展示：

Androidstudio

C#.png

Monokai

C#2.png

Xcode

C#3.png

Tomorrow

C#4.png

转载请注明出处： http://zyden.vicp.cc/highlight-js/
谢谢