• ? Github Star: 18.1k[1]

• ? 官網[2]

  

1、KaTeX 是什么？

KaTeX 是一個集成速度快且功能豐富的數學公式渲染庫，專為 Web 設計。它由 Khan Academy 開發(fā)，提供接近印刷品質的數學公式展示，同時保持與瀏覽器的高效互動性。KaTeX 特點包括快速渲染速度、高質量的輸出、獨立運行、跨平臺兼容以及豐富的功能集。它支持服務器端渲染，可以預渲染公式并作為純 HTML 發(fā)送，減輕客戶端負擔。

2、快速開始

安裝及引入

KaTex 支持包管理器 npm、yarn 和 CDN 方式安裝，根據需要選擇安裝方式。

# npm 
npm i katex
# yarn 
yarn add katex

如果在 React 中使用，可以考慮安裝 react-katex 包，提供一個 React 組件簡化數學公式的渲染過程。

npm i react-katex katex 
# 還有 vue 版本的
npm i vue-katex katex 

KaTex 還有很多擴展庫，具體可以參考這個地址[3]。

入門示例

作為入門演示示例，下載源碼到本地方式引入 KaTex。

<!-- 引入樣式和庫文件 -->
<link rel="stylesheet" href="../libs/katex.css" />
<script src="../libs/katex.js"></script>

創(chuàng)建容器 DOM 元素，綁定 equation ID 選擇器

<div id="equation">$`x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}`$</div>
<script type="text/javascript" defer>
  // 使用KaTeX渲染指定元素中的公式
  katex.render(`x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}`, document.getElementById('equation'))
</script>

效果

3、核心功能及 API

KaTeX 核心功能包括同步渲染機制、基于 TeX 的布局算法、自定義的樣式和布局選項。它的 API 允許開發(fā)者通過 JavaScript 控制渲染過程，包括手動渲染特定元素或批量渲染文檔中的所有公式。

自動渲染

使用 JavaScript 手動渲染還是稍微麻煩了一點，官方提供 auto-render 自動渲染擴展，通過簡單的引入可以實現自動渲染。

// 引入 auto-render.js 
<script src="../libs/auto-render.js"></script>
<script type="text/javascript" defer>
  document.addEventListener('DOMContentLoaded', function () {
    renderMathInElement(document.body, {
      // 自定義選項
      // ? auto-render 指定解析格式
      delimiters: [
        { left: '$$', right: '$$', display: true },
        { left: '$', right: '$', display: false },
        { left: '\\(', right: '\\)', display: false },
        { left: '\\[', right: '\\]', display: true },
      ],
      // ? 不拋出異樣，而是渲染公式源碼
      throwOnError: false,
    })
  })
</script>

auto-render 擴展可以在頁面加載時自動查找并渲染所有使用 $...$ 和 $$...$$ 包裹的公式。意味著你不需要手動調用任何函數來渲染這些公式。

KaTeX 允許調整樣式，例如修改 .katex 類的 font-size 屬性來改變公式的顯示大小。此外，KaTeX 提供了多個擴展，如 copy-tex 擴展允許復制 LaTeX 代碼，而 mhchem 擴展簡化了化學方程式的編寫。

4、應用場景

KaTeX 適用于多種場景，包括在線教育平臺、科學期刊網站、個人博客、數學問題社區(qū)以及印刷出版。它能夠將 LaTeX 代碼轉換為可讀性強、易于復制粘貼的格式，有助于讀者理解復雜的數學表達式。

KaTeX 的優(yōu)勢在于它的渲染速度快于其他數學公式渲染庫，同時保持高質量的輸出，這使得它適用于對性能要求較高的實時互動環(huán)境。

5、同類對比

與 MathJax 相比 KaTeX 提供更快的渲染速度，更適合需要即時響應的應用。KaTeX 的設計注重于減少頁面重排，提供更流暢的用戶體驗。 MathJax 提供更多的 LaTeX 功能和包支持。根據需要，注重簡潔性和高性能選擇 KaTex，注重功能和包支持，選擇 MathJax。

6、總結

KaTeX 是一個優(yōu)秀的數學公式渲染解決方案，特別適合需要快速加載時間和高質量數學顯示的 Web 環(huán)境。它的輕量級和高效性使其成為教育資源、研究論文和技術文檔等領域的理想選擇。

祝好！

引用鏈接

[1] Github Star: 18.1k: https://github.com/KaTeX/KaTeX
[2] 官網: https://katex.org/
[3] 地址: https://katex.org/docs/libs