Vue关于MathJax2.7的使用

最新推荐文章于 2025-09-16 01:07:33 发布

原创最新推荐文章于 2025-09-16 01:07:33 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中集成并使用MathJax2.7，从引入库到配置方法，再到在main.js中设置以及在Vue组件中的调用，为实现数学公式渲染提供了清晰的步骤。

部署运行你感兴趣的模型镜像

引入

 <script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"></script>

创建方法配置

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.body]);//这里可以用原生的js调用name,class,id。
};
export default {
  isMathjaxConfig,
  initMathjaxConfig,
  MathQueue,
}

main.js饮用

import globalVariable from '@/globalVariable'
Vue.prototype.commonsVariable = globalVariable;

Vue调用

 this.$nextTick(function () { //这里要注意，使用$nextTick等组件数据渲染完之后再调用MathJax渲染方法，要不然会获取不到数据
      if(this.commonsVariable.isMathjaxConfig){//判断是否初始配置，若无则配置。
            this.commonsVariable.initMathjaxConfig();
        }
        this.commonsVariable.MathQueue();//传入组件id，让组件被MathJax渲染
    })

您可能感兴趣的与本文相关的镜像