MathJax 3：更改 CSS 样式

Question

MathJax 3 加载一些内联 CSS，例如

mjx-container[jax="CHTML"][display="true"] {
  display: block;
  text-align: center;
  margin: 1em 0;
}

假设我不需要边距，那么我可以添加到我的样式表中：

mjx-container[jax="CHTML"][display="true"] {
  margin: 0 !important;
}

对于上面的例子有更好的解决方案吗？我可以修改配置中的样式吗（

window.MathJax = {}

），以便加载的内联样式是正确的并且不必被覆盖？

Answer 1

你可以使用

<script>
MathJax = {
  startup: {
    ready() {
      var CHTMLmath = MathJax._.output.chtml.Wrappers.math.CHTMLmath;
      delete CHTMLmath.styles['mjx-container[jax="CHTML"][display="true"]'].margin;
      MathJax.startup.defaultReady();
    }
  }
}
</script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>

Above
$$\text{Math Display}$$
Below

删除边距设置。或者您可以使用

显式设置边距

      CHTMLmath.styles['mjx-container[jax="CHTML"][display="true"]'].margin = '0';

我认为这应该对你有用。

Answer 2

MathJax 4.0.0 beta 更新

属性

CHTMLmath

已重命名为

ChtmlMath

。

<script>
MathJax = {
  startup: {
    ready() {
      var CHTMLmath = MathJax._.output.chtml.Wrappers.math.ChtmlMath;
      delete CHTMLmath.styles['mjx-container[jax="CHTML"][display="true"]'].margin;
      MathJax.startup.defaultReady();
    }
  }
}
</script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>

Above
$$\text{Math Display}$$
Below

要为边距设置设置另一个值，请将以

delete

开头的行替换为以下内容：

      CHTMLmath.styles['mjx-container[jax="CHTML"][display="true"]'].margin = '0';

响应改编自Davide的https://stackoverflow.com/a/65478760/13733324