【HTML】KaTeX 常用公式字符

KaTeX \KaTeX KATEX

KaTeX 是一个快速、易于使用的JavaScript库，用于在网页上显示数学公式。它通过解析TeX语法的数学表达式，并将其渲染为HTML + CSS，使得数学内容在网页上具有良好的可读性和排版效果。与MathJax等其他数学公式渲染库相比，KaTeX 在加载速度和渲染性能上具有明显优势，特别适合需要快速显示大量数学公式的在线教育、学术研究等场景。

1. 常用字符关键词对照表

2. 注释关键词

3. 格式关键词

4. 语法格式

bash 复制代码

$$ 关键词  $$

极限求和示例

bash 复制代码

$$\lim \limits_x + \lim \limits_y$$

lim ⁡ x + lim ⁡ y \lim \limits_x + \lim \limits_y xlim+ylim

bash 复制代码

$$ \displaystyle\sum_{i=1}^n $$

∑ i = 1 n \displaystyle\sum_{i=1}^n i=1∑n

bash 复制代码

$$
\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↓ ⏐Ca B⏐ ↑cD

分数子母格式示例

bash 复制代码

$$ \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

bash 复制代码

$$ \Set{ x | x<\frac 1 2 } $$

{ x | x < 1 2 } \Set{ x | x<\frac 1 2 } {x x<21}

字体格式示例

bash 复制代码

$$ \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

求导向量示例

bash 复制代码

$$ y'  +  y'' $$

y ′ + y ′ ′ y' + y'' y′+y′′

bash 复制代码

$$ \overrightarrow{AB} $$

A B → \overrightarrow{AB} AB

求和矩阵示例

bash 复制代码

$$ 
\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∑

bash 复制代码

$$ 
\begin{bmatrix}
   a & b \\
   c & d
\end{bmatrix} 
$$

a b c d \] \\begin{bmatrix} a \& b \\\\ c \& d \\end{bmatrix} \[acbd

bash 复制代码

$$ 
\begin{Bmatrix}
   a & b \\
   c & d
\end{Bmatrix} 
$$

{ a b c d } \begin{Bmatrix} a & b \\ c & d \end{Bmatrix} {acbd}

bash 复制代码

$$ 
\begin{vmatrix}
   a & b \\
   c & d
\end{vmatrix} 
$$

∣ a b c d ∣ \begin{vmatrix} a & b \\ c & d \end{vmatrix} acbd

bash 复制代码

$$ 
\begin{pmatrix}
   a & b \\
   c & d
\end{pmatrix} 
$$

( a b c d ) \begin{pmatrix} a & b \\ c & d \end{pmatrix} (acbd)

bash 复制代码

$$ 
\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

方程式示例

bash 复制代码

$$ 
\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

bash 复制代码

$$ \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

注释示例：

bash 复制代码

$$ \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)

html 复制代码

<!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 图使用

html 复制代码

<!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>