vue中MathJax的基本使用

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

附加：基础信息等可参考（https://blog.csdn.net/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)},

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！