MathJax配置行内语法后无法渲染$包裹的LaTeX公式如何解决

问题根因 #

你遇到的是MathJax版本与配置语法不兼容的问题：你引入的是3.x版本的MathJax资源，但使用的是2.x版本的配置写法，因此行内公式的解析规则没有生效。

修复步骤 #

需要调整两处代码：

• 将MathJax配置代码放在资源加载标签之前，避免异步加载的资源读取不到配置
• 替换为3.x版本支持的配置格式，不需要再使用text/x-mathjax-config类型的script标签，直接定义全局MathJax对象即可

正确完整代码示例 #

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0" >
        <title>MathJax Test</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
        <!-- 先写MathJax配置 -->
        <script>
        window.MathJax = {
          tex: {
            inlineMath: [['$', '$'], ['\\(', '\\)']],
            processEscapes: true // 开启后可通过\$转义表示普通美元符号，避免误解析
          }
        };
        </script>
        <!-- 再加载MathJax资源 -->
        <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
    </head>
    <body>
        <div class="container">
            非行内LaTeX示例：
            $$c^2 = a^2 + b^2$$
            行内LaTeX示例：$c^2 = a^2 + b^2$
        </div>
    </body>
</html>

修改后刷新页面即可正常渲染$包裹的行内公式。

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