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

  • 9
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值