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博客

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐