服务器端如何直接对HTML字符串进行MathJax排版？

核心思路 #

利用mathjax-full的HTML处理器自动扫描文档中的公式分隔符，通过配置跳过代码块等无需处理的区域，同时正确使用DOM适配器（LiteDOM或JSDOM）加载目标HTML并执行排版，无需手动识别分隔符。

方案一：使用LiteDOM适配器（轻量无浏览器依赖） #

步骤与代码示例

1. 初始化MathJax并注册LiteDOM适配器
2. 配置TeX输入规则与CommonHTML输出参数
3. 正确设置文档body的innerHTML（解决你之前的LiteDOM使用问题）
4. 配置跳过代码块标签，执行排版并获取处理后的HTML

const { MathJax } = require('mathjax-full/js/mathjax.js');
const { LiteDOM } = require('mathjax-full/js/adaptors/liteDOM.js');
const { TeX } = require('mathjax-full/js/input/tex.js');
const { CHTML } = require('mathjax-full/js/output/chtml.js');
const { RegisterHTMLHandler } = require('mathjax-full/js/handlers/html.js');
const { AllPackages } = require('mathjax-full/js/input/tex/AllPackages.js');

// 注册HTML处理器与LiteDOM适配器
const adaptor = new LiteDOM();
RegisterHTMLHandler(adaptor);

// 配置TeX输入（加载所有扩展包，定义公式分隔符）
const texInput = new TeX({
  packages: AllPackages,
  inlineMath: [['\\(', '\\)']],
  displayMath: [['\\[', '\\]']]
});

// 配置CommonHTML输出（字体路径可替换为本地部署地址）
const chtmlOutput = new CHTML({
  fontURL: 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/output/chtml/fonts/woff-v2'
});

// 创建MathJax文档实例
const mathjaxDoc = MathJax.document('', { InputJax: texInput, OutputJax: chtmlOutput });

// 设置待处理的HTML内容
const rawHTML = `
<p>行内公式示例：\\(E=mc^2\\)</p>
<pre><code>代码块中的\\(a+b\\)不会被解析</code></pre>
<p>块级公式示例：\\[\\int_0^\\infty e^{-x} dx = 1\\]</p>
`;
// 关键：通过适配器获取文档body并设置innerHTML
adaptor.body(mathjaxDoc.document).innerHTML = rawHTML;

// 配置跳过代码块标签，避免解析其中的TeX内容
mathjaxDoc.options.skipTags = ['pre', 'code'];

// 执行排版
MathJax.typeset([mathjaxDoc]);

// 获取处理后的最终HTML
const processedHTML = adaptor.innerHTML(adaptor.body(mathjaxDoc.document));
console.log(processedHTML);

方案二：使用JSDOM适配器（更贴近浏览器环境） #

如果服务端环境允许，JSDOM的API更直观，和浏览器端操作DOM的方式一致，降低学习成本：

const { JSDOM } = require('jsdom');
const { MathJax } = require('mathjax-full/js/mathjax.js');
const { Adaptor } = require('mathjax-full/js/adaptors/jsdom.js');
const { TeX } = require('mathjax-full/js/input/tex.js');
const { CHTML } = require('mathjax-full/js/output/chtml.js');
const { RegisterHTMLHandler } = require('mathjax-full/js/handlers/html.js');
const { AllPackages } = require('mathjax-full/js/input/tex/AllPackages.js');

// 创建JSDOM实例
const dom = new JSDOM('');
const adaptor = new Adaptor(dom.window);
RegisterHTMLHandler(adaptor);

// 配置TeX输入与CHTML输出
const texInput = new TeX({
  packages: AllPackages,
  inlineMath: [['\\(', '\\)']],
  displayMath: [['\\[', '\\]']]
});
const chtmlOutput = new CHTML({
  fontURL: 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/output/chtml/fonts/woff-v2'
});

// 关联JSDOM文档与MathJax
const mathjaxDoc = MathJax.document(dom.window.document, { InputJax: texInput, OutputJax: chtmlOutput });

// 设置待处理HTML
const rawHTML = `
<p>行内公式：\\(a^2 + b^2 = c^2\\)</p>
<code>代码中的\\(x+y\\)不解析</code>
<p>块级公式：\\[\\sum_{n=1}^\\infty \\frac{1}{n^2} = \\frac{\\pi^2}{6}\\]</p>
`;
dom.window.document.body.innerHTML = rawHTML;

// 跳过代码块标签
mathjaxDoc.options.skipTags = ['code', 'pre'];

// 执行排版
MathJax.typeset([mathjaxDoc]);

// 获取结果
const processedHTML = dom.window.document.body.innerHTML;
console.log(processedHTML);

关键注意事项 #

• 避免渲染差异：确保服务端与客户端使用完全一致的MathJax配置（包括公式分隔符、加载的扩展包、跳过的标签）。
• 字体路径：如果服务端离线部署，需将fontURL替换为本地字体文件的路径，避免依赖CDN。
• 自定义排除规则：除了skipTags，还可通过ignoreClasses配置忽略带特定类名的元素，比如ignoreClasses: ['no-mathjax']，灵活控制不解析的区域。

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