方法一、引用外网的地址
但是使用这个方法，会报跨域，所以需要注意
第一步：在public/index.html中引入地址
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
/>
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<!-- 这个是线上的地址，但是会报跨域 -->
<script
type="text/javascript"
src="http://cdn.bootcss.com/mathjax/2.7.0/MathJax.js?config=TeX-AMS-MML_HTMLorMML"
></script>
<title><%= webpackConfig.name %></title>
</head>
<body>
<noscript>
<strong
>We're sorry but <%= webpackConfig.name %> doesn't work properly without
JavaScript enabled. Please enable it to continue.</strong
>
</noscript>
<div id="app"></div>
</body>
</html>
第二步：在utils下创建配置文件Mathjax.js
// 这个是使用这个地址的配置写法http://cdn.bootcss.com/mathjax/2.7.0/MathJax.js?config=TeX-AMS-MML_HTMLorMML
let isMathjaxConfig = false; //用于标识是否配置
const initMathjaxConfig = () => {
if (!window.MathJax) {
return;
}
window.MathJax.Hub.Config({
showProcessingMessages: false, // 关闭js加载过程信息
messageStyle: "none", // 不显示信息
extensions: ["tex2jax.js"],
jax: ["input/TeX", "output/HTML-CSS"],
showMathMenu: false,
tex2jax: {
inlineMath: [
["$", "$"],
["\\(", "\\)"],
],
displayMath: [
["$$", "$$"],
["\\[", "\\]"],
],
processEscapes: true,
skipTags: ["script", "noscript", "style", "textarea", "pre", "code", "a"], // 避开某些标签
},
"HTML-CSS": {
availableFonts: ["STIX", "TeX"], // 可选字体
showMathMenu: false, // 关闭右击菜单显示
},
});
isMathjaxConfig = true; //配置完成，改为true
};
const MathQueue = function (elementId) {
if (!window.MathJax) {
return;
}
window.MathJax.Hub.Queue(["Typeset", window.MathJax.Hub]); //整个dom下渲染
// window.MathJax.Hub.Queue(["Typeset", window.MathJax.Hub, document.getElementById(elementId)]); //固定id元素渲染，
};
export default {
isMathjaxConfig,
initMathjaxConfig,
MathQueue,
};
第三步：main.js中全局引入
import mathJax from "@/utils/MathJax";
Vue.prototype.mathJax = mathJax;第四步：页面使用
<template>
<div id="Mindopt" class="Mindopt">
<div v-html="val"></div>
</div>
</template>
<script>
export default {
data () {
return {
val: `$$\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.$$`,
}
},
created () {
this.getmathJax();
},
methods: {
getmathJax () {
this.$nextTick(function () {
if (this.mathJax.isMathjaxConfig) {//判断是否初始配置，若无则配置。
this.mathJax.initMathjaxConfig();
}
this.mathJax.MathQueue("Mindopt");//传入组件id，让组件被MathJax渲染
});
},
}
}
</script>
<style lang="scss">
</style>方法二、下载到本地使用
我原先想放入src/assets中，然后在页面中引入import '@/assets/mathjax/es5/tex-mml-chtml'，但是会报以下错，不知道啥原因。
所以我只能放入到public下，在index.html中引入文件。
第一步：下载
npm i mathjax@3第二步：将下载到node_modules/mathjax整个文件放置到public下
第三步：index.html中引入js文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
/>
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<!-- mathjax.js -->
<script
src="./js/mathjax/es5/tex-mml-chtml.js"
id="MathJax-script"
async
></script>
<title><%= webpackConfig.name %></title>
</head>
<body>
<noscript>
<strong
>We're sorry but <%= webpackConfig.name %> doesn't work properly without
JavaScript enabled. Please enable it to continue.</strong
>
</noscript>
<div id="app"></div>
</body>
</html>
第四步：在utils下创建配置文件Mathjax.js
// 这个是使用这个地址的配置写法（包括本地）https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js
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,
};第五步：main.js中全局引入
import mathJax from "@/utils/MathJax";
Vue.prototype.mathJax = mathJax;第六步：页面使用
<template>
<div id="Mindopt" class="Mindopt">
<div v-html="val"></div>
</div>
</template>
<script>
export default {
data () {
return {
val: `$$\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.$$`,
}
},
created () {
this.getmathJax();
},
methods: {
getmathJax () {
this.$nextTick(function () {
if (this.mathJax.isMathjaxConfig) {
// 判断是否初始配置，若⽆则配置。
this.mathJax.initMathjaxConfig()
}
this.mathJax.TypeSet()
});
},
}
}
</script>
<style lang="scss">
</style>
![[MIT6.5840]Lab3A leader election](https://i-blog.csdnimg.cn/direct/fa0ed7e4288644688d14ddbdeda702ed.png)
