KaTeX 是一款基于 TeX 的 JavaScript 引擎，用于在 Web
中渲染
数学公式和
数学符号。KaTeX 能够快速渲染
数学公式，而且渲染出来的
公式非常漂亮。本文将详细介绍 KaTeX 的
使用方法。
## 安装 KaTeX
KaTeX 可以通过 npm 包管理工具进行安装，也可以通过 CDN 引入。本文将介绍两种安装
方式。
### 通过 npm 安装 KaTeX
可以通过以下命令在项目
中安装 KaTeX：
```
npm install katex
```
### 通过 CDN 引入 KaTeX
可以通过以下
方式引入 KaTeX：
```
html
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex/dist/katex.min.css" />
<script src="https://cdn.jsdelivr.net/npm/katex/dist/katex.min.js"></script>
</head>
```
## 渲染
数学公式
###
使用 KaTeX 渲染
数学公式
在
HTML 中使用 KaTeX 渲染
数学公式非常简单。只需要在需要渲染的
数学公式所在的标签
中添加 `katex` 类名，然后在标签内部
添加 TeX 语法的
数学公式即可。
```
html
<!DOCTYPE
html>
<
html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>KaTeX Demo</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex/dist/katex.min.css" />
<script src="https://cdn.jsdelivr.net/npm/katex/dist/katex.min.js"></script>
</head>
<body>
<p class="katex">$$\sum_{i=1}^n i = \frac{n(n+1)}{2}$$</p>
<p class="katex">\[\int_{-\infty}^{+\infty} e^{-x^2} dx = \sqrt{\pi}\]</p>
</body>
</
html>
```
在上面的代码
中，我们在两个不同的段落
中使用了 `katex` 类名，并在标签内部
添加了 TeX 语法的
数学公式。
###
使用 KaTeX API 渲染
数学公式
KaTeX 提供了一组 API，可以在 JavaScript
中渲染
数学公式。
```
html
<!DOCTYPE
html>
<
html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>KaTeX Demo</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex/dist/katex.min.css" />
<script src="https://cdn.jsdelivr.net/npm/katex/dist/katex.min.js"></script>
</head>
<body>
<p id="formula1"></p>
<p id="formula2"></p>
<script>
const formula1 = document.getElementById("formula1");
katex.render("\\sum_{i=1}^n i = \\frac{n(n+1)}{2}", formula1);
const formula2 = document.getElementById("formula2");
katex.render("\\int_{-\\infty}^{+\\infty} e^{-x^2} dx = \\sqrt{\\pi}", formula2);
</script>
</body>
</
html>
```
在上面的代码
中，我们在两个不同的段落
中使用了 `id` 属性，并在 JavaScript
中使用 `katex.render` 方法渲染了
数学公式。
## KaTeX TeX 语法
KaTeX
使用 TeX 语法渲染
数学公式，因此熟悉 TeX 语法可以帮助我们更好地
使用 KaTeX。下面是一些常用的 TeX 语法：
### 希腊字母
```
\alpha, \beta, \gamma, \delta, \epsilon, \varepsilon, \zeta, \eta, \theta, \vartheta, \iota, \kappa, \lambda, \mu, \nu, \xi, \pi, \varpi, \rho, \varrho, \sigma, \varsigma, \tau, \upsilon, \phi, \varphi, \chi, \psi, \omega
```
### 上标和下标
```
x^2, x_{1}, x_{i+1}, x^{2}_{i+1}
```
### 分数
```
\frac{a}{b}
```
### 开平方
```
\sqrt{2}, \sqrt[n]{a}
```
### 求和、积分、极限
```
\sum_{i=1}^n i, \int_{a}^{b} f(x) dx, \lim_{x\to\infty} f(x)
```
### 矩阵
```
\begin{matrix}a & b \\ c & d\end{matrix}
```
### 其他符号
```
\infty, \pm, \times, \div, \neq, \leq, \geq, \approx, \equiv, \subset, \subseteq, \cup, \cap, \forall, \exists, \in, \notin, \rightarrow, \leftarrow
```
## 总结
本文介绍了 KaTeX 的安装和
使用方法，并介绍了一些常用的 TeX 语法。KaTeX 是一款非常强大的 JavaScript 引擎，可以帮助我们在 Web
中快速渲染
数学公式和
数学符号，非常适合用于科技类网站和
博客。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
2413
