讓程式碼會說話：什麼是語法高亮 (Syntax Highlighting) 與設定指南
在閱讀技術文章或開發筆記時，你一定看過那些色彩繽紛、排版整齊的程式碼區塊。比起單調的黑底白字，這些帶有顏色的程式碼不僅看起來更專業，閱讀起來也輕鬆許多。這背後的魔法，就叫做「語法高亮（Syntax Highlighting）」。
今天這篇文章，我們就來聊聊什麼是語法高亮，以及如何為你的 Blogger 網站設定一套輕量且強大的高亮系統。
什麼是語法高亮？
語法高亮是一種文字編輯器或網頁顯示技術。它的運作原理，是透過程式「解析」你輸入的文字，根據特定程式語言（如 Python、C++、HTML）的文法規則，將不同的元素標記出來，並賦予不同的顏色或字體樣式。
舉例來說，系統會把：
- 關鍵字 (Keywords)：如 Python 的
def,import,return標示為紫色。 - 字串 (Strings)：如
"Hello World"標示為綠色。 - 註解 (Comments)：如
# 這是一行註解標示為低調的灰色。
為什麼我們需要它？
- 極大化易讀性：人腦對顏色的辨識速度遠快於文字。透過顏色分類，讀者能在一秒內看懂程式碼的結構與邏輯。
- 降低錯誤率：在開發過程中，如果一個字串沒有正確閉合，後面的程式碼顏色就會全錯，這能幫助開發者迅速抓出 Bug。
- 展現專業度：對於一個技術部落格而言，乾淨、高亮且帶有正確縮排的程式碼區塊，是建立讀者信任感的第一步。
如何在 Blogger 中實作語法高亮？
在網頁前端的世界裡，最主流的做法是引入第三方的 JavaScript 函式庫。基於輕量化與高度可擴充性，本文將以 Prism.js 為例，帶你拆解設定的核心步驟。
步驟一：在 Blogger XML 中載入外觀樣式 (CSS)
首先，我們需要告訴網頁「程式碼該長什麼樣子」。Prism 提供了多種主題（如經典的深色主題 Okaidia）。
Blogger 的「編輯 HTML」介面本質上是一個嚴格的 XML 檔案。所有的標籤都必須完美閉合（例如結尾的斜線），否則系統將會報錯無法存檔。
請進入後台的「主題」->「編輯 HTML」，利用搜尋功能找到 <head> 標籤，並在它的正下方貼入這段 CSS 載入碼。請特別注意代碼結尾的 /> 符號：
<!-- 引入 Prism.js Okaidia 深色主題 (注意結尾的斜線) -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-okaidia.min.css" rel="stylesheet" />
步驟二：在 XML 底部載入解析引擎 (JavaScript)
有了外觀，還需要「大腦」來解析文字。為了不拖慢網頁載入文章的速度，JavaScript 通常會放在整個網頁的最底部。
在同一個編輯畫面中，請滑到最底端，並在 </body> 的正上方載入 Prism 的核心引擎：
<!-- 引入 Prism 核心引擎 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
步驟一與步驟二的代碼只需在 Blogger 主題中設定一次（全域設定）。未來發布新文章時，千萬不要再把這兩段代碼貼進單篇文章中，以免造成重複載入與效能浪費。
步驟三：正確的 HTML 結構
這是最重要的一步！當你要在文章中插入程式碼時，必須嚴格遵守 <pre> 包裹 <code> 的結構，並在 <code> 加上 language-你的程式語言 的 Class 屬性：
<div class="code-block-container">
<pre><code class="language-python">
def greet(name):
print(f"Hello, {name}!")
</code></pre>
</div>
只要符合這個結構，Prism 就會自動將裡面的純文字，轉換成帶有漂亮顏色的畫面。
進階技巧：自動載入器 (Autoloader)
如果你撰寫的文章涵蓋多種語言，更聰明的做法是使用 Prism 的 Autoloader 外掛。你只需載入核心引擎與 Autoloader，系統就會在網頁讀取到對應的 Class 時，自動去雲端抓取所需的語法包，大幅降低維護成本！
結語
為部落格配置一套完善的語法高亮系統，就像是為你的技術知識打造了一個精美的展示櫃。透過簡單的 CSS 與 JS 引入，再配合正確的 HTML 結構，你也能讓枯燥的程式碼變得賞心悅目。