在 Ghost 部落格中加入程式碼標記

如何在 Ghost Blog 中擁有上圖程式碼標記和顯示的功能呢?

試試看 Prism.js，不僅設置簡單，各類程式碼支援非常完整，連 ReactJS 的 JSX 都有支援，而且檔案極小，有多種主題可以做選擇，並可以針對自己的需求選取會用到的語言，縮短網頁讀取的時間。

根據需求客製化Prism

進入到 Prism 官網的下載頁面後，可以根據自己的需求選取主題和語言，若沒有要做進階的客製化調整，最上方選取預設的 Minified version 就可以。

標記程式碼的主題，一共有六種，可以透過網頁右方的按鈕玩玩看不同的主題，並圈選其中一個。

下方則有提供支援語言的選取，可以看到支援的非常豐富，選取自己可能會用到的就好，避免拖慢網頁載入速度太多。

Prism 標記功能還有各種附加的外掛可以使用，圈選出程式碼中最重要的幾行 code 的 Line Highlight 功能，根據你的需求挑選附加功能即可。

選取完成後會算出最後生成的 CSS + Javascript 大小，接著按下面的按鈕分別下載 CSS 和 Javascript 檔案。

進入你的 Ghost 主題的程式碼（位於 content/themes/[使用的主題]底下），找到 default.hbs這個檔案。

將下載的 prism.css ，放到 /assets/styles/ 目錄下，然後在 <head>...</head> 底下加入

<link rel="stylesheet" type="text/css" href="{{asset "styles/prism.css"}}">

將下載的 prism.js ，放到 /assets/scripts/ 目錄下，然後在 </body> 之前加入

<script src="{{asset "scripts/prism.js"}}"></script>

大功告成，你可以自在的在 Blog 中使用漂亮的程式碼標記功能。

```language-markup
 Hello World!    
 ```

```language-javascript
var s = "Highlighting JavaScript";  
alert(s);   
 ```

```language-css
p { color: red }
```