vue3+element-plus + katex 渲染数学公式

katex: https://katex.org/docs/browser.html

在显示数学公式的时候，通常都是文字格式，但网页显示需要用到katex

常见的数学公式渲染工具，包括了mathjax和katex，katex更加轻量化，延迟低很多

vscode中渲染markdown内的数学公式就是使用的katex

包含了数学公式的最开始的文本：

$H_k$ 是测量矩阵，将真实状态映射到测量状态

$v_k$ 是测量噪声，也是服从平均值=0，方差是 $R_k$ ，也就是 $v_k-N(0, R_k)$

 **测量残差：**  ${\displaystyle {\tilde {\mathbf {y} }}_{k}=\mathbf {z} _{k}-\mathbf {H} _{k}{\hat {\mathbf {x} }}_{k\mid k-1}}$ ，和上面的真实测量有些区别， $\mathbf z_k$ 是测量值， ${\hat {\mathbf {x} }}_{k\mid k-1}$ 是该时刻的predict

 **测量残差协方差：**  ${\displaystyle \mathbf {S} _{k}=\mathbf {H} _{k}{\hat {\mathbf {P} }}_{k\mid k-1}\mathbf {H} _{k}^{\textsf {T}}+\mathbf {R} _{k}}$

卡尔曼增益： ${\displaystyle \mathbf {K} _{k}={\hat {\mathbf {P} }}_{k\mid k-1}\mathbf {H} _{k}^{\textsf {T}}\mathbf {S} _{k}^{-1}}$

下面是通过Katex渲染以后的结果

在VUE3内的使用方式

安装

npm install katex

导入

在main.js中导入katex, css和auto-render

import katex from 'katex' // https://katex.org/docs
import renderMathInElement from 'katex/contrib/auto-render/auto-render.js'
import 'katex/dist/katex.min.css';
...
app.use(katex)
...

auto-render 是用来自动渲染某个tag DOM的 https://katex.org/docs/autorender

使用

导入以后就可以在组件.vue文件当中使用了，使用前还需要导入一次，

<script>
import katex from “katex”
import renderMathInElement from ‘katex/contrib/auto-render/auto-render.js’

最后渲染相应的数学公式文本就可以了

        let katex_element_collect = document.getElementsByClassName("katexspan");
        let len = katex_element_collect.length;
        for(let i = 0; i < len; i++) {
          let kec = katex_element_collect[i];
          katex.render(kec.outerText, kec, {
            throwOnError: false
          });
        }

文档内还描述了怎么拿到html，https://katex.org/docs/api

最后，有人提供了相应的vue2的plugin，在扩展当中的：https://katex.org/docs/libs，https://github.com/lucpotage/vue-katex/tree/master