升级MathJax v3后公式偏移至右侧并重叠，如何修复？

问题背景 #

基于Minimal Mistakes Jekyll主题搭建的个人博客，原使用MathJax v2可正常渲染LaTeX公式，通过官方转换工具生成v3配置升级后，出现公式偏移至页面右侧、与上方文本重叠的显示问题。

原MathJax v2配置 #

MathJax.Hub.Config({
  tex2jax: {
    inlineMath: [['$', '$'], ['\\(', '\\)']],
    displayMath: [['$$', '$$'], ['\\[', '\\]']],
    processEscapes: true,
    processEnvironments: true
  },
  CommonHTML: { linebreaks: { automatic: true } },
  "HTML-CSS": { linebreaks: { automatic: true } },
  SVG: { linebreaks: { automatic: true } }
});

升级后的MathJax v3配置 #

MathJax = {
  tex: {
    inlineMath: [['$', '$'], ['\\(', '\\)']],
    displayMath: [['$$', '$$'], ['\\[', '\\]']],
    processEscapes: true,
    processEnvironments: true
  },
  chtml: {
    linebreaks: { automatic: true }
  },
  svg: {
    linebreaks: { automatic: true }
  }
};

公式示例 #

行内公式：$E=mc^2$
块级公式：
$$
\sum_{n=1}^\infty \frac{1}{n^2} = \frac{\pi^2}{6}
$$

修复方案 #

1. 添加自定义CSS修正布局冲突 #

在主题的assets/css/main.scss中追加以下样式，强制修正MathJax容器的对齐与间距：

/* 修复MathJax v3公式布局问题 */
mjx-container[display="true"] {
  margin: 1em 0 !important;
  text-align: center !important;
  width: 100% !important;
}

mjx-container[display="false"] {
  vertical-align: middle !important;
}

.post-content mjx-container {
  float: none !important;
  clear: both !important;
}

2. 优化MathJax v3配置输出属性 #

修改MathJax配置，明确设置显示对齐方式与容器宽度，避免主题样式覆盖：

MathJax = {
  tex: {
    inlineMath: [['$', '$'], ['\\(', '\\)']],
    displayMath: [['$$', '$$'], ['\\[', '\\]']],
    processEscapes: true,
    processEnvironments: true
  },
  chtml: {
    linebreaks: { automatic: true },
    displayAlign: 'center',
    displayIndent: '0'
  },
  svg: {
    linebreaks: { automatic: true },
    displayAlign: 'center',
    displayIndent: '0'
  },
  options: {
    renderActions: {
      postTypeset: [100, doc => {
        document.querySelectorAll('mjx-container').forEach(el => {
          el.style.width = '100%';
        });
      }, '', false]
    }
  }
};

3. 排查主题内容块样式 #

检查主题文章区域的CSS，确保没有设置float: right、overflow: hidden等会干扰MathJax容器的属性，若存在则针对性添加排除规则。

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