Skip to content

Ghost博客中使用highlight.js

liuzhiyi1992 edited this page Jan 24, 2016 · 1 revision

个人博客原文地址:http://zyden.vicp.cc/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)

首先我们需要在页面的<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](https://highlightjs.org/static/demo/)  
[highlight.js样式浏览2](http://jmblog.github.io/color-themes-for-highlightjs/)  
[highlight.js官网](https://highlightjs.org/)

<br>
###样式展示:  
Androidstudio ![](/content/images/2015/12/C-.png)<br>
Monokai ![](/content/images/2015/12/C-2.png)<br> 
Xcode  ![](/content/images/2015/12/C-3-1.png)<br>
Tomorrow ![](/content/images/2015/12/C-4.png)