Ghost博客中使用highlight.js為文章代碼添加語法高亮


效果可以點(diǎn)擊進(jìn)入我的博客體驗(yàn)

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

css1.png

然后在<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>

body里js.png

工作完成,在我們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

C#.png



Monokai
C#2.png



Xcode
C#3.png



Tomorrow
C#4.png


轉(zhuǎn)載請(qǐng)注明出處: http://zyden.vicp.cc/highlight-js/
謝謝

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市寻行,隨后出現(xiàn)的幾起案子霍掺,更是在濱河造成了極大的恐慌匾荆,老刑警劉巖拌蜘,帶你破解...
    沈念sama閱讀 221,406評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異牙丽,居然都是意外死亡简卧,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,395評(píng)論 3 398
  • 文/潘曉璐 我一進(jìn)店門烤芦,熙熙樓的掌柜王于貴愁眉苦臉地迎上來举娩,“玉大人,你說我怎么就攤上這事构罗⊥妫” “怎么了?”我有些...
    開封第一講書人閱讀 167,815評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵遂唧,是天一觀的道長(zhǎng)芙代。 經(jīng)常有香客問我,道長(zhǎng)盖彭,這世上最難降的妖魔是什么纹烹? 我笑而不...
    開封第一講書人閱讀 59,537評(píng)論 1 296
  • 正文 為了忘掉前任,我火速辦了婚禮召边,結(jié)果婚禮上铺呵,老公的妹妹穿的比我還像新娘。我一直安慰自己隧熙,他們只是感情好片挂,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,536評(píng)論 6 397
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般音念。 火紅的嫁衣襯著肌膚如雪滋将。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,184評(píng)論 1 308
  • 那天症昏,我揣著相機(jī)與錄音随闽,去河邊找鬼。 笑死肝谭,一個(gè)胖子當(dāng)著我的面吹牛掘宪,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播攘烛,決...
    沈念sama閱讀 40,776評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼魏滚,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了坟漱?” 一聲冷哼從身側(cè)響起鼠次,我...
    開封第一講書人閱讀 39,668評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎芋齿,沒想到半個(gè)月后腥寇,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,212評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡觅捆,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,299評(píng)論 3 340
  • 正文 我和宋清朗相戀三年赦役,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片栅炒。...
    茶點(diǎn)故事閱讀 40,438評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡掂摔,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出赢赊,到底是詐尸還是另有隱情乙漓,我是刑警寧澤,帶...
    沈念sama閱讀 36,128評(píng)論 5 349
  • 正文 年R本政府宣布释移,位于F島的核電站叭披,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏秀鞭。R本人自食惡果不足惜趋观,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,807評(píng)論 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望锋边。 院中可真熱鬧皱坛,春花似錦、人聲如沸豆巨。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,279評(píng)論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至贩猎,卻和暖如春熊户,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背吭服。 一陣腳步聲響...
    開封第一講書人閱讀 33,395評(píng)論 1 272
  • 我被黑心中介騙來泰國打工嚷堡, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人艇棕。 一個(gè)月前我還...
    沈念sama閱讀 48,827評(píng)論 3 376
  • 正文 我出身青樓蝌戒,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國和親沼琉。 傳聞我的和親對(duì)象是個(gè)殘疾皇子北苟,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,446評(píng)論 2 359

推薦閱讀更多精彩內(nèi)容