解决数学计算公式在前端项目里的展示，涉及换肤适配各个框架

有时候我们项目里面会嵌套一些数学公式说明
例如

在这里插入图片描述

可能你会发现市面上有很多的第三方库可以实现，比如：

MathJax： https://www.mathjax.org/

但是我们项目里面用到公式可能就一个页面，引一个第三方库进来会显得十分臃肿，而且配置起来也十分的麻烦，除非涉及公式编辑或者书写的需求

这时如果你的项目没有换肤要求，最简单的做法就是图片，让ui把展示的图片给你，直接放到项目里就好了，也省去了对样式和内容的负责

如果你的项目涉及换肤的话，图片可能就就不太满足了，这时候可以用以下做法：

进入LaTeX网站：https://www.latexlive.com/

输入你的公式表达式

在这里插入图片描述

导出html

在这里插入图片描述

3.放到项目里面给相应的样式

<template>
    <div>
        <h2>公式</h2>
        <math class="formule" display="block">
            <mfrac>
                <mn>1</mn>
                <mrow>
                    <msup>
                        <mi>n</mi>
                        <mrow>
                            <mn>2</mn>
                        </mrow>
                    </msup>
                    <mo>−</mo>
                    <mn>1</mn>
                </mrow>
        </mfrac>
        <mo>=</mo>
        <mfrac>
            <mn>1</mn>
            <mn>2</mn>
        </mfrac>
        <mrow data-mjx-texclass="INNER">
            <mo data-mjx-texclass="OPEN">(</mo>
            <mfrac>
                <mn>1</mn>
                <mrow>
                    <mi>n</mi>
                    <mo>−</mo>
                    <mn>1</mn>
                </mrow>
            </mfrac>
            <mo>−</mo>
            <mfrac>
                <mn>1</mn>
                <mrow>
                    <mi>n</mi>
                    <mo>+</mo>
                    <mn>1</mn>
                </mrow>
            </mfrac>
            <mo data-mjx-texclass="CLOSE">)</mo>
        </mrow>
        <msub>
            <mi>a</mi>
            <mrow>
                <mi>n</mi>
            </mrow>
        </msub>
        <mo>=</mo>
        <msub>
            <mi>a</mi>
            <mrow>
                <mn>1</mn>
            </mrow>
        </msub>
        <mo>+</mo>
        <mrow data-mjx-texclass="INNER">
            <mo data-mjx-texclass="OPEN">(</mo>
            <mi>n</mi>
            <mo>−</mo>
            <mn>1</mn>
            <mrow data-mjx-texclass="INNER">
                <mo data-mjx-texclass="OPEN">)</mo>
                <mi>d</mi>
                <mo data-mjx-texclass="CLOSE" fence="true" stretchy="true" symmetric="true"></mo>
            </mrow>
            <mo data-mjx-texclass="CLOSE" fence="true" stretchy="true" symmetric="true"></mo>
        </mrow>
    </math>
</div></template>