vue中使用MathJax展示数学公式

清疚 2022-10-11 12:26 460阅读 0赞

##### 效果 #####

![在这里插入图片描述][20210630182030676.png]

##### 引入第三方包 #####

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

##### 创建js文件用于配置公式 #####

let isMathjaxConfig = false;//用于标识是否配置
    // window.MathJax = MathJax;
    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.getElementById(elementId)]);
    };
    
    
    export default {
        isMathjaxConfig,
        initMathjaxConfig,
        MathQueue,
    }

##### vue组件 #####

<template>
        <div> 
          <div class="mathJaxFont" v-html="formula"></div>
        </div>
    </template>
    
    <script>
        import MathJax from '../utils/MathJax';
        export default {
            data() {
                return {
                   formula:"$$R_{再生水}=\\sum_{j=1}^{n}(Q_{j再生水}-Q_{j再生水上年})\\times C_{ji当年}\\times10^{-2}$$",
                };
            },
            created() {
                this.formatMath();
            },
            methods: {
    			formatMath() {
                    let that = this;
                    setTimeout(function () {
                        that.$nextTick(function () {
                            if (MathJax.isMathjaxConfig) {//判断是否初始配置，若无则配置。
                                MathJax.initMathjaxConfig();
                            }
                            MathJax.MathQueue("hello");//传入组件id，让组件被MathJax渲染
                        })
                    }, 200);
                },
            },
            mounted() {
            }
    
        }
    </script>

<style  scoped lang="less">
                .mathJaxFont {
                    font-size: 18px;
                    margin: 16px;
                    width: max-content;
    
                    /deep/ .MJXc-display {
                        text-align: left !important;
                    }
                }
    </style>

[20210630182030676.png]: /images/20221005/0ed9bdbfa7f24cc7b2a397c4f0bef5a4.png

发表评论取消回复

表情：

评论列表（有 0 条评论，460人围观）

还没有评论，来说两句吧...

相关阅读

相关 markdown：数学公式

分数 \\frac\{\}\{\} 第一个\{ \}写分子，第二个\{ \}写分母。 <table> <thead> <tr> <th>名

布满荆棘的人生/ 2022年12月10日 08:57/ 0 赞/ 477 阅读

相关【个人网站搭建】hexo框架下支持显示MathJax数学公式

0x00 前言文章中的文字可能存在语法错误以及标点错误，请谅解；如果在文章中发现代码错误或其它问题请告知，感谢！ Hexo博客框架版本（hexo vesion）：

我就是我/ 2022年11月04日 05:22/ 0 赞/ 167 阅读

相关 html页面前端展示数学公式+vue项目前端展示数学公式——亲测可行

最近有同事在弄前端展示数学公式的功能，我也是头一次接触这个需求。所以也找了一些资料来找找答案。网上提供的展示数学公式：都是用到`MathJax`这个 html页面展示数

忘是亡心i/ 2022年10月13日 12:56/ 0 赞/ 412 阅读

相关 vue中使用MathJax展示数学公式

效果 ![在这里插入图片描述][20210630182030676.png] 引入第三方包 <script type="text/javascript"

清疚/ 2022年10月11日 12:26/ 0 赞/ 461 阅读

相关 vue+ueditor+kityformula数学公式插件

ueditor.vue组件 <template> <div class="home"> <script :id="id" :default

心已赠人/ 2022年10月06日 05:50/ 0 赞/ 737 阅读

相关 LaTeX中的数学公式

author: 胖大星越来越胖的博客 title: LaTeX中的数学公式 [http://blog.sina.com.cn/s/blog\_5e3213f3010

╰半橙微兮°/ 2022年08月19日 02:07/ 0 赞/ 291 阅读

相关 MathJax使用LaTeX语法编写数学公式教程

MathJax是一款相当强悍的在网页显示数学公式的插件。本教程介绍MathJax如何使用LaTeX语法编写数学公式。 1．如何插入公式 LaTeX的数学公式有两种：行中公式

梦里梦外;/ 2022年08月17日 15:13/ 0 赞/ 679 阅读

相关测试在网页上用Latex编写数学公式(MathJax )

在网页上使用Latex格式插入公式 1. 使用方法只需要在源码<head>便签中添加： <script type="text/javascript"

我会带着你远行/ 2021年11月10日 06:40/ 1 赞/ 543 阅读

相关数学公式总结

1. 求高阶导的莱布尼兹公式： ( u v ) ( n ) = ∑ k = 0 n C n k u ( n − k ) v ( k ) (uv)^\{(n)\}=\\sum^

骑猪看日落/ 2021年11月06日 01:04/ 0 赞/ 381 阅读

相关 MarkdownPad2 插入数学公式Mathjax

1.下载Mathjax源码 [https://github.com/mathjax/MathJax][https_github.com_mathjax_MathJax] 2

ゝ一纸荒年。/ 2021年09月27日 18:26/ 0 赞/ 488 阅读