前端渲染文档中的数学公式

前端渲染文档中的数学公式

使用mavon-editor 可以很好的渲染出一篇md格式文档。但是当文档中中存在数学公式时，渲染出来的结果可能是下面这样

也可能是这样

然后就蒙了，这谁看得懂？

但是数学公式它能简明扼要的描述一些重要结论，因此为了防止日后看不懂自己写的文档，还是需要能正常的渲染出数学公式来。

mathjax-vue

GitHub地址

github上给出的用例是在中引用，这意味着要渲染整个document，公式在文档中肯定是占小部分，整个文档渲染来浪费资源，因此我们尽量指定标签进行渲染。

安装

npm i --save mathjax-vue

引入

import MathJax, {initMathJax, renderByMathjax} from "mathjax-vue"

使用

mounted(){
	initMathJax({}, () => {
      renderByMathjax(document.getElementById("article-content"));
    })
}

效果如下