如何在基于浏览器的ESM模块中引入并使用MathJax？

问题原因 #

你之前直接调用MathJax.tex2svg时出现报错，是因为MathJax的ES5模块采用异步初始化机制，导入模块后方法并未立即可用，需要等待其启动完成才能调用相关API。

正确实现方式 #

方式一：使用预配置的tex-svg模块

直接导入预配置好的TeX转SVG模块，等待MathJax启动完成后调用方法：

import { MathJax } from 'mathjax/es5/tex-svg';

// 等待MathJax完成初始化
MathJax.startup.promise.then(() => {
  const mathText = String.raw`x^2 + y^2 = z^2`;
  const svgElement = MathJax.tex2svg(mathText);
  // 将生成的SVG添加到DOM中使用
  document.body.appendChild(svgElement);
});

方式二：手动配置MathJax（更灵活）

如果需要自定义配置（比如行内公式格式、SVG字体缓存等），可以手动导入核心模块并配置：

import { MathJax } from 'mathjax/es5/core';
import 'mathjax/es5/input/tex';
import 'mathjax/es5/output/svg';
import { browserAdaptor } from 'mathjax/es5/adaptors/browserAdaptor';
import { RegisterHTMLHandler } from 'mathjax/es5/handlers/html';

// 注册浏览器适配器
const adaptor = browserAdaptor();
RegisterHTMLHandler(adaptor);

// 自定义MathJax配置
MathJax.config({
  tex: {
    inlineMath: [['$', '$'], ['\\(', '\\)']], // 行内公式标识
    displayMath: [['$$', '$$'], ['\\[', '\\]']] // 块级公式标识
  },
  svg: {
    fontCache: 'global' // 启用全局字体缓存
  }
});

// 启动MathJax并等待完成
MathJax.startup.promise.then(() => {
  const svgElement = MathJax.tex2svg(String.raw`\sum_{n=1}^\infty \frac{1}{n^2} = \frac{\pi^2}{6}`);
  document.body.appendChild(svgElement);
});

注意事项 #

• esbuild打包时无需额外配置，只要正确导入MathJax模块即可，它会自动处理依赖树。
• 必须在调用tex2svg前等待MathJax.startup.promise完成，否则会出现方法未定义的错误。

内容的提问来源于stack exchange，提问作者naivedeveloper