KaTeX 怎么用

上文中介紹了大佬們?yōu)榱嗽陔娔X上顯示數(shù)學公式做出的努力，并介紹了目前數(shù)學公式表示的事實上標準——LaTeX，對比了 MathJax 和 KaTeX 這兩款最常用的渲染數(shù)學公式的Web模塊。本篇就專門講講 KaTeX 究竟怎么用，如何對其微調(diào)。

KaTeX 安裝

首先需要安裝 KaTeX。作為 JavaScript 庫（模塊），或者說是腳本，最常規(guī)的模式就是在網(wǎng)頁中載入腳本文件，由瀏覽器解析繪制。

普通的網(wǎng)頁加載

使用現(xiàn)代模塊化前端技術(shù)的網(wǎng)頁

如果是基于?NodeJS 服務(wù)端的應(yīng)用，是配合模塊在服務(wù)端先渲染完成靜態(tài)的HTML文件展示給客戶端

多腳本解析時間不一致可能出錯

考慮到不同瀏覽器載入 JavaScript?腳本文件的機制可能不同，有時候會出現(xiàn)腳本沒有完全解析完就開始繪制渲染公式引發(fā)錯誤。這時候可以考慮在<script>標簽中加入一個 defer 屬性。

HTML在瀏覽器解析時，遇到屬性為defer的腳本會在后臺進行下載，但是并不會阻止文檔的解析。當頁面解析完成，所有的defer腳本加載完畢后按照順序執(zhí)行，執(zhí)行完畢后會觸發(fā)DOMContentLoaded事件，也就是開始渲染公式。

KaTeX 配置

完成安裝后，要在網(wǎng)頁中創(chuàng)建、調(diào)用 KaTeX 對象，不過這一步可以通過引用官方的?auto-render.min.js 腳本完成。

我們可以專注于如何配置 KaTeX，如下代碼所示是 KaTeX 常用的配置方法。

分隔符

分隔符用于限定 KaTeX 的代碼范圍，可以手動指定多種不同的分隔符。前文中說過，對于公式排版來說，有內(nèi)嵌（Inline）、顯示（Display）兩種文字環(huán)繞方式，前者表示公式與文字混排，和其它正文在同一行中；后者表示公式單獨列出一行，內(nèi)容居中。

在 Markdown 中，$?是最常用的公式分隔符，$?表示 inline，$$?表示 display，如下配置。

配置宏

宏可以用于設(shè)置別名（alias）或縮短指令長度。

例如，宏可以解決前文說到的大于等于號或小于等于號樣式不一致的問題。我們可以通過指定宏，例如將?\ge?替換為?\geqslant，這樣不用修改?LaTeX 代碼就可以統(tǒng)一不等號的樣式。

KaTeX 樣式調(diào)整

默認的 KaTeX 與 MathJax 繪制公式的文字都會略大于標準文字大小，如 KaTeX 的默認大小為?1.21em，在與正文混排時看起來會打破和諧。我們可以根據(jù) KaTeX 的官方文檔，在?katex.min.css?中將.katex?字體大小修改為?1.1em?，這樣的配置可以讓公式與正文保持一致的大小，是最為合適的。

KaTeX 擴展

KaTeX 提供了很多擴展功能方便有額外需求的人使用。

比如KaTeX在繪制玩公式后，如果去選中公式，復制后得到的是一串沒有格式的字母，而使用copy-tex擴展直接復制頁面上的公式為 LaTeX 代碼。

只需要在網(wǎng)頁中加入css文件和腳本

如果你是化學相關(guān)專業(yè)的從業(yè)人員、學生或老師，可以使用 mhchem 擴展，不受 LaTeX 的語法束縛，用最簡明的代碼寫出規(guī)范的化學方程式。

同樣的，只需要在網(wǎng)頁中加入下面腳本

更換 STIX 字體

在?katex.min.css?中，引用具體的字體文件，定義成字體族名，再對 CSS 繪制的公式各個部分應(yīng)用不同的字體樣式，這就是 KaTeX 核心的渲染功能。

因此，在最初的嘗試，我將字體定義的文件路徑修改為 STIX 文件的絕對路徑。然而 CSS 中引用絕對路徑的文件存在跨域的問題，觸發(fā)服務(wù)器安全機制，無法正常加載字體文件。最終我決定，直接替換原有的字體文件。

查看 KaTeX 默認字體的文件列表（以 woff 為例，除此之外還有 ttf、woff2 格式的同名文件）

MathJax 提供了很多數(shù)學字體，有 Asana Math，Gyre Pagella，Latin Modern，Neo Euler，STIX Web 等等。有 eot、otf、woff 格式，我們以 STIX 字體的 woff 格式為例，再將 woff 轉(zhuǎn)換為 KaTeX 對應(yīng)需要的 woff2、ttf 格式。

可以看到 MathJax 的 STIX 字體分割地非常詳細，和 KaTeX 的字體差別較大，因此絕不能完整地替換。使用 FontCreator 軟件對兩種字體的字模分析對比后，我發(fā)現(xiàn)?STIXMathJax_Main?的字模足以覆蓋?KaTeX_Main、KaTeX_Math?兩個文件，而且字符的內(nèi)部名稱也一致，替換后可能的問題最少。

因此，替換到原有的字體文件后，再將 CSS 中?KaTeX_Main、KaTeX_Math?指向同一文件。

公式渲染效果

（順便一提，b站專欄的公式編輯器也支持\ce化學方程式，小破站編輯器的功能又殘又強大）

（全文完）

如果有對數(shù)學公式渲染與錄入感興趣的小伙伴歡迎交流