KaTeX
1.1、KaTeX简介
是什么 ?:the fastest math typesetting library for the web.
开发语言:JavaScript
开发者:可汗学院
官方主页:https://KaTeX.org
源码仓库:https://github.com/KaTeX/KaTeX
1.2、通过开源CDN引入KaTeX

jsDelivr⤵︎

<link  href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js"></script>

<!-- 如果想使用自动渲染,还需要加载此js ->
<script src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/auto-render.min.js"></script>

BootCDN⤵︎

<link  href="https://cdn.bootcss.com/KaTeX/0.11.0/katex.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/KaTeX/0.11.0/katex.min.js"></script>

<!-- 如果想使用自动渲染,还需要加载此js ->
<script src="https://cdn.bootcss.com/KaTeX/0.11.0/contrib/auto-render.min.js"></script>
1.3、通过下载到本地引入KaTeX

step1、通过包管理器安装KaTeX

包管理器安装命令
bowerbower install katex --save
npmnpm install katex --save
yarnyarn add katex

step2、在HTML代码中引入CSSJavaScript

<link  href="/bower_components/katex/dist/katex.min.css" rel="stylesheet">
<script src="/bower_components/katex/dist/katex.min.js"></script>

<!-- 如果想使用自动渲染,还需要加载此js ->
<script src="/bower_components/katex/dist/contrib/auto-render.min.js"></script>
1.4、使用KaTeX

KaTeX支持手动渲染自动渲染,如果只是展示少量的数学公式, 那么使用手动渲染就可以了;如果是要展示大量的数学公式,使用自动渲染就很省事。手动渲染的效率显然是最高的,这要您自己权衡。

手动渲染:

手动渲染就是你自己调用KaTeX API,你要告诉它:你要把什么公式渲染在哪个DOM元素上。

示例:

katex.render("2^n", document.getElementById("tex1"), {
    throwOnError: false
});

显然,手动渲染这种方式是非常麻烦的,书写及其不流畅。

自动渲染:

只需要做如下的配置:

<script src="https://cdn.bootcss.com/KaTeX/0.11.0/contrib/auto-render.min.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        renderMathInElement(document.body);
    });
</script>

如果要在行内展示,用\(LaTeX\)的形式,示例:

<div>
   2的n次幂表示为\(2^n\)
</div>

如果要独立一行展示,用\[LaTeX\]或者$$LaTeX$$的形式,示例:

<div>
   2的n次幂表示为$$2^n$$
</div>

LaTex:

LaTex是一种表示数学公式的语法,KaTeX就是使用的这种语法, 这种语法非常容易理解。

参考1

参考2