常見的代碼高亮顯示的框架有Prism和highlight.js,highlight以前使用過,略微顯得有點麻煩,然后這次選擇時,看了下prism,感覺使用似乎更為簡單。而關(guān)于兼容性,我覺得:
不用chrome的開發(fā),不是一個好程序員。
所以,兼容性作為一個技術(shù)類博客來說,基本不要多考慮。
下面來看看,ghost中,如何加入prism。
1. 訪問官網(wǎng)生成css和js文件
官網(wǎng)鏈接:http://prismjs.com/download.html
主要有三個選項:
- 選擇主題
- 選擇需要支持高亮的語言
- 選擇需要的插件
主題可以自己預(yù)覽,然后選擇自己喜歡的主題。其他的,如果有選擇糾結(jié)癥的同學(xué),可以直接全選。壞處是,就是生產(chǎn)的js和css大一點而已嘛:)
2. 下載prism css和js文件
選擇完畢之后,點擊下面2個大按鈕:Download JS Download CSS ,然后會下載得到兩個文件:
prism.css
prism.js
將prism.css放在主題文件夾的assets/css/目錄中,將prism.js放到assets/js/目錄中。
3. 修改模板代碼
在主題文件夾中,找到default.hbs打開,在</head>加入以下代碼
{{# if post}}
<link rel="stylesheet" type="text/css" href="/assets/css/prism.css" />
{{/if}}
然后找到post.hbs打開,在{{/post}}后面加入下面代碼
<script src="/assets/js/prism.js" type="text/javascript"></script>
4. 重啟ghost服務(wù)
重啟ghost服務(wù),然后就大功告成來。
5. 平時如何使用
例如,我們要讓一段java代碼高亮顯示,則按如下方式寫:
```java
public class Test{
//.......
}
# ``` //把#號去掉,這里是因為避免轉(zhuǎn)義,所以加了個#號