【HTML】KaTeX 常用公式字符
KaTeX \KaTeX KATEX
KaTeX 是一个快速、易于使用的JavaScript库，用于在网页上显示数学公式。它通过解析TeX语法的数学表达式，并将其渲染为HTML + CSS，使得数学内容在网页上具有良好的可读性和排版效果。与MathJax等其他数学公式渲染库相比，KaTeX 在加载速度和渲染性能上具有明显优势，特别适合需要快速显示大量数学公式的在线教育、学术研究等场景。
1. 常用字符关键词对照表
2. 注释关键词
3. 格式关键词
4. 语法格式
$$ 关键词 $$
极限求和示例
$$\lim \limits_x + \lim \limits_y$$
lim x + lim y \lim \limits_x + \lim \limits_y xlim+ylim
$$ \displaystyle\sum_{i=1}^n $$
∑ i = 1 n \displaystyle\sum_{i=1}^n i=1∑n
$$
\begin{CD}
A @>a>> B \\
@VbVV @AAcA \\
C @= D
\end{CD}
$$
A → a B b ↓ ↑ c C = D \begin{CD} A @>a>> B \\ @VbVV @AAcA \\ C @= D \end{CD} Ab↓ ⏐CaB⏐ ↑cD
分数子母格式示例
$$ \cfrac{2}{1+\cfrac{2}{1+\cfrac{2}{1}}} $$
2 1 + 2 1 + 2 1 \cfrac{2}{1+\cfrac{2}{1+\cfrac{2}{1}}} 1+1+1222
$$ \Set{ x | x<\frac 1 2 } $$
{ x | x < 1 2 } \Set{ x | x<\frac 1 2 } {x x<21}
字体格式示例
$$ \colorbox{red}{Black on red} $$
$$ \colorbox{#00AACC}{Black on blue} $$
$$ \color{#0000FF} AaBb123 $$
$$ \color{lightgreen} AaBb123 $$
Black on red \colorbox{red}{Black on red} Black on red
Black on blue \colorbox{#00AACC}{Black on blue} Black on blue
A a B b 123 \color{#0000FF} AaBb123 AaBb123
A a B b 123 \color{lightgreen} AaBb123 AaBb123
求导向量示例
$$ y' + y'' $$
y ′ + y ′ ′ y' + y'' y′+y′′
$$ \overrightarrow{AB} $$
A B → \overrightarrow{AB} AB
求和矩阵示例
$$
\sum_{
\begin{subarray}{l}
i\in\Lambda\\
0<j<n
\end{subarray}}
$$
∑ i ∈ Λ 0 < j < n \sum_{ \begin{subarray}{l} i\in\Lambda\\ 0<j<n \end{subarray}} i∈Λ0<j<n∑
$$
\begin{bmatrix}
a & b \\
c & d
\end{bmatrix}
$$
[ a b c d ] \begin{bmatrix} a & b \\ c & d \end{bmatrix} [acbd]
$$
\begin{Bmatrix}
a & b \\
c & d
\end{Bmatrix}
$$
{ a b c d } \begin{Bmatrix} a & b \\ c & d \end{Bmatrix} {acbd}
$$
\begin{vmatrix}
a & b \\
c & d
\end{vmatrix}
$$
∣ a b c d ∣ \begin{vmatrix} a & b \\ c & d \end{vmatrix} acbd
$$
\begin{pmatrix}
a & b \\
c & d
\end{pmatrix}
$$
( a b c d ) \begin{pmatrix} a & b \\ c & d \end{pmatrix} (acbd)
$$
\def\arraystretch{1.5}
\begin{array}{c:c:c}
a & b & c \\ \hline
d & e & f \\
\hdashline
g & h & i
\end{array}
$$
a b c d e f g h i \def\arraystretch{1.5} \begin{array}{c:c:c} a & b & c \\ \hline d & e & f \\ \hdashline g & h & i \end{array} adgbehcfi
方程式示例
$$
\begin{alignat}{2}
10&x+&3&y=2\\
3&x+&13&y=4
\end{alignat}
$$
10 x + 3 y = 2 3 x + 13 y = 4 \begin{alignat}{2} 10&x+&3&y=2\\ 3&x+&13&y=4 \end{alignat} 103x+x+313y=2y=4
$$ \tag{hi} x+y^{2x} $$
$$ \tag*{hi} x+y^{2x} $$
x + y 2 x (hi) \tag{hi} x+y^{2x} x+y2x(hi)
x + y 2 x hi \tag*{hi} x+y^{2x} x+y2xhi
注释示例：
$$ \bcancel{Abc} $$
$$ \sout{abc} $$
$$ \underbrace{a+b+c}_{\text{note}} $$
$$ \underbrace{1+1+ \dotso +1}_{\text{1*n}} \gg \overbrace{1\ast 1 \ast \dotso \ast1}^{\text{1}} $$
A b c \bcancel{Abc} Abc
a b c \sout{abc} abc
a + b + c ⏟ note \underbrace{a+b+c}_{\text{note}} note a+b+c
1 + 1 + … + 1 ⏟ 1*n ≫ 1 ∗ 1 ∗ … ∗ 1 ⏞ 1 \underbrace{1+1+ \dotso +1}_{\text{1*n}} \gg \overbrace{1\ast 1 \ast \dotso \ast1}^{\text{1}} 1*n 1+1+…+1≫1∗1∗…∗1 1
5. 甘特图使用 (Gantt)
<!DOCTYPE html>
<html>
<head>
<title>Mermaid Gantt Chart Example</title>
<script src="https://cdn.jsdelivr.net/npm/mermaid@8.13.3/dist/mermaid.min.js"></script>
</head>
<body>
<div class="mermaid">
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
excludes weekends
%% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :until isadded
Functionality added :milestone, isadded, 2014-01-25, 0d
section Documentation
Describe gantt syntax :active, a1, after des1, 3d
Add gantt diagram to demo page :after a1 , 20h
Add another diagram to demo page :doc1, after a1 , 48h
section Last section
Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page :20h
Add another diagram to demo page :48h
</div>
<script>
mermaid.initialize({startOnLoad:true});
</script>
</body>
</html>
5. UML 图使用
<!DOCTYPE html>
<html>
<head>
<title>Mermaid Gantt Chart Example</title>
<script src="https://cdn.jsdelivr.net/npm/mermaid@8.13.3/dist/mermaid.min.js"></script>
</head>
<body>
<div class="mermaid">
---
config:
look: handDrawn
theme: neutral
---
flowchart LR
A[Start] --> B{Decision}
B -->|Yes| C[Continue]
B -->|No| D[Stop]
</div>
<script>
mermaid.initialize({startOnLoad:true});
</script>
</body>
</html>
