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>

step1、通过包管理器安装KaTeX

step2、在HTML代码中引入CSS和JavaScript

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

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