如何在HTML中配置MathJax以支持$...$行内数学公式渲染

核心放置规则 #

MathJax 配置代码必须放在加载 MathJax 脚本的标签之前，推荐直接放置在 HTML 的 <head> 标签内即可生效。

完整HTML示例 #

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>MathJax公式测试</title>
  <!-- 先写入MathJax配置 -->
  <script>
    window.MathJax = {
      tex: {
        // 配置行内公式分隔符，可按需保留或删除默认的\( \)分隔符
        inlineMath: [['$', '$'], ['\\(', '\\)']]
      }
    };
  </script>
  <!-- 再加载MathJax脚本，可替换为你使用的本地路径/其他可用地址 -->
  <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
</head>
<body>
  <!-- 测试示例：$包裹的内容会被识别为行内公式 -->
  <p>勾股定理的表达式为$a^2 + b^2 = c^2$，是平面几何的基础定理之一。</p>
</body>
</html>

补充说明 #

• 如果你习惯把 MathJax 加载脚本放在 <body> 标签末尾，只需把配置代码放在该加载脚本的上方即可，无需强制放在 <head> 中，核心原则是配置代码的执行时机早于 MathJax 初始化。
• 如果你不需要 \( \) 作为行内公式分隔符，可直接把 inlineMath 配置修改为 inlineMath: [['$', '$']]。

内容的提问来源于stack exchange，提问作者Rata mágica