Blogger主题中MathJax嵌入代码自动编码致公式失效求助

问题根源 #

Blogger主题编辑器会自动转义JavaScript中的特殊字符（如单引号、反斜杠），移除CDATA块，甚至将标准<script>闭合标签改为自闭合格式，同时可能过滤<b:if>条件标签，这些操作都会破坏MathJax的配置结构，导致公式无法正常渲染。

修复方案 #

替换为以下代码，通过核心规则避免编辑器的自动编码：

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <script type="text/javascript">
  //<![CDATA[
  window.MathJax = {
    tex: {
      inlineMath: [['$', '$'], ['\\(', '\\)']],
      displayMath: [['$$', '$$'], ['\\[', '\\]']],
      packages: ['base', 'ams', 'mhchem']
    },
    options: {
      renderActions: {
        addMenu: []
      }
    }
  };
  //]]>
  </script>
  <script async='async' src='https://polyfill.io/v3/polyfill.min.js?features=es6'></script>
  <script async='async' id='MathJax-script' src='https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js'></script>
</b:if>

关键修复细节 #

• 用CDATA保护脚本内容：//<![CDATA[ 和 //]]> 包裹MathJax配置代码，告诉Blogger编辑器这段内容是纯文本，无需解析转义内部的引号、反斜杠等特殊字符
• 保留标准script闭合标签：必须使用完整的</script>结尾，避免自闭合的<script .../>格式，确保浏览器正确识别脚本加载边界
• 保留<b:if>条件标签：确保MathJax仅在文章详情页加载，减少不必要的资源消耗
• 规范HTML属性转义：标签属性中的引号用"转义，符合HTML语法规范，避免编辑器误处理

内容的提问来源于stack exchange，提问作者Lê Phong Nguyễn