Ghost加入Prism高代高亮顯示

常見的代碼高亮顯示的框架有Prism和highlight.js,highlight以前使用過,略微顯得有點麻煩,然后這次選擇時,看了下prism,感覺使用似乎更為簡單。而關(guān)于兼容性,我覺得:

不用chrome的開發(fā),不是一個好程序員。

所以,兼容性作為一個技術(shù)類博客來說,基本不要多考慮。

下面來看看,ghost中,如何加入prism。

1. 訪問官網(wǎng)生成css和js文件

官網(wǎng)鏈接:http://prismjs.com/download.html

主要有三個選項:

  1. 選擇主題
  2. 選擇需要支持高亮的語言
  3. 選擇需要的插件

主題可以自己預(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)義,所以加了個#號
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容