前端写数学公式

amsmath公式文档

数学公式符号大全

在线LaTeX公式编辑器-编辑器

使用步骤如下：

1.在vue项目打包后生成的index.js文件中添加如下内容

只要是运行过npm run build后，都会在文件夹中生成一个public文件夹，里面会有index.html文件，这也就是vue被被称为SPA单页面框架的原因。

在index.html文件中的body标签下面引入MathJax.js文件

<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"></script>

2.在src文件夹中新建一个MathJax.js文件,这个文件的路径任意，我是放在了src/utils中。

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,
}

3.在main.js文件中引入MathJax.js文件

在main.js文件中引入MathJax.js文件，并挂载到vue的原型上。这叫全局引入。

import MathJax from './utils/MathJax'
Vue.prototype.MathJax = MathJax;

4.在需要的地方使用MathJax.js

//1.在data中定义数学公式，注意数学公式需要用**$$**签后包裹，中间才是公式内容
data(){
	return{
		question1: '$$借款本金=\\sum _{nT}^{i=1}\\frac{第i期支付金额}{1+年化综合成本}$$',
      question2: '$$i=A/(t+b)^n$$',
      question3: '$$i(t_b)=A[(1-n)*t/r+b]/[(t_b/r)+b]^(n+1)$$',
      question4: '$$i(t_a)=A[(1-n)*t_a/(1-r)+b]/[(t_a/(1-r))+b]^(n+1)$$',
      question5: '$$A=[A_1(1+ClgP)]/167$$',
      question6: '$$a^2+b^2=c^2$$',
	}
},
//在页面创建的时候调用methods中的formatMath的方法
created(){
	this.formatMath();
},
methods:{
	formatMath(){
	  setTimeout(()=>{
	    this.$nextTick(()=>{
	      if(this.MathJax.isMathjaxConfig){
	        this.MathJax.initMathjaxConfig();
	      }
	      //这个地方的hello是对应要渲染数学公式的dom的class
	      this.MathJax.MathQueue('hello');
	    })
	  },500)
	},
}

html部分代码如下：

<div class="hello" style="margin:0 auto;text-align:center;">
    {{ question1 }}
    <br>
    <span class="spanCls">
      <span>暴雨强度公式：</span>{{question2}}
    </span>
    <br>
    <span class="spanCls">
      <span>峰前降雨强度公式：</span>{{question3}}
    </span>
    <br>
    <span class="spanCls">
      <span>峰后降雨强度公式：</span>{{question4}}
    </span>
    <br>
    <span class="spanCls">
      <span>备注：</span>{{question5}}
    </span>
    <br>
    <span class="spanCls">
      <span>勾股定理：</span>{{question6}}
    </span>
</div>

渲染效果图

在vue项目中使用MathJax时，需要注意的几点汇总如下：

需要在打包后的index.html文件中引入MathJax.js文件
需要在src文件夹中存放一个MathJax.js配置文件
需要在main.js中全局引入MathJax.js配置文件并挂载到vue原型上
需要在使用MathJax的地方，通过vue原型上的方法进行处理，并且需要注意数学公式的结构

完成！！！

补充：对比html页面的数学公式的展示与vue项目中的数学公式的展示，会发现有区别，前者除法公式是上下的布局，后者除法公式是直接横向展示。如果从容易理解的角度看，还是第一种会比较好。通过vue项目中的公式比对，发现如果要使得除法公式能够上下布局，则需要修改内容如下：

左右布局的除法公式写法

'$$i=A/(t+b)^n$$',

上下布局的除法公式写法

'$$i=\\frac{A}{(t+b)^n}$$',

如果需要将左右布局的除法公式写法改为上下布局的除法公式写法，则需要进行下面的改动：

在公式前面添加\两个反斜杠 在分子部分前面添加frac并用{}包裹分子与分母部分

完成上面的操作后，公式就可以改变布局方式了 以上项目中的几个变量改动如下：

只要是需要改为上下布局的除法公式部分都需要进行上面的两步，哪怕公式中有多个除法，也是需要包裹多次\frac{分子}{分母}

// question2: '$$i=\\frac{A}{(t+b)^n}$$',
question2: '$$i=A(t+b)^n$$',
// question3: '$$i(t_b)=A[(1-n)*t/r+b]/[(t_b/r)+b]^(n+1)$$',
question3: '$$i(t_b)=\\frac{A[(1-n)*\\frac{t}{r}+b]}{[(\\frac{t_b}{r})+b]^{n+1}}$$',
// question4: '$$i(t_a)=A[(1-n)*t_a/(1-r)+b]/[(t_a/(1-r))+b]^(n+1)$$',
question4: '$$i(t_a)=A\\frac{[(1-n)*\\frac{t_a}{(1-r)}+b]}{[(\\frac{t_a}{(1-r)})+b]^{n+1}}$$',
// question5: '$$A=[A_1(1+ClgP)]/167$$',
question5: '$$A=\\frac{[A_1(1+ClgP)]}{167}$$',
question6: '$$a^2+b^2=c^2$$',

最终效果图

来源