Ghost CMS

Ghost CMS 程式碼語法高亮完整教學：Prism.js 整合指南

學習如何在 Ghost CMS 加入語法高亮功能，透過 Code Injection 或主題整合兩種方式實作 Prism.js，並善用複製按鈕、行號等進階插件。

CL HSIEH

— 閱讀時間 4 分鐘
分享
Ghost CMS 程式碼語法高亮完整教學：Prism.js 整合指南
Photo by Jakub Żerdzicki on Unsplash

在技術部落格或開發者網站中，程式碼片段的呈現品質直接影響讀者體驗。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 就能搞定。如果你重視效能和完整控制，則值得花時間整合到主題檔案中。無論哪種方式，讀者看到清晰有色彩的程式碼，閱讀體驗都會大幅提升。

Read more