如何在无网络无第三方安装的HTML页面中本地调用MathJax？

问题背景 #

应用HTML UI无法通过CDN访问第三方JS库，需离线部署MathJax 3.2.2，无需用户额外安装即可渲染LaTeX公式，当前尝试的HTML代码无法正常工作：

<!DOCTYPE html>
<html>
<head>
  <title>MathJax Example</title>
  <script src="MathJax-src-3.2.2\components\src\tex-chtml/tex-chtml.js" id="MathJax-script" async></script>
</head>
<body>
  <h1>Equation:</h1>
  <div id="equation">
    $$ y = \frac{{\sin(x^2)}}{{\cos(2x)}} $$
  </div>
  <script>
    MathJax.Hub.Queue(["Typeset",MathJax.Hub,"equation"]);
  </script>
</body>
</html>

核心问题分析 #

1. 引用未编译源码文件：下载的MathJax-src-3.2.2.zip是源码包，其中的tex-chtml.js是未编译的开发文件，无法直接在浏览器运行，需使用预构建的发行版文件。
2. API版本不兼容：MathJax.Hub.Queue是MathJax 2.x的API，3.x已完全重构，语法无法兼容。
3. 路径分隔符混用：HTML路径中同时使用\和/，会导致浏览器无法正确解析文件位置。

分步解决方案 #

1. 获取可直接使用的MathJax文件 #

• 若不想构建源码：直接下载MathJax 3.2.2的预构建发行包（解压后包含完整可运行文件）。
• 若使用已下载的源码包：进入MathJax-src-3.2.2目录，执行npm install && npm run build完成构建，构建后dist目录下的文件即为可直接使用的版本。
• 将获取的文件放在应用目录下，比如命名为mathjax文件夹。

2. 修正HTML代码（适配3.x离线使用） #

以下是可直接运行的离线示例代码，假设mathjax文件夹与HTML文件同级：

<!DOCTYPE html>
<html>
<head>
  <title>MathJax Offline Example</title>
  <!-- 引用预构建的tex-chtml入口脚本 -->
  <script src="mathjax/es5/tex-chtml.js" id="MathJax-script" async></script>
  <!-- 配置MathJax，指定本地资源路径 -->
  <script>
    MathJax = {
      tex: {
        inlineMath: [['$', '$'], ['\\(', '\\)']],
        displayMath: [['$$', '$$'], ['\\[', '\\]']]
      },
      chtml: {
        // 指向本地字体文件目录，确保路径正确
        fontURL: 'mathjax/es5/output/chtml/fonts/woff-v2'
      }
    };
  </script>
</head>
<body>
  <h1>Equation:</h1>
  <div id="equation">
    $$ y = \frac{\sin(x^2)}{\cos(2x)} $$
  </div>
  <!-- 手动触发指定元素渲染（可选，默认MathJax会自动渲染页面所有公式） -->
  <script>
    MathJax.startup.promise.then(() => {
      MathJax.typeset(['#equation']);
    });
  </script>
</body>
</html>

3. 关键注意事项 #

• 文件完整性：确保mathjax目录下的es5、output等子目录完整，尤其是字体文件不能缺失，否则公式会显示为方块或异常字符。
• 路径正确性：所有资源路径统一使用/分隔，根据实际文件层级调整路径。
• API适配：彻底放弃2.x的MathJax.Hub相关方法，使用3.x的MathJax.startup.promise和MathJax.typeset进行渲染控制。

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