【vue+mathjax】mathjax的使用

哇哦Q

已于 2024-08-29 17:23:14 修改

阅读量647

点赞数 5

分类专栏： Vue 文章标签： vue.js 前端 javascript

于 2024-08-08 10:56:24 首次发布

本文链接：https://blog.csdn.net/qxn530/article/details/141020447

版权

Vue 专栏收录该内容

28 篇文章 3 订阅

订阅专栏

方法一、引用外网的地址

第一步：在public/index.html中引入地址

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <title><%= webpackConfig.name %></title>
  </head>
  <body>
    <noscript>
      <strong
        >We're sorry but <%= webpackConfig.name %> doesn't work properly without
        JavaScript enabled. Please enable it to continue.</strong
      >
    </noscript>
    <div id="app"></div>
    <script src="Chat.js"></script>
    <script type="text/x-mathjax-config">
      MathJax.Hub.Config({
        showProcessingMessages: false, //关闭js加载过程信息
        messageStyle: "none", //不显示信息
        extensions: ["tex2jax.js"],
        jax: ["input/TeX", "output/HTML-CSS"],
        tex2jax: {
          inlineMath: [ ['$','$'], ["\\(","\\)"] ],
          displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
          skipTags: ['script', 'noscript', 'style', 'textarea', 'pre','code', 'a', 'annotation', 'annotation-xml'],
          ignoreClass: 'crayon-.*' // 'crayon-' 开头的类，属于Wordpress代码高亮库，这部分不需要处理，否则会导致显示不正确,这部分是正则式，多条之间用'|'分割
        },
        'HTML-CSS': {
            showMathMenu: false //禁用右键菜单
        }
      });
      MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
    </script>
    <script
      type="text/javascript"
      src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"
    ></script>
     <!-- 加速网络 -->
    <link rel="dns-prefetch" href="https://cdn.mathjax.org" />
  </body>
</html>

第二步：在utils下创建配置文件Mathjax.js

// 这个是使用这个地址的配置写法https://cdn.bootcss.com/mathjax/2.7.0/MathJax.js?config=TeX-AMS-MML_HTMLorMML (这个地址之前还能用，但是后来报错了，原因不明，改用下面的了，下面的皆可以)
// https://cdn.mathjax.org是官方的，https://cdn.bootcss.com是国内的公共资源
// https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML
// https://cdn.bootcss.com/mathjax/2.7.1/latest.js?config=TeX-AMS-MML_HTMLorMML
let isMathjaxConfig = false; //用于标识是否配置
const initMathjaxConfig = () => {
  if (!window.MathJax) {
    return;
  }
  window.MathJax.Hub.Config({
showProcessingMessages: false, // 关闭js加载过程信息
messageStyle: "none", // 不显示信息
    extensions: ["tex2jax.js"],
    jax: ["input/TeX", "output/HTML-CSS"],
    showMathMenu: false,
    tex2jax: {
      inlineMath: [
        ["$", "$"],
        ["\\(", "\\)"],
      ],
      displayMath: [
        ["$$", "$$"],
        ["\\[", "\\]"],
      ],
      processEscapes: true,
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]); //整个dom下渲染
  // window.MathJax.Hub.Queue(["Typeset", window.MathJax.Hub, document.getElementById(elementId)]); //固定id元素渲染，
};

export default {
  isMathjaxConfig,
  initMathjaxConfig,
  MathQueue,
};

第三步：main.js中全局引入

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

第四步：页面使用

<template>
  <div id="Mindopt" class="Mindopt">
    <div v-html="val"></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      val: `$$\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.$$`,
    }
  },
  created () {
    this.getmathJax();
  },
  methods: {
    getmathJax () {
      this.$nextTick(function () {
        if (this.mathJax.isMathjaxConfig) {//判断是否初始配置，若无则配置。
          this.mathJax.initMathjaxConfig();
        }
        this.mathJax.MathQueue("Mindopt");//传入组件id，让组件被MathJax渲染
      });
    },
  }
}
</script>


<style lang="scss">
</style>

方法二、下载到本地使用

我原先想放入src/assets中，然后在页面中引入import '@/assets/mathjax/es5/tex-mml-chtml'，但是会报以下错，不知道啥原因。

所以我只能放入到public下，在index.html中引入文件。

还有就是，行内公式使用$公式$，不生效，右键菜单也不能禁用，加了showMathMenu: false也不禁用，不知道为啥

第一步：下载

npm i mathjax@3

第二步：将下载到node_modules/mathjax整个文件放置到public下

第三步：index.html中引入js文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <!-- mathjax.js -->
    <script
      src="./js/mathjax/es5/tex-mml-chtml.js"
      id="MathJax-script"
      async
    ></script>

    <title><%= webpackConfig.name %></title>
  </head>
  <body>
    <noscript>
      <strong
        >We're sorry but <%= webpackConfig.name %> doesn't work properly without
        JavaScript enabled. Please enable it to continue.</strong
      >
    </noscript>
    <div id="app"></div>
  </body>
</html>

第四步：在utils下创建配置文件Mathjax.js

// 这个是使用这个地址的配置写法（包括本地）https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.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,
};

第五步：main.js中全局引入

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

第六步：页面使用

<template>
  <div id="Mindopt" class="Mindopt">
    <div v-html="val"></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      val: `$$\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.$$`,
    }
  },
  created () {
    this.getmathJax();
  },
  methods: {
    getmathJax () {
      this.$nextTick(function () {
        if (this.mathJax.isMathjaxConfig) {
          // 判断是否初始配置，若⽆则配置。
          this.mathJax.initMathjaxConfig()
        }
        this.mathJax.TypeSet()
      });
    },
  }
}
</script>


<style lang="scss">
</style>