Ghost本地安裝highlight.js使代碼高亮
阿新 • • 發佈:2017-07-20
寫博客 路徑 繼續 net this 點擊 pri handlebar length
對於程序猿寫博客來說,這代碼高亮是起碼的要求。可是Ghost本身沒有支持高亮代碼。
可是能夠通過擴展來實現,它就是highlight.js——附官方站點,看了下首頁介紹,真的非常強大,如今說說怎麽進行安裝,非常easy。
下載highlight.js
下載地址
本來已經包括了非常多支持的高亮語言,假設上面沒找到你要的語言,能夠在以下繼續 勾選。最後點擊下方的下載。
解壓安裝highlight.js
解壓highlight.js到Ghost本地的主題目錄以下的資源目錄。我這裏是:
安裝highlight.js
用文本編輯器打開theme目錄下的default.hbs文件進行編輯:
找到{{! Styles’n’Scripts }},在以下加入:
<link rel="stylesheet" type="text/css" href="{{asset "/highlight/styles/hybrid.css"}}" />
這裏的hybrid.css是你想用的代碼主題。這裏我用的hybrid.css,,個人喜好。還能夠選擇styles目錄下的其他主題樣式。你能夠到這個站點預覽各種風格的代碼主題,選擇自己喜歡的。
找到{{! The main JavaScript file for Casper }},在以下加入:
<script type ="text/javascript" src="{{asset "/highlight/highlight.pack.js"}}"></script>
<script type="text/javascript">hljs.initHighlightingOnLoad();</script>
怎樣使用代碼高亮
用Ghost自帶的markdown編輯器時。依照例如以下格式:
<pre><code class="python">...</code></pre>
python能夠換成其他的語言。
Ok。如今能夠體驗代碼高亮的感覺了!效果例如以下,這是一段python代碼:
Ghost本地安裝highlight.js使代碼高亮