搭建好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/
谢谢