1.使用Webpakage新建一个简单的Vue项目
2.再新建项目的public目录下的index.html中,加入如下标签内容
整体MathJax的scriipt的引入
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!--
"mathjax": "^3.1.4",-->
</body>
<script type="text/javascript"
async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"></script>
</html>
3.新建一个JS目录(随意),用来放初始化MathJax的脚本
里面的内容 如下
let isMathjaxConfig = false;//用于标识是否配置
const initMathjaxConfig = () => {
if (!window.MathJax) {
return;
}
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 //关闭右击菜单显示
}
});
isMathjaxConfig = true; //配置完成,改为true
};
const MathQueue = function (elementId) {
if (!window.MathJax) {
return;
}
window.MathJax.Hub.Queue(["Typeset", window.MathJax.Hub, document.getElementById(elementId)]);
};
export default {
isMathjaxConfig,
initMathjaxConfig,
MathQueue,
}
4.然后在全局引入
也就是在main.js中 加入如图所示代码,具体代码如下
import Vue from 'vue'
import App from './App.vue'
// main.js
import MathJax from './js/MathJax.js' // MathJax.js内容在1.3,位置随意
Vue.prototype.MathJax = MathJax
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
5.最后就是使用,代码如下
<template xmlns:display="http://www.w3.org/1999/xhtml">
<div class="hello">
<div>{{text1}}</div>
</div>
</template>
<script>
import MathJax from '../js/MathJax'
export default {
name: 'HelloWorld',
props: {
msg: String
},
data(){
return{
text1 : '$$借款本金=\\sum _{nT}^{i=1}\\frac{第i期支付金额}{1+年化综合成本}$$'
}
},
methods: {
formatMath() {
let that = this;
setTimeout(function () {
that.$nextTick(function () {
if(MathJax.isMathjaxConfig){//判断是否初始配置,若无则配置。
MathJax.initMathjaxConfig();
}
MathJax.MathQueue("hello");//传入组件id,让组件被MathJax渲染
})
},500);
}
},
created() {
this.formatMath();
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
我这里是直接在 建好项目的 HelloWorld.vue 中使用的。
主要做的事情有三个
a:方法 formatMath() 用来初始化 MathJax
b:再页面加载就 调用 a的方法
c:定义数学表达式的 内容,再Html中直接使用
数学表到时内容,可以参考该同学的文章https://blog.csdn.net/u010945683/article/details/46757757