要怎麼在 Wordpress 部落格寫出 LaTeX 與 MathJax 公式呢?這篇文章將快速回答。我記錄在此的動機是來自寫上一篇 A/B Test 文章 的經驗,Wordpress 居然不讓我編輯還有發布文章,Debug 了好久才發現是那篇文章寫了特別多 LaTeX 數學公式,當時使用的 WP QuickLaTeX 外掛出現了問題,因此開始嘗試不同 Plug-ins 來解決公式顯示問題。
這篇是我使用幾種 WordPress 的 LaTeX 外掛後的隨筆,將介紹什麼是 LaTex 與 MathJax、如何在 Wordpress 寫 LaTeX 的語法、以及簡介我用過的三種外掛 WP QuickLaTeX、Jetpack、以及 MathJax-LaTeX。如果你也是熱愛在 Wordpress 部落格分享數學或統計學公式的人,希望這篇文章能幫助你在網站中順利秀出 LaTeX。
目錄
LaTeX 是什麼?
LaTeX,唸作「拉-tech」或者「類-tech」,是一種文件排版系統,不同於常見的 Microsoft Word 是所見即所得(WYSIWYG),LaTeX 重視的是用標記式語言(markup)清楚寫出內容與架構,意思是使用者告訴 LaTeX 需要什麼段落、標題、公式等等,LaTeX 系統會幫你處理排版,確保輸出的文件格式一致且專業。
如果你是會撰寫專業技術文件的研究者或要發論文的學生,LaTeX 幾乎是必備,寫書、文章、或者簡報都好用,你可以穩穩地控制輸出內容該長什麼樣子。
筆者好豪學習使用 LaTeX 的理由非常簡單:我想在部落格呈現漂亮的數學公式。LaTeX 的專長是充滿技術內容(尤其是數學)的文件排版,它可以輕鬆地處理複雜的等式與數學符號,各領域的工程人員或科學家幾乎都會用到 LaTeX。更棒的是,學會這一個工具,可以用在很多地方,例如 HackMD、GitHub、或者 Google Colab。
(釐清:LaTeX 負責整份文件的排版,實際上處理數學公式本身的是 MathJax 語法,本文不論講 LaTeX 或 MathJax,其實都是指 LaTeX + MathJax)

若你跟我一樣,學 LaTeX 與 MathJax 單純是為了撰寫與呈現數學公式,以下幾個資源可以幫助你 30 分鐘內快速上手:
- LaTeX 中文簡短教學(成大資工課程共筆)
- Learn LaTeX in 30 minutes
- MathJax Basic Tutorial
- 利用線上 LaTeX 編輯器,馬上寫、馬上看出語法有沒有寫對
Wordpress 裡寫 LaTeX 與 MathJax 的方法
寫在前面:如果你用的是 Wordpress.com,它已經內建 LaTeX 支援了!撰寫 LaTeX 非常簡單,直接使用 $latex 你的數學表達式$
語法即可,注意前面的 $
符號與 latex
之間沒有空白、latex
與 你的數學表達式
之間需要一個空白。

請注意,WordPress.com 與 WordPress.org 是不同的,很粗略的差別是,前者是一整套包裝,例如幫你租好伺服器了,後者單純是 Wordpress 軟體本身、稱為「自助託管」,你需要自己煩惱該去哪裡租伺服器。除了這一個小段落,本文講的 WordPress 都是指後者的 WordPress.org 自助託管。
要在 Wordpress (自助託管)部落格寫出 LaTeX,主要有兩種做法,第一種比較硬派,直接修改 Wordpress 主題內的 header.php
檔案,詳見 MathJax 官方文件教學;本部落格選擇的做法是第二種,使Plug-ins),下個小節將詳述幾種外掛的微小不同。
不同的外掛,寫出 LaTeX / MathJax 的語法可能稍有不同,因此筆者好豪強烈建議你先搞清楚你想用的外掛對應到哪一個語法,在外掛的官方說明頁面都會寫。以下是一些常見語法,以及其適用的外掛:
前後加上\(
的 tag
[latex]...\)
注意後方的 tag 有斜線,這樣可以在句子裡不換行地寫出數學公式。

適用外掛:
- WP QuickLaTeX
- MathJax-LaTeX(需要設定 “Use wp-latex syntax?”)
- Jetpack
由於 \(
tag 是慣例(legacy)語法,有很多外掛都支援,筆者好豪主觀(且偏頗)地推薦優先選用這個寫法,哪天想換外掛不用再改語法。
使用 $
或 $$
的 tag
MathJax 的 $
與 $$
差別在於是否換行:
$
:不換行,關鍵字是 “inline”$$
:換行,關鍵字是 “displayed”

適用外掛:
- WP QuickLaTeX
- MathJax-LaTeX
$latex
語法
前面介紹過的 $latex 你的數學表達式$
語法。再次提醒前面的 $
符號與 latex
之間沒有空白。

適用外掛:
- JetPack
- MathJax-LaTeX
- (還有前述的 Wordpress.com)
WordPress 外掛介紹
這裡只會寫筆者親身體驗過的外掛差異,只是我的碎碎念,不是很嚴謹的比較,只是希望幫助你快速看一下各外掛特徵,詳情還是請以該外掛的官方文件說明為準。
MathJax-LaTeX
MathJax 原本就是 JavaScript 程式庫,幫助你在網頁瀏覽器中顯示數學符號,MathJax-LaTeX 外掛很單純就是幫你載入程式庫、透過 JavaScript 渲染(Render)出數學公式。
這是好豪筆記部落格撰文當下(2024 年)正在使用的 LaTeX / MathJax 外掛。我個人主觀覺得 MathJax-LaTeX 網頁開啟速度比 WP QuickLaTeX 快、渲染出的公式清晰度跟排列整齊度也比 Jetpack 高,這些是我目前使用它的理由。
使用 MathJax-LaTeX 的方法是在 WordPress 編輯文章的任意一個地方寫上 [mathjax]
短程式碼,這樣外掛才認得出來這是需要 LaTeX 渲染的頁面喔!此外掛支援的語法包括:
[latex]...\)
- 我個人偏好這個寫法
$$...$$
\(...\)
$latex ...$

WP QuickLaTeX
WP QuickLaTeX 會將你的 LaTeX 語法渲染成 SVG 或 PNG 圖片格式,讓這個外掛有兩大優勢,首先,如果你的網站呈現出的數學公式是使用 SVG 格式,表示不論網頁瀏覽器如何放大縮小都能保持清晰、圖像不會變糊;其次,支援網頁快取功能(Cache),讓你的部落格就算有很多 MathJax 數學公式圖片也能因為快取保持高效能,有快取也較不會傷害你的網站 SEO 分數。
此外掛支援的語法形式除了前面提過的 $
、$$
、與 \( ... \)
tag,還有 \[ ... \]
與 \( ... \)
等等。另外,跟前一個外掛相似,使用 WP QuickLaTeX 時,需要在 WordPress 編輯文章內的任何地方加上 [latexpage]
短程式碼。
撰文的此時(2024 年),筆者好豪在部落格使用此外掛曾出現過 LaTeX 渲染失敗、造成有 LaTeX 語法的網頁 timeout 錯誤(Error code 524),我沒有足夠的時間跟技術力抓出來問題是外掛跟 WordPress 版本不和、還是與其他外掛衝突,總之,雖然已經用 WP QuickLaTeX 兩三年了,這個錯誤造成我個人不再用這個外掛的理由。

Jetpack
這個外掛就有趣了,Jetpack 是包括資安、效能和行銷的多功能工具,我原本都拿來調校網站效能跟流量統計分析,後來發現它也 支援 LaTeX 渲染!只要到外掛的設定頁面打開這個選項即可:

然而,此外掛渲染的結果不太喜歡,不知道是什麼因素影響,Jetpack 在我的部落格渲染出的數學公式會在奇怪的位置、很不美觀,而且設定頁面也沒有提供調整樣式的任何選項來解決這個問題,真的太難看、我就直接放棄不用它了。

Jetpack 使用 LaTeX 的語法很單純、就只有一種:$latex ...$
,可參考前面介紹,此不贅述。
結語
總結而言,目前在此部落格的主觀經驗中,要在 WordPress 網站呈現數學公式,MathJax-LaTeX 外掛的使用體驗最佳,渲染速度夠快、也美觀,可以免費下載、立刻使用。不過也再囉唆提醒,外掛跟 WordPress 都會快速更新,本文只是入門,實際使用情況還是請以該外掛的當下狀況與官方文件說明為準。
也希望這篇隨筆寫下的 LaTeX 與 MathJax 介紹,有鼓勵到你學習這個好用的數學公式排版工具,讓你也能盡情在你的網站或部落格分享數學或任何科學知識。
這篇文章有幫助到你的話,歡迎追蹤好豪的 Facebook 粉絲專頁 或者 Threads 帳號,本部落格致力於分享資料科學與 Python 知識,我會透過這些平台分享給你;也推薦你點選下方按鈕,把此文章分享給想在網站內寫 LaTeX 數學公式的朋友們。