WordPress 程式碼高亮怎麼做？引號被自動轉換的原因與 3 種上色方法

在 WordPress 寫教學文章、分享程式碼，最常遇到兩個問題：

1. 貼上的程式碼，直的引號 " 被自動換成彎的 “ ”，讀者複製回去就出錯。
2. 程式碼一片黑白不好讀，想要像程式編輯器一樣有顏色（程式碼高亮）。

這篇依序說明怎麼解決。

問題一：引號被換成彎引號

原因：wptexturize

WordPress 有一個叫 wptexturize 的功能，會自動把文章裡的符號換成比較好看的排版符號，例如：

• 直引號 "、' 換成彎引號 “ ”、‘ ’
• 兩個減號 -- 換成破折號 –
• 三個句點 ... 換成刪節號 …

一般文章這樣比較好看，但程式碼裡的符號被換掉，就不能執行了。

最簡單的解法：放在「程式碼」區塊裡

wptexturize 本來就不會處理 pre、code 標籤裡面的內容。所以只要把程式碼放在區塊編輯器的「程式碼」區塊裡，符號就會維持原樣，大部分情況不用改任何設定。

• 區塊編輯器：新增「程式碼」區塊，直接貼上程式碼即可，<、> 這些符號會自動處理。
• 段落裡的短程式碼：選取文字後，用工具列的「內嵌程式碼」格式，一樣不會被轉換。
• 傳統編輯器：切換到「文字」模式，用 <pre><code> 包住程式碼；程式碼裡的 < 要寫成 <，否則會被當成 HTML 標籤。

真的要整站關閉轉換？

這篇文章舊版的做法，是在 functions.php 用 remove_filter() 把內文、摘要、留言的 wptexturize 一一移除。現在有更簡單、範圍也更完整的寫法，一行就能關閉整站的轉換：

add_filter( 'run_wptexturize', '__return_false' );

不過一般網站不需要這樣做。關掉之後，整站的引號、破折號都會維持原樣，中文網站影響不大，但英文內容會少了排版符號。只有在網站幾乎都是技術文章、又常在程式碼區塊以外的地方貼程式碼時，才值得考慮。

程式碼要加在子主題的 functions.php 或 Code Snippets 外掛裡，不要直接改主題本身的檔案，主題一更新就會消失。

問題二：讓程式碼有顏色

先說清楚：只靠 CSS 做不到真正的程式碼高亮。要讓關鍵字、字串、註解各有不同顏色，必須有程式先把程式碼拆成一個一個片段、分別加上標記，CSS 才能替它們上色。

這篇文章舊版用的是一個 Windows 小工具：先把程式碼轉成帶顏色標記的 HTML，再貼進文章，並從別的網站載入配色的 CSS 檔案。這種做法現在不建議：每一段程式碼都要先轉換才能貼，之後想換配色得一篇一篇重新處理；配色檔放在別人的網站上，對方網站一關閉，樣式就全部不見了。

現在常見的做法有下面三種。

方法一：程式碼高亮外掛（最省事）

到後台「外掛 → 安裝外掛」搜尋「syntax highlighter」或「code block」，可以找到不少專門的外掛。挑選時看這幾點：

• 支援區塊編輯器，通常會多一個可以選擇程式語言的程式碼區塊。
• 最近有持續更新、評價好、安裝數多。
• 有你需要的程式語言和配色，最好也有「一鍵複製」按鈕。

方法二：highlight.js（不裝外掛）

highlight.js 是開源的 JavaScript 程式碼高亮工具，會自動找出網頁裡 pre 裡面的 code 區塊並上色。WordPress「程式碼」區塊輸出的剛好就是這個結構，可以直接搭配。

1. 到 highlight.js 官方網站下載檔案，把 highlight.min.js 和一個配色檔（例如 github.min.css）放進子主題裡的 highlight 資料夾。
2. 在子主題的 functions.php 加入：

add_action( 'wp_enqueue_scripts', function () {
    if ( ! is_singular() ) {
        return;
    }
    $uri = get_stylesheet_directory_uri() . '/highlight';
    wp_enqueue_style( 'hljs-theme', $uri . '/github.min.css', array(), '1.0' );
    wp_enqueue_script( 'hljs', $uri . '/highlight.min.js', array(), '1.0', true );
    wp_add_inline_script( 'hljs', 'hljs.highlightAll();' );
} );

• is_singular()：只在單篇文章、頁面載入，文章列表、分類頁不會多載這些檔案。
• wp_enqueue_script 最後的 true：把程式放在頁面最下方載入，不會拖慢網頁顯示。
• hljs.highlightAll()：自動判斷每段程式碼的語言並上色。
• 之後更新了檔案，把 '1.0' 改成新的數字，訪客的瀏覽器才會抓新版本。

自動判斷偶爾會認錯語言。要指定語言時，點選該程式碼區塊，在右側「進階」的「附加的 CSS 類別」填入 language-php、language-css 這類名稱就可以。

方法三：只用 CSS 美化程式碼區塊

如果不需要彩色，只想讓程式碼區塊好看、好讀，CSS 就夠了：

pre {
  background: #1e1e1e;
  color: #d4d4d4;
  padding: 1em 1.25em;
  border-radius: 8px;
  overflow-x: auto;
  font-size: 0.9em;
  line-height: 1.6;
  tab-size: 4;
}

pre code {
  font-family: Consolas, Monaco, "Courier New", monospace;
}

:not(pre) > code {
  background: #f3f3f3;
  padding: 0.1em 0.4em;
  border-radius: 4px;
}

• overflow-x: auto：程式碼太長時可以左右捲動，不會撐破手機版面。
• tab-size：Tab 縮排的寬度。
• 最後一段是段落裡的行內程式碼，加上淺灰底色，跟一般文字區隔。

這段可以貼在「外觀 → 自訂 → 附加的 CSS」。用了方法二的話，程式碼的文字顏色會由 highlight.js 的配色檔決定，這段只需要保留間距、圓角、捲動的設定。

延伸閱讀

• WordPress functions.php 實用程式碼整理：10 個常用又安全的小技巧
• HTML 加入 CSS 的三種方法：外部樣式表、內部樣式表、行內樣式怎麼選

技術文章的程式碼讀得清楚、複製得能用，讀者才會回來看下一篇。正威網路行銷是 25 年經驗的基隆網頁設計工作室，提供網站維護託管與 SEO 搜尋引擎優化，服務台北與全台客戶，歡迎來聊聊。