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后会报错

GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐