vue3 mathjax2.7.7 数学公式

1. index.html代码部分

<script type="text/x-mathjax-config">
    MathJax.Hub.Config({
      extensions: ["tex2jax.js"],
      jax: ["input/TeX","output/HTML-CSS"],
      tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]]}
    });
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML">
</script>

2. 在需要使用数学公式的vue页面调用方法

<script setup>

onMounted(() => {
  setTimeout(MathJax.Hub.Typeset(), 1000);
});


</script>

<template>

    <div>
        $$\mathit{PRCPTOT_{j} = \sum_{i=1}^{I}RR_{ij}} $$
    </div>

</template>

3. 页面效果

4. 公式在线生成网站

在线LaTeX公式编辑器-编辑器

MyScript Webdemo

注意:

1. 在mathjax3.x版本中, 官方文档说字体不能修改, 丑到爆, 所以这里用了2.7.7版本

字体是配置的原因, 具体看下面这篇文章

https://blog.csdn.net/xushijie89/article/details/136045066?spm=1001.2014.3001.5501

2. vue3使用了vite, vite官网表示使用了严格模式, 但是mathjax2.x.x版本是非严格模式, 在main.js中引用mathjax后会报错