如何预渲染含MathJax的HTML？实现服务端MathJax转HTML

云原生阿岚

2026-7-31

服务端预渲染MathJax HTML的Node.js实现方案

核心思路

用Node.js结合无头浏览器工具（如Puppeteer）模拟浏览器环境，加载带有原有MathJax配置的HTML，等待MathJax完成公式渲染后，提取最终的HTML内容，得到无需依赖JS就能显示的静态文件。

具体操作步骤

安装依赖
首先安装Puppeteer（用于模拟浏览器），Node.js内置的fs模块负责文件读写，无需额外安装：
```
npm install puppeteer
```

编写预渲染脚本
以下是可直接复用的脚本示例，会沿用你已配置好的MathJax规则：

const puppeteer = require('puppeteer');
const fs = require('fs');

async function preRenderMathJax() {
  // 读取包含MathJax配置和公式的原始HTML文件
  const rawHtml = fs.readFileSync('./input.html', 'utf8');
  
  // 启动无头浏览器
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  
  // 加载HTML并等待MathJax完成渲染
  await page.setContent(rawHtml);
  // 利用MathJax 3.x的typesetPromise确保渲染完成（2.x版本需调整逻辑）
  await page.waitForFunction(() => {
    return window.MathJax ? window.MathJax.typesetPromise().then(() => true) : false;
  });
  
  // 获取渲染后的完整HTML
  const renderedHtml = await page.content();
  
  // 将结果写入输出文件
  fs.writeFileSync('./output.html', renderedHtml, 'utf8');
  
  await browser.close();
  console.log('预渲染完成，已生成静态HTML文件');
}

// 执行预渲染
preRenderMathJax();

适配不同MathJax版本

如果你用的是MathJax 2.x，需要将等待逻辑替换为监听MathJax.Hub的完成事件：

await page.waitForFunction(() => {
  return new Promise(resolve => {
    window.MathJax.Hub.Queue(['Typeset', window.MathJax.Hub], () => resolve(true));
  });
});