? Github Star: 18.1k[1]
? 官網(wǎng)[2]
1、KaTeX 是什么？
KaTeX 是一個(gè)集成速度快且功能豐富的數(shù)學(xué)公式渲染庫(kù)，專為 Web 設(shè)計(jì)。它由 Khan Academy 開(kāi)發(fā)，提供接近印刷品質(zhì)的數(shù)學(xué)公式展示，同時(shí)保持與瀏覽器的高效互動(dòng)性。KaTeX 特點(diǎn)包括快速渲染速度、高質(zhì)量的輸出、獨(dú)立運(yùn)行、跨平臺(tái)兼容以及豐富的功能集。它支持服務(wù)器端渲染，可以預(yù)渲染公式并作為純 HTML 發(fā)送，減輕客戶端負(fù)擔(dān)。
2、快速開(kāi)始
安裝及引入
KaTex 支持包管理器 npm、yarn 和 CDN 方式安裝，根據(jù)需要選擇安裝方式。
# npm
npm i katex
# yarn
yarn add katex
如果在 React 中使用，可以考慮安裝 react-katex 包，提供一個(gè) React 組件簡(jiǎn)化數(shù)學(xué)公式的渲染過(guò)程。
npm i react-katex katex
# 還有 vue 版本的
npm i vue-katex katex
KaTex 還有很多擴(kuò)展庫(kù)，具體可以參考這個(gè)地址[3]。
入門示例
作為入門演示示例，下載源碼到本地方式引入 KaTex。
<!-- 引入樣式和庫(kù)文件 -->
<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 核心功能包括同步渲染機(jī)制、基于 TeX 的布局算法、自定義的樣式和布局選項(xiàng)。它的 API 允許開(kāi)發(fā)者通過(guò) JavaScript 控制渲染過(guò)程，包括手動(dòng)渲染特定元素或批量渲染文檔中的所有公式。
自動(dòng)渲染
使用 JavaScript 手動(dòng)渲染還是稍微麻煩了一點(diǎn)，官方提供 auto-render 自動(dòng)渲染擴(kuò)展，通過(guò)簡(jiǎn)單的引入可以實(shí)現(xiàn)自動(dòng)渲染。
// 引入 auto-render.js
<script src="../libs/auto-render.js"></script>
<script type="text/javascript" defer>
document.addEventListener('DOMContentLoaded', function () {
renderMathInElement(document.body, {
// 自定義選項(xiàng)
// ? auto-render 指定解析格式
delimiters: [
{ left: '$$', right: '$$', display: true },
{ left: '$', right: '$', display: false },
{ left: '\\(', right: '\\)', display: false },
{ left: '\\[', right: '\\]', display: true },
],
// ? 不拋出異樣，而是渲染公式源碼
throwOnError: false,
})
})
</script>
auto-render 擴(kuò)展可以在頁(yè)面加載時(shí)自動(dòng)查找并渲染所有使用 $...$ 和 $$...$$ 包裹的公式。意味著你不需要手動(dòng)調(diào)用任何函數(shù)來(lái)渲染這些公式。
KaTeX 允許調(diào)整樣式，例如修改 .katex 類的 font-size 屬性來(lái)改變公式的顯示大小。此外，KaTeX 提供了多個(gè)擴(kuò)展，如 copy-tex 擴(kuò)展允許復(fù)制 LaTeX 代碼，而 mhchem 擴(kuò)展簡(jiǎn)化了化學(xué)方程式的編寫。
4、應(yīng)用場(chǎng)景
KaTeX 適用于多種場(chǎng)景，包括在線教育平臺(tái)、科學(xué)期刊網(wǎng)站、個(gè)人博客、數(shù)學(xué)問(wèn)題社區(qū)以及印刷出版。它能夠?qū)?nbsp;LaTeX 代碼轉(zhuǎn)換為可讀性強(qiáng)、易于復(fù)制粘貼的格式，有助于讀者理解復(fù)雜的數(shù)學(xué)表達(dá)式。
KaTeX 的優(yōu)勢(shì)在于它的渲染速度快于其他數(shù)學(xué)公式渲染庫(kù)，同時(shí)保持高質(zhì)量的輸出，這使得它適用于對(duì)性能要求較高的實(shí)時(shí)互動(dòng)環(huán)境。
5、同類對(duì)比
與 MathJax 相比 KaTeX 提供更快的渲染速度，更適合需要即時(shí)響應(yīng)的應(yīng)用。KaTeX 的設(shè)計(jì)注重于減少頁(yè)面重排，提供更流暢的用戶體驗(yàn)。 MathJax 提供更多的 LaTeX 功能和包支持。根據(jù)需要，注重簡(jiǎn)潔性和高性能選擇 KaTex，注重功能和包支持，選擇 MathJax。
6、總結(jié)
KaTeX 是一個(gè)優(yōu)秀的數(shù)學(xué)公式渲染解決方案，特別適合需要快速加載時(shí)間和高質(zhì)量數(shù)學(xué)顯示的 Web 環(huán)境。它的輕量級(jí)和高效性使其成為教育資源、研究論文和技術(shù)文檔等領(lǐng)域的理想選擇。
祝好！
引用鏈接
[1] Github Star: 18.1k: https://github.com/KaTeX/KaTeX
[2] 官網(wǎng): https://katex.org/
[3] 地址: https://katex.org/docs/libs
該文章在 2024/10/12 10:03:50 編輯過(guò)
400 186 1886
