Ghost CMS 程式碼語法高亮完整教學：Prism.js 整合指南
學習如何在 Ghost CMS 加入語法高亮功能，透過 Code Injection 或主題整合兩種方式實作 Prism.js，並善用複製按鈕、行號等進階插件。
在技術部落格或開發者網站中，程式碼片段的呈現品質直接影響讀者體驗。Ghost CMS 提供了兩種主流方式實作語法高亮：透過 Code Injection 快速整合，或深度整合到主題檔案中。本文帶你完整了解兩種方法，並介紹 Prism.js 的進階插件功能。
在 Ghost 編輯器中建立程式碼區塊
Ghost 編輯器原生支援 Markdown 語法，只需用三個反引號加上語言名稱，即可標記程式碼區塊：
```javascript
const greet = (name) => `Hello, ${name}!`;
console.log(greet('Ghost'));
```支援的語言涵蓋 JavaScript、Python、PHP、CSS、HTML、Bash 等常見語言。不過，Ghost 預設不會對程式碼上色，需要額外整合語法高亮函式庫。
方法一：透過 Code Injection 整合 Prism.js（推薦新手）
這是最快速的方式，不需要修改主題檔案，換主題也不會遺失設定。
步驟 1：選擇 Prism 主題樣式
前往 Prism 官網選擇配色主題（如 Tomorrow Night、Okaidia），並複製 CDN 連結。
步驟 2：加入 Ghost Code Injection
進入 Ghost 後台 → Settings → Code Injection，在 Site Header 加入 CSS：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css">在 Site Footer 加入 JavaScript：
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>使用 autoloader 插件可以自動按需載入語言支援，不必手動加入每個語言的腳本。
方法二：整合 Prism.js 到主題檔案（推薦進階用戶）
將 Prism 直接打包進主題，可以減少外部請求、控制版本，並搭配 npm 工作流程管理。
步驟 1：下載 Prism 檔案
npm install prismjs步驟 2：複製到主題目錄
your-theme/
├── assets/
│ ├── css/
│ │ └── prism.css ← 放語法高亮樣式
│ └── js/
│ └── lib/
│ └── prism.js ← 放 JS 函式庫步驟 3：在主題模板中引用
在 default.hbs 的 <head> 加入：
<link rel="stylesheet" href="{{asset "css/prism.css"}}">在 </body> 前加入：
<script src="{{asset "js/lib/prism.js"}}"></script>Prism.js 進階插件
Prism 提供豐富的插件庫，以下是最實用的幾個：
| 插件名稱 | 功能 | 適用場景 |
|---|---|---|
| line-numbers | 顯示行號 | 教學文章、多行程式碼 |
| copy-to-clipboard | 複製按鈕 | 提升讀者體驗 |
| line-highlight | 高亮特定行 | 強調重點程式碼 |
| toolbar | 頂部工具列 | 搭配其他插件使用 |
| diff-highlight | 顯示程式碼差異 | 版本比較文章 |
啟用複製按鈕範例
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/toolbar/prism-toolbar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>FAQ
Code Injection 和整合到主題有什麼差別？
Code Injection 快速方便，換主題不影響設定；整合到主題效能較好，但換主題需重新設定。對大多數部落格來說，Code Injection 已足夠。
為什麼加了 Prism 卻沒有上色？
最常見原因是程式碼區塊缺少語言標記。確認 Markdown 的反引號後方有加語言名稱，例如 ```python 而非單純的 ```。
可以在 Ghost 使用其他語法高亮庫嗎？
可以，Highlight.js 是另一個熱門選擇，設定方式相同。Prism 的優勢在於插件生態更豐富、效能更輕量。
語法高亮會影響網站速度嗎？
透過 CDN 載入影響極小。若要進一步優化，可使用 autoloader 按需載入，或整合到主題後以 webpack 打包。
結語
在 Ghost 中加入語法高亮並不複雜——對於大多數部落格，Code Injection 加上 Prism CDN 就能搞定。如果你重視效能和完整控制，則值得花時間整合到主題檔案中。無論哪種方式，讀者看到清晰有色彩的程式碼，閱讀體驗都會大幅提升。
