HTML中LaTeX渲染异常：<small>标签内公式未正常渲染

修改MathJax的引入代码，添加配置项确保扫描<small>标签及嵌套元素：

<script async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML"></script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  tex2jax: {
    inlineMath: [['$','$'], ['\\(','\\)']], // 保留两种行内公式分隔符
    processAll: true, // 强制处理所有元素，包括嵌套标签
    processEscapes: true
  }
});
</script>

如果processAll导致性能问题，可以给需要处理的<small>标签添加专属class，比如<small class="math-process">，然后在配置中指定processClass: 'math-process'。

2. 替换行内公式分隔符 #

将<small>内的$...$替换为\(...\)，MathJax对这个分隔符的兼容性更强，不易受标签嵌套影响。比如把$\int x dx$改成\(\int x dx\)。

3. 动态生成内容后手动触发渲染 #

如果是PHP循环动态生成内容后MathJax未扫描到，在内容插入DOM后执行以下JS代码，强制重新渲染：

MathJax.Hub.Queue(["Typeset", MathJax.Hub]);

若内容是异步加载的，就在内容加载完成的回调中执行这段代码。

4. 排查基础问题 #

• 检查PHP输出的源码，确保<small>内的LaTeX代码没有被转义（比如变成\$x^2\$），PHP输出时要保证$符号正常输出。
• 打开浏览器控制台，查看MathJax是否有报错信息，确认是否有元素被排除在处理范围外。

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