vue使用mathJax

【代码】vue使用mathJax。

weixin_51010848

2589人浏览 · 2024-07-12 15:49:26

weixin_51010848 · 2024-07-12 15:49:26 发布

建议用第二种，第一种是cdn资源包，改成内网之后会访问不了

第一种：用的是mathjax2.7.5（cdnjs资源包，改成内网之后会访问不了）

1.index.html引入cdn资源包

<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/utils/mathjax.js

// 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.getElementsByClassName(elementId),
  ]); // 根据class
  window.MathJax.Hub.Queue([
    "Typeset",
    window.MathJax.Hub,
    document.getElementById(elementId),
  ]); // 根据id
};

export default {
  isMathjaxConfig,
  initMathjaxConfig,
  MathQueue,
};

3.main.js引用

// 解析数学表达式
import mathJax from "./utils/mathJax"; // 引入样式

Vue.prototype.mathJax = mathJax;

4.公共组件gs.vue

<template>
  <div class="latexDiv" v-html="'$$'+latex+'$$'" />
</template>
  
  <script>
import mathJax from '@/utils/mathJax.js'
export default {
  name: 'TheLatex2Math',
  props: { latex: { type: String, default: '' } },
  watch: {
    // 监视latex的变化
    latex() {
      this.mathJax()
    },
  }, // 限制父子组件参数为String
  created() {
    // 组件刚创建的时候，watch并不会被触发，因为latex值没发生变化
    this.mathJax()
  },
  methods: {
    mathJax() {
      this.$nextTick(function () {
        // Vue的DOM渲染是异步的
        if (mathJax.isMathjaxConfig) {
          // 是否配置MathJax
          mathJax.initMathjaxConfig()
        }
        mathJax.MathQueue('latexDiv') // 渲染对应的id/class
      })
    },
  },
}
</script>

<style>
.mjx-chtml {
  margin: 0 !important;
}
</style>

5.vue页面使用

<template>
    <div>
          一元二次方程 \(ax^2 + bx +c = 0\) 的求解公式为 \( x = {-b \pm \sqrt{b^2-4ac} \over 2a} \) <br />
          \(1 = {1 \over 1}\) 的求解公式为 \( x = {-b \pm \sqrt{b^2-4ac} \over 2a} \)
        </div>
        <div class="flex-item">
          <TheLatex2Math :latex="gs" />
        </div>
        <div>
          一元二次方程 \(ax^2 + bx +c = 0\) 的求解公式为 \( x = {-b \pm \sqrt{b^2-4ac} \over 2a} \)
        </div>
</template>


<script>
import TheLatex2Math from '@/views/baseData/finishedProduct/gs.vue'
components: {
    TheLatex2Math,
},
data(){
    return{        
      gs: 'P_{待估} = \\frac{1/a}{1/a+1/b+1/c}*P_A+\\frac{1/b}{1/a+1/b+1/c}*P_B+\\frac{1/c}{1/a+1/b+1/c}*P_C',
    }
}
</script>

6.views/baseData/finishedProduct/gs.vue

<template>
  <div class="latexDiv" v-html="'$$'+latex+'$$'" />
</template>
  
  <script>
import mathJax from '@/utils/mathJax.js'
export default {
  name: 'TheLatex2Math',
  props: { latex: { type: String, default: '' } },
  watch: {
    // 监视latex的变化
    latex() {
      this.mathJax()
    },
  }, // 限制父子组件参数为String
  created() {
    // 组件刚创建的时候，watch并不会被触发，因为latex值没发生变化
    this.mathJax()
  },
  methods: {
    mathJax() {
      this.$nextTick(function () {
        // Vue的DOM渲染是异步的
        if (mathJax.isMathjaxConfig) {
          // 是否配置MathJax
          mathJax.initMathjaxConfig()
        }
        mathJax.MathQueue('latexDiv') // 渲染对应的id/class
      })
    },
  },
}
</script>

<style>
.mjx-chtml {
  margin: 0 !important;
}
</style>

——————————————————————————————————————————

第二种：用的是^3.2.2(当前最新)

参考：如何在vue中导入mathjax作为本地依赖项？-腾讯云开发者社区-腾讯云

1.安装mathjax

npm install mathjax@3

2. 在安装完成的nodemodules文件里找到mathjax/es5，复制粘贴到src/assets/mathjax/es5。注：复制完mathjax的安装包就可以卸载了，节省资源

3.src/utils/mathjax.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,
};

4.main.js引用

// 解析数学表达式
import mathJax from "./utils/mathJax"; // 引入样式

Vue.prototype.mathJax = mathJax;

5.vue页面使用

<template>
    <div>
          一元二次方程 \(ax^2 + bx +c = 0\) 的求解公式为 \( x = {-b \pm \sqrt{b^2-4ac} \over 2a} \) <br />
          \(1 = {1 \over 1}\) 的求解公式为 \( x = {-b \pm \sqrt{b^2-4ac} \over 2a} \)
        </div>
        <div>{{ gs }}</div>
        <div>
          一元二次方程 \(ax^2 + bx +c = 0\) 的求解公式为 \( x = {-b \pm \sqrt{b^2-4ac} \over 2a} \)
        </div>
</template>


<script>
import '@/assets/mathjax/es5/tex-mml-chtml'
data(){
    return{        
      gs: 'P_{待估} = \\frac{1/a}{1/a+1/b+1/c}*P_A+\\frac{1/b}{1/a+1/b+1/c}*P_B+\\frac{1/c}{1/a+1/b+1/c}*P_C',
    }
},
mounted() {
    window.addEventListener('scroll', this.handleScroll)
    if (this.mathJax.isMathjaxConfig) {
      // 判断是否初始配置，若⽆则配置。
      this.mathJax.initMathjaxConfig()
    }
    this.mathJax.TypeSet()
  },
  updated() {
    if (this.mathJax.isMathjaxConfig) {
      // 判断是否初始配置，若⽆则配置。
      this.mathJax.initMathjaxConfig()
    }
    this.mathJax.TypeSet()
  },
</script>

6.views/baseData/finishedProduct/gs.vue 同上