vue配置mathjax3

1.index.html⾥引⼊mathjax

HTML

去网上找 tex-mml-chtml.js   找不到私信我发你

2.新建globalVariable.js⽂件，写⼊操作mathjax的配置和渲染函数

let isMathjaxConfig = false // ⽤于标识是否配置
const initMathjaxConfig = () => {
    if (!window.MathJax) {
        return
    }
    window.MathJax = {
        tex: {
            inlineMath: [
                ['$', '$'],
                ['\\(', '\\)']
            ], // ⾏内公式选择符
            displayMath: [
                ['$$', '$$'],
                ['\\[', '\\]']
            ] // 段内公式选择符
        },
        options: {
            skipHtmlTags: ['script', 'noscript','style', 'textarea', 'pre', 'code',
            'a'], // 避开某些标签
            ignoreHtmlClass: 'tex2jax_ignore',
            processHtmlClass: 'tex2jax_process'
        }
    }
    isMathjaxConfig = true // 配置完成，改为true
}
const TypeSet = async function (elementId) {
    if (!window.MathJax) {
        return
    }
    window.MathJax.startup.promise = window.MathJax.startup.promise
    .then(() => {
        return window.MathJax.typesetPromise()
    })
    .catch((err) => console.log('Typeset failed: ' + err.message))
    return window.MathJax.startup.promise
}
export default {
    isMathjaxConfig,
    initMathjaxConfig,
    TypeSet
}

其中typeset函数⾥Mathjax.typesetPromise()是异步调⽤。如果是⽤同步调⽤排版函数

MathJax.typeset()，可能会出现某些扩展（⽐如/boldsymbol）⽆法加载的问题。

参考：

排版与数学转换 — MathJax 3.2 文档 (osgeo.cn)https://www.osgeo.cn/mathjax/web/typeset.html#typeset-async https://github.com/siyuan-note/siyuan/issues/152https://github.com/siyuan-note/siyuan/issues/152

3.在main.js⾥⾯引⼊globalVariable.js

import globalVariable from './util/globalVariable.js' 
Vue.prototype.globalVariable = globalVariable 

4.在需要渲染数学公式的vue⻚⾯的mounted后期和updated周期，调⽤渲染⽅法

mounted() {
    window.addEventListener('scroll', this.handleScroll)
    if (this.globalVariable.isMathjaxConfig) {
      // 判断是否初始配置，若⽆则配置。
      this.globalVariable.initMathjaxConfig()
    }
    this.globalVariable.TypeSet()
  },
  updated() {
    if (this.globalVariable.isMathjaxConfig) {
      // 判断是否初始配置，若⽆则配置。
      this.globalVariable.initMathjaxConfig()
    }
    this.globalVariable.TypeSet()
  },