Vue项目中使用MathJax

MathJax's Home Page

日常在一些页面里会用到Latex公式，在这一方面比较成熟的就是MathJax库，能够提供最为全面且方便的页面公式展示。

引入MathJax(v3)

npm i mathjax-full --save
# yarn add mathjax-full

Vue项目中import的内容需要通过Webpack处理，而MathJax最终的提供形式是挂载到window的，所以，在有需要的位置直接使用：

import "mathjax-full/es5/tex-svg-full";
// import "mathjax-full/es5/tex-chtml-full"; // CHTML方式

在Vue项目中使用MathJax(v3)

在Vue项目中，我们习惯手工去触发渲染，因为大量的内容会动态生成。在手工触发时，调用以下方法:

window.MathJax.typeset();

隐藏右键菜单

MathJax的功能对于公式展示而言，极为完备，甚至默认提供了右键菜单来让用户定制展示，对于B端项目，右键菜单并不是必要的，因此通过options将其关闭。

那么由于相关JS是通过直接import的方式引入的，无论是mount相关周期还是create相关周期，MathJax都已经初始化完毕，无法再配置。

所以，比较好的办法是在Vue的入口文件main.js内，直接全局优先定义options

window.MathJax = {
  options: {
    enableMenu: false,
    processHtmlClass: 'tex2jax_process' // 指定需要处理的DOM元素类，避免全局遍历
  }
}