数学公式处理, 利用 LaTeX Mathematics 来生成公式

示例

$$x+\sqrt{1-x^2}$$

$$x+\sqrt{1-x^2}$$

$$y=\frac1{1-x^2}$$

$$y=\frac1{1-x^2}$$

... we have $x\_1 = 132$ and $x\_2 = 370$ and so ...

... we have $x_1 = 132$ and $x_2 = 370$ and so ...

$$
\begin{aligned}
\dot{x} & = \sigma(y-x) \\
\dot{y} & = \rho x - y - xz \\
\dot{z} & = -\beta z + xy
\end{aligned}
$$

$$ \begin{aligned} \dot{x} & = \sigma(y-x) \\ \dot{y} & = \rho x - y - xz \\ \dot{z} & = -\beta z + xy \end{aligned} $$

$$
M = \begin{bmatrix}
    \frac{5}{6} & \frac{1}{6} & 0           \\\\[0.3em]
    \frac{5}{6} & 0           & \frac{1}{6} \\\\[0.3em]
    0           & \frac{5}{6} & \frac{1}{6}
    \end{bmatrix}
$$

$$ M = \begin{bmatrix} \frac{5}{6} & \frac{1}{6} & 0 \\[0.3em] \frac{5}{6} & 0 & \frac{1}{6} \\[0.3em] 0 & \frac{5}{6} & \frac{1}{6} \end{bmatrix} $$

相关资料

学习文档

API 驱动接口 (注意版本兼容)

  1. js MathJAX download
    1. 化学公式 插件 github
  2. KaTeX github 测试地址
  3. mathTex 文档 测试用例
  4. Google Chart formulas文档
    1. 测试用例1
    2. 测试用例2

MathJax.js 渲染

<script>
MathJax = {
  loader: {
    load: ['input/tex-base', 'output/svg', 'ui/menu', '[tex]/require']
  },
  tex: {
    inlineMath: [['$', '$']]
  }
};
</script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3.0.0/es5/tex-mml-chtml.js"></script>

katex.js 渲染

katex 站

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.13.2/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.2/dist/katex.min.js" integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.2/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous"></script>

<script>
document.addEventListener("DOMContentLoaded", function () {
    renderMathInElement(element, {
        delimiters: [
            {left: "$$", right: "$$", display: true},
            { left: "$", right: "$", display: false },
            {left: "\\(", right: "\\)", display: false},
            {left: "\\[", right: "\\]", display: true}
        ],
        ignoredTags:["script", "noscript", "style", "textarea", "pre", "code"],
        ignoredClasses:['tag'],
    }) ;
});
</script>

katex VS MathJax 性能对比

数学公式