【HTML】KaTeX 常用公式字符

最新推荐文章于 2025-04-05 17:52:03 发布

原创最新推荐文章于 2025-04-05 17:52:03 发布 · 1.8k 阅读

31 ·

CC 4.0 BY-SA版权

文章标签：

#html #chrome #前端

该文章已生成可运行项目，

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

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

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

$$
\begin{CD}
   A @>a>> B \\
@VbVV @AAcA \\
   C @= D
\end{CD}
$$

$\begin{CD} A @>a>> B \\ @VbVV @AAcA \\ C @= D \end{CD}$

分数子母格式示例

$$ \cfrac{2}{1+\cfrac{2}{1+\cfrac{2}{1}}} $$

$\cfrac{2}{1+\cfrac{2}{1+\cfrac{2}{1}}}$

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

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

字体格式示例

$$ \colorbox{red}{Black on red} $$

$$ \colorbox{#00AACC}{Black on blue} $$

$$ \color{#0000FF} AaBb123 $$

$$ \color{lightgreen} AaBb123 $$

$\colorbox{red}{Black on red}$

$\colorbox{#00AACC}{Black on blue}$

$\color{#0000FF} AaBb123$

$\color{lightgreen} AaBb123$

求导向量示例

$$ y'  +  y'' $$

$y^{'} + y^{''}$

$$ \overrightarrow{AB} $$

$\overrightarrow{AB}$

求和矩阵示例

$$ 
\sum_{
\begin{subarray}{l}
   i\in\Lambda\\
   0<j<n
\end{subarray}} 
$$

$\sum_{ \begin{subarray}{l} i\in\Lambda\\ 0<j<n \end{subarray}}$

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

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

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

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

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

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

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

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

$$ 
\def\arraystretch{1.5}
   \begin{array}{c:c:c}
   a & b & c \\ \hline
   d & e & f \\
   \hdashline
   g & h & i
\end{array} 
$$

$\def\arraystretch{1.5} \begin{array}{c:c:c} a & b & c \\ \hline d & e & f \\ \hdashline g & h & i \end{array}$

方程式示例

$$ 
\begin{alignat}{2}
   10&x+&3&y=2\\
   3&x+&13&y=4
\end{alignat} 
$$

$\begin{alignat}{2} 10&x+&3&y=2\\ 3&x+&13&y=4 \end{alignat}$

$$ \tag{hi} x+y^{2x} $$

$$ \tag*{hi} x+y^{2x} $$

$\tag{hi} x+y^{2x}$

$\tag*{hi} x+y^{2x}$

注释示例：

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

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

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>