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

Blog UV: AmazingCounters.com



搭建好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)

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

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

找到<head>标签,在其内添加我们需要的highlight.js的样式:
<link href="//cdn.bootcss.com/highlight.js/9.0.0/styles/tomorrow.min.css" rel="stylesheet">

然后在<body>里引入js文件:
<script src="//cdn.bootcss.com/highlight.js/9.0.0/highlight.min.js"></script>
同时在其后面再添加一句js的调用代码:
<script >hljs.initHighlightingOnLoad();</script>

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

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

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


样式展示:

Androidstudio

Monokai

Xcode

Tomorrow



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

comments powered by Disqus