Astro 架站筆記（六）：在文章中加入數學式子，使用 KaTeX

之前除了純數學的內容，在計算機科學的領域也時常會需要用到一些數學。例如推導某演算法的時間複雜度，加密原理、或是機器學習中的某些理論證明，都要能列出數學式子來表達。

在撰寫更專業的學術刊物上，通常使用 LaTeX 作為排版和產生數學式子等內容的系統。而想在網頁上渲染 LaTeX 的數學式，則有常見的兩種 Libraries 來做選擇：KaTeX 或是 MathJax。

今天就來聊聊在 Astro 中如何套用數學渲染 Library 吧，主要以 KaTex 來做介紹。

簡介 LaTeX 及 KaTeX vs MathJax

LaTeX 是一種基於 TeX 的排版系統，也是一種 Markup Language，前者由 2013 年圖靈獎得主 Leslie Lamport 所開發，而後者則是由著名「電腦程式設計藝術」的作者高德納所發明。LaTex 使用 TeX 作為其格式化引擎，可以讓使用者沒有排版的知識也能產出專業品質的刊物。

而 KaTeX 和 MathJax 都是 JavaScript 的 Library，前者由 Khan Academy 開發、後者由美國數學學會管理，兩者主要的差異在於：

1. KaTeX 僅實作了 LaTeX 的部分定義，而 MathJax 支援 LaTeX 和 MathML 等 Markup Language，能顯示的數學式比 KaTeX 來得豐富

2. 但在載入速度上，KaTeX 則明顯比 MathJax 來得更快，這是由於 KaTeX 的設計是以速度優先，而 MathJax 則更重視完整度；如果要給個體感值，KaTeX 的速度感大約是閃一下，而 MathJax 則有接近秒的感覺（0.5-1 sec）

既然我的目的是以撰寫部落格為主，簡單的數學式就能滿足我大部分需求了，不需要到更專業的學術等級；那考慮就是渲染速度了，較快的 KaTeX 就成為我的首選。

安裝 KaTeX 相關套件

選定了 KaTeX 後，接著就來整合進現有的 Astro 專案吧！首先是相關套件的安裝：

$ npm install katex remark-math rehype-katex

除了本體的 katex 外，還需要 remark-math 來解析 Markdown 中的數學式子，畢竟我們大部分的情境會在 Markdown 底下撰文；而 rehype-katex 則將解析完的式子渲染成 KaTeX 所需的 HTML 結構。

安裝完畢後，再來需要修改 astro.config.cjs 的內容，將 remark-math 及 rehype-katex 加入到 markdown 下。

/* ... */
import remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex';

export default defineConfig({
  /* ... */
  markdown: { remarkPlugins: [remarkMath], rehypePlugins: [rehypeKatex] },
}

再來可以在全域或特定的 Layout 中匯入 KaTeX 的樣式，例如在部落格的模板 BlogPostLayout.astro 中的加入 import 'katex/dist/katex.min.css';。

最後就能快樂寫算式了，隨便挑一篇 MDX 或 Markdown 的文章，在內文中加入：

Formula 1 - $E = mc^2$

Formula 2 - $\int_0^1 x^2 dx = \frac{1}{3}$

Formula 3:

$$
\begin{array}{l r}
F = ma & \text{(1)} \\
E_k = \frac{1}{2}mv^2 & \text{(2)}
\end{array}
$$

便能顯示精美的數學式。