vue3.x使用MathJax3注意点

网上有不少教程，但是实际使用还是有些问题需要记录：

参考: https://blog.csdn.net/qq_54123885/article/details/120826318

https://www.osuu.net/1456.html

总结版：

一个githuhb仓库: https://github.com/HGGshiwo/mathjaxexample

比如想在xx.vue中，想要渲染一个span节点的公式，需要三步：

1. 在index.html中加入：

<script>
  window.MathJax = {
        tex: {
            inlineMath: [
                ['$', '$'],
                ['\\(', '\\)']
            ], // ⾏内公式选择符
            displayMath: [
                ['$$', '$$'],
                ['\\[', '\\]']
            ] // 段内公式选择符
        },
        options: {
            skipHtmlTags: ['script', 'noscript','style', 'textarea', 'pre', 'code',
            'a'], // 避开某些标签
            ignoreHtmlClass: 'tex2jax_ignore',
            processHtmlClass: 'tex2jax_process'
        }
    }
</script>
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js" id="Ma thJax-script"></script>

2. 在xxx.vue中加入以下代码，如果你的页面有多个公式且公式会动态更新，请务必指定span的id，这样只会渲染动态改变的公式，不会渲染所有公式：

<template>
	<span id="output">{{ myFormula }}<span/>
<template/>

3. 在xxx.vue的setup：

import { reactive, ref } from "@vue/reactivity";

setup() {
	const myFormula = ref("\frac{1}{2}") //自己指定公式，也可以动态输入
	
	//渲染函数，调用时会渲染指定节点elements，如果没有指定节点，渲染页面上所有公式
	//elements可以是一个DOM节点的数组(注意getXXXsByYYY的结果是collection，必须手动转为数组才行)
	const TypeSet = async function (elements) {
	    if (!window.MathJax) {
	        return
	    }
	    window.MathJax.startup.promise = window.MathJax.startup.promise
	        .then(() => {
	            return window.MathJax.typesetPromise(elements)
	        })
	        .catch((err) => console.log('Typeset failed: ' + err.message))
	    return window.MathJax.startup.promise
	}
	
	//onMounted的时候必须调用
	onMounted(()=>{
		TypeSet()
		//这里写自己的onMounted内容
	})
	
	watch(()=> myFormula.value,
	(newValue)=>{
		//直接调用TypeSet()也可以，但是会重新渲染页面所有公式
		TypeSet([document.getElementById("output")])
	})
	
	return {
		myFormula,
	}
}

1 配置和初始化

1 按照文章说的配置会报错，提升MathJax引入的错误，后来看了官网才发现，配置必须在引入js之前进行。即在index.html中加入:

<script>
  window.MathJax = {
        tex: {
            inlineMath: [
                ['$', '$'],
                ['\\(', '\\)']
            ], // ⾏内公式选择符
            displayMath: [
                ['$$', '$$'],
                ['\\[', '\\]']
            ] // 段内公式选择符
        },
        options: {
            skipHtmlTags: ['script', 'noscript','style', 'textarea', 'pre', 'code',
            'a'], // 避开某些标签
            ignoreHtmlClass: 'tex2jax_ignore',
            processHtmlClass: 'tex2jax_process'
        }
    }
</script>
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js" id="Ma thJax-script"></script>

注意对MathJax的配置一定要在引入js之前进行。

2 内容更新时渲染

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
}

公式应该放在什么标签中?

可以放在tex中，或者是span标签中。MathJax会自动识别符合条件的公式。

然后在内容发生更新的时候调用TypeSet。TypeSet放在哪里都可以。

3 TypeSet的调用时机

1: 在OnMounted时必须调用

2: 在OnUpdate时调用，发现没什么用。Vue的update这个钩子被调用的时机很迷，一般不会考虑调用这个。

3: 常见的情景是：输入什么内容，然后更新公式渲染。这时需要对输入内容进行监视。比如输入的内容，通过v-model绑定到input变量中，在span中显示output的内容：
数据流动：
<input></input> => input
output => <span></span>

watch(()=> input.value,
	(newValue)=>{
		output.value = newValue
		TypeSet()
	}
)