使用

<MathJaxRenderer class="msg aiMsg" :ref="'math' + item.id">
              {{ item.content }}
</MathJaxRenderer>

组件代码

<!-- @format -->

<template>
  <div ref="mathContainer" class="math-container">
    <!-- {{ content }} -->
    <slot></slot>
  </div>
</template>

<script>
  export default {
    name: 'MathJaxRenderer',
    props: {
      content: {
        type: String,
        default: '',
      },
      options: {
        type: Object,
        default: () => ({}),
      },
    },
    data() {
      return {
        mathContainer: null,
      };
    },
    watch: {
      content: {
        handler(newContent) {
          if (this.mathContainer && newContent) {
            this.mathContainer.innerHTML = newContent;
            this.renderMathJax();
          }
        },
        immediate: true,
      },
    },
    methods: {
      refreshMathJax() {
        // 确保容器存在
        if (!this.mathContainer) {
          this.mathContainer = this.$refs.mathContainer;
        }

        // 强制重新渲染
        this.renderMathJax();

        // 返回Promise以便调用者可以在渲染完成后执行操作
        return new Promise((resolve) => {
          this.$nextTick(() => {
            resolve();
          });
        });
      },
      configureMathJax() {
        window.MathJax = {
          tex: {
            inlineMath: [
              ['\\(', '\\)'],
              ['$', '$'],
            ],
            displayMath: [
              ['$$', '$$'],
              ['\\[', '\\]'],
            ],
            packages: [
              'base',
              'ams',
              'noerrors',
              'noundefined',
              'newcommand',
              'boldsymbol',
              'cancel',
              'color',
              'enclose',
              'mhchem',
              'physics',
            ],
            macros: {
              // 数学集合符号
              '\\mathbb': '\\mathbf',
              '\\R': '\\mathbb{R}',
              '\\N': '\\mathbb{N}',
              '\\Z': '\\mathbb{Z}',
              '\\Q': '\\mathbb{Q}',
              '\\C': '\\mathbb{C}',

              // 极限、求和、积分
              '\\lim': '\\lim\\limits',
              '\\sum': '\\sum\\limits',
              '\\int': '\\int\\limits',
              '\\iint': '\\iint\\limits',
              '\\iiint': '\\iiint\\limits',
              '\\prod': '\\prod\\limits',

              // 基本函数
              '\\frac': '\\frac',
              '\\sqrt': '\\sqrt',

              // 三角函数
              '\\sin': '\\sin',
              '\\cos': '\\cos',
              '\\tan': '\\tan',
              '\\cot': '\\cot',
              '\\sec': '\\sec',
              '\\csc': '\\csc',
              '\\arcsin': '\\arcsin',
              '\\arccos': '\\arccos',
              '\\arctan': '\\arctan',

              // 双曲函数
              '\\sinh': '\\sinh',
              '\\cosh': '\\cosh',
              '\\tanh': '\\tanh',

              // 符号和常数
              '\\infty': '\\infty',
              '\\partial': '\\partial',
              '\\nabla': '\\nabla',
              '\\pi': '\\pi',
              '\\epsilon': '\\epsilon',
              '\\delta': '\\delta',
              '\\Delta': '\\Delta',

              // 矩阵相关
              '\\begin{matrix}': '\\begin{matrix}',
              '\\end{matrix}': '\\end{matrix}',
              '\\begin{pmatrix}': '\\begin{pmatrix}',
              '\\end{pmatrix}': '\\end{pmatrix}',
              '\\begin{bmatrix}': '\\begin{bmatrix}',
              '\\end{bmatrix}': '\\end{bmatrix}',

              // 对齐环境
              '\\begin{align}': '\\begin{align}',
              '\\end{align}': '\\end{align}',
              '\\begin{aligned}': '\\begin{aligned}',
              '\\end{aligned}': '\\end{aligned}',

              // 其他常用符号
              '\\to': '\\to',
              '\\mapsto': '\\mapsto',
              '\\Rightarrow': '\\Rightarrow',
              '\\Leftarrow': '\\Leftarrow',
              '\\Leftrightarrow': '\\Leftrightarrow',
            },
            processEscapes: true,
            processEnvironments: true,
            processRefs: true,
            tags: 'ams',
          },
          options: {
            enableMenu: false,
            ...this.options,
            renderActions: {
              addMenu: [0, '', ''],
              checkLoading: [1000, () => '', ''],
            },
            ignoreHtmlClass: 'tex2jax_ignore',
            processHtmlClass: 'tex2jax_process',
          },
          startup: {
            pageReady: () => {
              return window.MathJax.startup.defaultPageReady();
            },
          },
          loader: {
            load: [
              '[tex]/color',
              '[tex]/cancel',
              '[tex]/enclose',
              '[tex]/mhchem',
              '[tex]/physics',
            ],
          },
        };
      },
      renderMathJax() {
        if (window.MathJax && window.MathJax.typesetPromise) {
          // 先清除之前的渲染，避免重复渲染导致的问题
          if (window.MathJax.typesetClear) {
            window.MathJax.typesetClear([this.mathContainer]);
          }
          // 确保DOM已更新后再渲染
          this.$nextTick(() => {
            window.MathJax.typesetPromise([this.mathContainer])
              .then(() => {
                console.log('MathJax渲染完成');
              })
              .catch((err) => {
                console.error('MathJax渲染错误:', err);
              });
          });
        }
      },
      loadMathJax() {
        return new Promise((resolve) => {
          const script = document.createElement('script');
          script.src =
            'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js';
          script.async = true;
          document.head.appendChild(script);

          script.onload = (e) => {
            if (window.MathJax && window.MathJax.typesetPromise) {
              this.configureMathJax();
              this.renderMathJax();
              resolve();
            } else {
              setTimeout(checkMathJax, 100);
            }
          };
        });
      },
    },
    mounted() {
      this.mathContainer = this.$refs.mathContainer;
      this.loadMathJax();
    },

    updated() {
      this.renderMathJax();
    },
  };
</script>

<style scoped>
  .math-container {
    font-family: 'Times New Roman', serif;
    line-height: 1.6;
  }
</style>