使用mathjax解析公式

mathjax解析公式

1. uniapp使用mathjax 在app.vue里面动态引入mathjax

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'
document.head.appendChild(script)

2. 在vue中使用mathjax 可以直接在public目录下的index.html引入mathjax, 后面几步代码都一样

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

3. 新建mathjax全局方法配置js文件, 目录自己定 , 后面在main.js里面引用

let isMathjaxConfig = {
  bool: false
}// 用于标识是否配置
const initMathjaxConfig = () => {
  if (!window.MathJax) {
    return
  }
  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.bool = 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引入刚刚创建的mathjax全局方法js文件

import globalVariable from '@/utils/globalVariable.js'
Vue.prototype.globalVariable = globalVariable 

5. 在页面中使用, 封装一个方法, 接口拿到数据后调用一下即可

//公式格式化
formatting() {
	//判断是否初始配置，若无则配置。
	if(!this.globalVariable.isMathjaxConfig.bool){
	  this.globalVariable.initMathjaxConfig();
	}
	this.$nextTick(_ => {
	//传入组件id，让组件被MathJax渲染
	  this.globalVariable.MathQueue("questionList-page");
	})
},

6. 渲染后的样式