vue简单实用mathJax

weixin_51010848

已于 2023-06-09 15:43:00 修改

阅读量931

点赞数

文章标签： vue.js

于 2023-06-09 15:33:31 首次发布

本文链接：https://blog.csdn.net/weixin_51010848/article/details/131128462

版权

文章介绍了如何在Vue项目中集成MathJax库，用于渲染数学公式。首先在src/utils创建mathJax.js文件进行配置，然后在main.js中引入并挂载到Vue原型上，接着在index.html中添加MathJax的CDN链接。在组件的mounted和updated钩子中调用配置和类型设置方法，确保公式正确渲染。

摘要由CSDN通过智能技术生成

1.新建mathJax文件放到 src\utils下 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,
};

2.main.js引用挂在

import mathJax from "./utils/mathJax";
Vue.prototype.mathJax = mathJax;

3.index.html中引用mathjax包

<script src="https://node2d-public.hep.com.cn/mathjax@3/es5/tex-mml-chtml.js" id="Ma thJax-script"></script>

4.页面中使用,注意，main.js挂载时候叫mathJax,代码中保持一致，如果叫globalVaribal.js，使用时也要同名，

<template>
    <div>
          一元二次方程 \(ax^2 + bx +c = 0\) 的求解公式为 \( x = {-b \pm \sqrt{b^2-4ac} \over 2a} \)
    </div>
</template>
<script>
export default {
  name: 'aa',
  data(){
    return {}
  },
  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()
  },

}

mathJax的基本使用方式参考：MathJax基本的使用方式_GentleJade的博客-CSDN博客