vue中MathJax的基本使用

第一次使用MathJax，在这里做个简单的记录，这是小编第一次写文章，如果有什么不对的地方或者需要补充的地方，希望大佬能够指出，复制黏贴可直接使用（非喜勿喷）

附加：基础信息等可参考（https://blog.youkuaiyun.com/hippoheh/article/details/129336860）

一、简单的封装，我是在utils文件下创建了一个MathJax.js文件，话不多说代码如下(创建方法)

const MathJax = () => {
	if (typeof window.MathJax === 'object') {
		initMathJax()
	} else {
		const script = document.createElement('script')
		//MathJax地址，为保持稳定可以下载到自己的服务器上引用,注意config参数不可忽略
		script.src =
			'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML'
		script.onload = initMathJax.bind(window);
		document.head.appendChild(script)
	}
}
const initMathJax = () => {
	window.MathJax.Hub.Config({
		showProcessingMessages: false, //关闭js加载过程信息
		messageStyle: "none", //不显示信息
		jax: ["input/TeX", "output/HTML-CSS"],
		tex2jax: {
			inlineMath: [
				["$", "$"],
				["\\(", "\\)"]
			], //行内公式选择符
			// displayMath: [
			// 	["$$", "$$"],
			// 	["\\[", "\\]"]
			// ], //段内公式选择符
			skipTags: ["script", "noscript", "style", "textarea", "pre", "code", "a"] //避开某些标签
		},
		"HTML-CSS": {
			availableFonts: ["STIX", "TeX"], //可选字体
			showMathMenu: false //关闭右击菜单显示
		}
	});
	if (!window.MathJax) {
		return;
	}
	//container 是当前页面DOM的ID，可以自定义
	window.MathJax.Hub.Queue(["Typeset", window.MathJax.Hub, document.getElementById('container')]);
}

export default MathJax

二、在main.js中引入并挂载到Vue实例上（需要使用的地方可以通过this.$MathJax()调用），代码如下

import MathJax from '@/utils/MathJax.js'
Vue.prototype.$MathJax = MathJax

三、在需要使用的地方可通过一下方法调用

mounted() {
			setTimeout(() => {
				this.$MathJax()
			}, 100)
		},