搭建好Ghost后销部,默認(rèn)并不會(huì)對(duì)頁面中的代碼作其他處理缴饭,并不能直觀地顯示出代碼結(jié)構(gòu)硫椰,我們可以通過highlight.js的幫助實(shí)現(xiàn)代碼高亮繁调。
此教程非常簡(jiǎn)易明了,助你在CentOS輕松用上highlight.js
順手貼上highlight.js的介紹:
--支持 71 種編程語言的語法解析
--擁有 44 種樣式
--自動(dòng)檢測(cè)編程語言
--同時(shí)為多種編程語言代碼高亮
--可以在 node.js 平臺(tái)上運(yùn)行
--支持各種標(biāo)簽
--與任何 js 框架兼容
highlight.js主要是從頁面下手靶草,植入樣式蹄胰,看見網(wǎng)絡(luò)上大多的做法都是本地下載highlight.js,再在頁面上用js連接奕翔,不過我覺得那比較適合windows主機(jī)裕寨,我們來使用一個(gè)簡(jiǎn)單快捷的方法實(shí)現(xiàn)。主要是引入一個(gè)css文件和一個(gè)js文件,配合Bootstrap所提供的CDN鏈接宾袜,加載速度方面完全不用擔(dān)心捻艳,進(jìn)到BootCDN搜索highlight.js就能找到,提供歷史各個(gè)版本各個(gè)樣式
這里使用highlight.s9.0.0來作例子庆猫,亦可直接跟著同步設(shè)置
(演示系統(tǒng)為Centos 6)
首先我們需要在頁面的<head>
里引入css文件:
進(jìn)入Ghost下的主題目錄:
~# cd /var/www/ghost/content/themes/
~# ls
casper-zh ghostium roon-zh
我這里有三個(gè)主題认轨,我們接下來要修改主題文件夾下的default.hbs文件:
~# vi ghostium/default.hbs
找到<head>
標(biāo)簽,在其內(nèi)添加我們需要的highlight.js的樣式:
<link rel="stylesheet">
然后在<body>
里引入js文件:
<script src="http://cdn.bootcss.com/highlight.js/9.0.0/highlight.min.js"></script>
同時(shí)在其后面再添加一句js的調(diào)用代碼:
<script >hljs.initHighlightingOnLoad();</script>
工作完成,在我們ghost下所有的頁面月培,highlight.js都會(huì)自動(dòng)尋找< pre><code class="python"></code></pre >
標(biāo)簽對(duì)其操作使代碼實(shí)現(xiàn)高亮嘁字,在markDown編輯器中我們只需要像往常一樣使用“```”語法來鍵入代碼塊即可,除了我們可以為代碼塊指定語言外杉畜,highlight.js還會(huì)==自動(dòng)分析==語言對(duì)其進(jìn)行高亮處理纪蜒,手動(dòng)選擇語言樣式的書寫格式如下:
```c++
//something
`` `
附上:
highlight.js樣式瀏覽1
highlight.js樣式瀏覽2
highlight.js官網(wǎng)
樣式展示:
Androidstudio
Monokai
Xcode
Tomorrow
轉(zhuǎn)載請(qǐng)注明出處: http://zyden.vicp.cc/highlight-js/
謝謝