Ghost 樣式設定指南(持續更新)

Ghost 預設的表格沒框線、程式碼沒上色。用 Code injection 加幾行 CSS 和 Prism.js 就能搞定，不用改主題檔案。

Ghost 預設的兩個外觀問題

開始用 Ghost 寫文章之後，馬上遇到兩件事：

1. Markdown 表格推上去後沒有框線，內容擠在一起很難讀
2. 程式碼區塊是純色的，沒有語法高亮，跟記事本貼上去一樣

這兩個問題都不需要改主題檔案，用 Ghost 的 Code injection 功能就能解決。位置在 Ghost 後台 → Settings → Code injection，分成 Site Header（放 CSS）和 Site Footer（放 JS）。

表格樣式

Ghost 的主題大多沒有內建 Markdown 表格的樣式。HTML <table> 標籤是有的，但沒有 border、padding 這些基本屬性，所以看起來就是一坨文字。

在 Site Header 加入以下 CSS：

<style>
.gh-content table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 1.5em 0 !important;
  font-size: 0.95em !important;
}
.gh-content table th,
.gh-content table td {
  border: 1px solid #ddd !important;
  padding: 8px 12px !important;
  text-align: left !important;
}
.gh-content table th {
  background-color: #f4f4f4 !important;
  font-weight: 700 !important;
  font-size: 1.05em !important;
}
.gh-content table tr:nth-child(even) {
  background-color: #f9f9f9 !important;
}
.gh-content table tr:hover {
  background-color: #f1f1f1 !important;
}
</style>

兩個重點：

• .gh-content table 而非單純 table。.gh-content 是 Ghost 文章內容的容器 class，加上它可以提高 CSS 優先級，覆蓋主題預設的樣式
• !important 是必要的。很多 Ghost 主題會用高優先級的選擇器定義表格樣式，不加 !important 會被蓋掉

如果只寫 table { border-collapse: collapse; } 而沒有加 .gh-content 和 !important，很大機率不會生效。這是實際踩過的坑。

程式碼語法高亮

Ghost 的程式碼區塊（code block）預設只有背景色和等寬字型，不會根據程式語言上色。要讓它像 IDE 一樣有語法高亮，可以用 Prism.js。

設定步驟

Site Header 加入 Prism 主題 CSS（放在表格 CSS 後面）：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css"/>

Site Footer 加入 JS：

<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/components/prism-python.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-bash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-yaml.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-json.min.js"></script>
<script>Prism.highlightAll();</script>

幾個注意事項

CSS 主題一定要放 Site Header。Prism 的 CSS 是控制顏色的，如果放到 Footer 或位置不對，JS 會正常解析語法結構（你用 DevTools 看得到 <span class="token keyword"> 等標籤），但因為沒有對應的 CSS，所有 token 都會是同一個顏色，看起來就像沒生效。

Prism.highlightAll() 很重要。最後一行的手動觸發是為了避免載入時機問題。Prism 預設在 DOMContentLoaded 時自動掃描，但 Ghost 的頁面結構可能讓這個時機不對。加上這行強制重新掃描，確保所有 code block 都會被處理。

語言要個別載入。Prism 核心只包含基本的標記語言支援，其他語言要另外載入對應的 component。上面的範例載入了 Python、Bash、YAML、JSON。需要其他語言時，到 cdnjs Prism 頁面 找對應的檔案加上去就好。

Markdown code block 要標語言。寫文章時，用三個反引號加語言名稱（如 ```python）才會觸發對應的語法高亮。如果只寫三個反引號不加語言，Prism 會跳過那個區塊。

主題選擇

prism-tomorrow 是深色背景主題，比較接近 VS Code 的感覺。其他常見選項：

換主題只要改 CSS 連結的檔名就好，JS 不用動。

完整的 Code injection 設定

最後整理一下，方便直接複製貼上。

Site Header：

<style>
.gh-content table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 1.5em 0 !important;
  font-size: 0.95em !important;
}
.gh-content table th,
.gh-content table td {
  border: 1px solid #ddd !important;
  padding: 8px 12px !important;
  text-align: left !important;
}
.gh-content table th {
  background-color: #f4f4f4 !important;
  font-weight: 700 !important;
  font-size: 1.05em !important;
}
.gh-content table tr:nth-child(even) {
  background-color: #f9f9f9 !important;
}
.gh-content table tr:hover {
  background-color: #f1f1f1 !important;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css"/>

Site Footer：

<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/components/prism-python.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-bash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-yaml.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-json.min.js"></script>
<script>Prism.highlightAll();</script>

這些設定是全站生效的，加一次就好，之後所有文章的表格和程式碼區塊都會自動套用。