vue项目中数学公式的展示

在这里有个mathjax的插件，可以将dom中的数学公式展示。

第一步安装mathjax

npm install mathjax

安装完之后，你会在index.html中发现，已经引用了js文件，并且有相关配置

    <script type="text/javascript"
            src="http://api.xkw.com/mathjax/MathJax.js?config=TeX-MML-AM_CHTML"></script>

    <script type="text/x-mathjax-config">
      MathJax.Hub.Config({
        jax: ["input/MathML","output/SVG"],
        extensions: ["mml2jax.js","MathEvents.js"]
      });

    </script>

并且在utils中多了一个文件MathJax.js

MathJax文件内容

export default {
  MathConfig () {
    if (window.MathJax) {
      console.log('rendering mathjax')
      window.MathJax.Hub.Queue(['Typeset', window.MathJax.Hub], () => console.log('done'))
    }
  }
}

再来说一个npm通用的问题，怎么配置，怎么导入

通过在网上半天查询，终于找到

将MathJax.js的配置文件改为如下

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('app')])
}

export default {
  isMathjaxConfig,
  initMathjaxConfig,
  MathQueue
}

这里做一个简单说明，Hub.Config中是做一些基本配置，再通过调用Hub.Queue这个方法对dom树进行渲染。

基本配置搞定，然后将文件导入到main.js中

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

接下来就可以使用了

  watch: {
    list: function () {
      this.$nextTick(function () {
        if (this.MathJax.isMathjaxConfig) { // 判断是否初始配置，若无则配置。
          this.MathJax.initMathjaxConfig()
        }
        this.MathJax.MathQueue()// 传入组件id，让组件被MathJax渲染
      })
    }
  }

监听list是否发生变化，发生变化之后，就在dom渲染完之后，生成试题的正确展示形式

来源：https://www.cnblogs.com/MTRD/p/11941938.html

标签

mathjax

vue