KaTeX

KaTeX 是一个快速，易于使用的JavaScript库，用于在Web上进行TeX数学渲染。

支持大部分LaTeX语法，并且有在各个终端上的实现。

支持的表达式

在线测试

常用公式

https://mp.weixin.qq.com/s?__biz=Mzg4MTYwODMzMg==&mid=2247484357&idx=2&sn=5579a76b988f6b626fd9faf070d91115&chksm=cf621026f8159930272acbc38ba4454aec6d670d373c8fd095ce3368b9e39c46eb51f90bcff6&scene=27

WEB中使用

https://github.com/KaTeX/KaTeX

示例

katex.render(
    "c = \\sqt{a^2 + b^2}", 
    /* element */, 
    {
    displayMode: true,
    leqno: false,
    fleqn: true,
    throwOnError: false,
    errorColor: "#ad5252",
    strict: "warn",
    output: "htmlAndMathml",
    trust: false,
    macros: { "\\f": "#1f(#2)" },
   }
)

Web整页渲染

https://github.com/KaTeX/KaTeX/releases

自动整页渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>公式编辑器MathJax</title>
</head>
<body>
<div>
    行内公式 \(ax^2 + bx + c = 0\) <br>
    下面是块级公式
    $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
</div>
<link rel="stylesheet" href="./katex/katex.min.css">
<script defer src="./katex/katex.min.js"></script>
<script defer src="./katex/auto-render.min.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        window.renderMathInElement(document.body, {
            delimiters: [
                {left: '$$', right: '$$', display: true},
                {left: '\\[', right: '\\]', display: true},
                {left: '$', right: '$', display: false},
                {left: '\\(', right: '\\)', display: false}
            ],
            throwOnError: false
        });
    });
</script>
</body>
</html>

也可以使用官方镜像

1
2
3

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css" integrity="sha384-n8MVd4RsNIU0tAv4ct0nTaAbDJwPJzDEaqSD1odI+WdtXRGWt2kTvGFasHpSy3SV" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js" integrity="sha384-XjKyOOlGwcjNTAIQHIpgOno0Hl1YQqzUOEleOLALmuqehneUG+vnGctmUb0ZY0l8" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js" integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05" crossorigin="anonymous"></script>

Vue下使用

https://github.com/lucpotage/vue-katex

安装

# With NPM
npm i vue-katex katex

# With Yarn
yarn add vue-katex katex

引用

import Vue from 'vue';
import VueKatex from 'vue-katex';
import 'katex/dist/katex.min.css';

Vue.use(VueKatex, {
  globalOptions: {
    //... Define globally applied KaTeX options here
  }
});

自定义配置

Vue.use(VueKatex, {
  globalOptions: {
    displayMode: true,
    leqno: false,
    fleqn: true,
    throwOnError: false,
    errorColor: "#ad5252",
    strict: "warn",
    output: "htmlAndMathml",
    trust: false,
    macros: { "\\f": "#1f(#2)" },
  },
});

输出模式支持

htmlAndMathml
html
mathml

使用

在模版中:

1	<div v-katex="'\\frac{a_i}{1+x}'"></div>

只渲染:

1	<div v-katex:display="'\\frac{a_i}{1+x}'"></div>

添加options配置:

1	<div v-katex="{ expression: '\\frac{a_i}{1+x}', options: { throwOnError: false }}"></div>

组件

1	<katex-element expression="'\\frac{a_i}{1+x}'"/>

Android下使用

https://github.com/judemanutd/KaTeXView

添加依赖

1
2
3

dependencies {
    implementation 'com.github.judemanutd:katexview:1.0.2'
}

使用

<com.judemanutd.katexview.KatexView
    android:id="@+id/katex_text"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:textColor="@color/colorPrimary" />

赋值

1 2	val text = "$$ c = \\pm\\sqrt{a^2 + b^2} $$" katex_text.setText(text)

经测试

该库的公式分割符只支持$$，公式的前后都要添加。

公式显示模式是块模式，会换行，目前还没找到实现行模式的方法。

组件是继承Webview实现的，所以网页的标签都支持。

MathJax

这个库目前只支持Web端。

https://www.mathjax.org/

Github

https://github.com/MathJax/MathJax

在线测试

https://www.mathjax.org/#demo

https://staticfile.org/

搜索mathjax

使用示例

这里没有在项目中引用库的原因在于库文件太大了，都20M了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>公式编辑器MathJax</title>
</head>
<body>
<div id="z_html" style="display: none">
    行内公式 \(ax^2 + bx + c = 0\) <br>
    下面是块级公式
    $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
</div>
<script>
    (function () {
        let z_html = document.querySelector("#z_html");
        if (document.body.textContent.match(/(?:\$|\\\(|\\\[|\\begin\{.*?})/)) {
            if (!window.MathJax) {
                window.MathJax = {
                    tex: {
                        inlineMath: {'[+]': [['$', '$']]}
                    }
                };
            }
            let script = document.createElement('script');
            script.src = 'https://cdn.staticfile.org/mathjax/3.2.2/es5/tex-mml-chtml.js';
            document.head.appendChild(script);
        }
      setTimeout(function (){
          z_html.style.display = "block";
      },500)
    })();
</script>
</body>
</html>

对比

KaTeX的整体性能要优于MathJax。
KaTeX库文件的大小也远远小于MathJax。
MathJax默认支持整页渲染，KaTeX可以通过插件支持整页渲染。
MathJax本身不提供Android端的，KaTeX提供Android端，但是提供的库只支持块级公式渲染。
MathJax支持的渲染目标格式比较全，KaTeX渲染的目标格式比较单一。

总之

更推荐使用KaTeX。

我是码客，我是全栈工程师，我为自己代言。

公式编辑器(Tex)推荐