如何在 MathJax 中左对齐某些方程式

Question

因此，默认情况下 MathJax 方程居中，但我想左对齐某些方程。我知道如何使所有方程左对齐 MathJax.Hub.Config，但这不是我想要的。

我试过在网上找到的其他代码，例如：

<script type="text/javascript">
  MathJax.Hub.Queue(function () {
      MathJax.Hub.Config({displayAlign:"left"});
      MathJax.Hub.Typeset(["leqn"]);
    });
 </script>

然后用一个 id 为 leqn 的等式包裹一个 div，像这样：

<div id="leqn">$$e^{\pi i} - 1 = 0$$</div>

这是行不通的，我对 MathJax 甚至 JS 的了解都不够，无法知道我做错了什么。有什么想法吗？

Answer 1

没有使用 TeX 输入来执行此操作的优雅方法。该方法将因用例而异。在这里，您似乎可以将 HTML 环绕在您想要左对齐的那些方程式周围。为此，您通常走在正确的轨道上。以下是需要修复的内容：

使用正确的方式连接到 MathJax 的内部
通过添加 class="tex2jax_ignore"
删除 class，更改配置，并让 MathJax 排版其余部分

下面是一种方法。

您可以配置其他 class 个名称，see the docs。
有点复杂，因为 SO 对代码片段中的外部资源有限制（不允许查询字符串，所以我将其注入 "manually"）——在您的页面中，只需使用 window.MathJax部分并在加载之前加载它 MathJax.js.

      window.MathJax = {
        AuthorInit: function() {
          MathJax.Hub.Register.StartupHook("Begin", function() {
            MathJax.Hub.Queue(function() {
              var elements = document.getElementsByClassName('tex2jax_ignore');
              for (var i = 0; i < elements.length; i++) {
                elements[i].classList.remove('tex2jax_ignore');
              }
              MathJax.Hub.Config({
                displayAlign: "left"
              });
              MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
            });
          });
        }
      };

      (function(d, script) {
        script = d.createElement('script');
        script.type = 'text/javascript';
        script.src = 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_HTML-full';
        d.getElementsByTagName('head')[0].appendChild(script);
      }(document));

$$e^{\pi i} - 1 = 0$$
<span class="tex2jax_ignore">$$e^{\pi i} - 1 = 0$$</span>
$$e^{\pi i} - 1 = 0$$

Answer 2

您原来的方法不起作用的原因是方程式在 MathJax 执行的初始排版过程中已经排版，并且您对 MathJax.Hub.Typeset() 的调用不会重新排版现有数学，但自上次排版调用以来仅排版 new 数学。所以数学保持原样。

相反，您可以使用 MathJax.Hub.Rerender(["leqn"]) 使用新的 displayAlign 设置重新呈现数学。

也就是说，Peter 的方法更好，因为它不需要将数学排版两次。我在下面对他的方法进行了细微的改进。不必使用 tex2jax_ignore 并且必须返回并从所有具有 class 的元素中删除它，您可以将 leqn 添加到被忽略的 classes，然后删除在第二次排版之前再次使用它。这是代码：

MathJax = {
  tex2jax: {ignoreClass: "tex2jax_ignore|leqn"},
  AuthorInit: function() {
    MathJax.Hub.Register.StartupHook("End",function () {
      MathJax.Hub.Queue(function () {
        MathJax.Hub.Config({
          tex2jax: {ignoreClass: "tex2jax_ignore"},
          displayAlign: "left"
        });
        return MathJax.Hub.Typeset();
      });
    });
  }
};

(function(d, script) {
  script = d.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML-full';
  d.getElementsByTagName('head')[0].appendChild(script);
}(document));

$$e^{\pi i} - 1 = 0$$
<span class="leqn">$$e^{\pi i} - 1 = 0$$</span>
$$e^{\pi i} - 1 = 0$$

EDIT：这是另一种方法，它使用 post-过滤器来设置 indentalign 属性的 TeX 输入 jax基于父元素 class 的底层 MathML（您也可以使用 ID，但请记住 ID 必须是唯一的，因此您必须为每个方程使用不同的 ID，这就是为什么 classes 更好）。

MathJax = {
  AuthorInit: function() {
    MathJax.Hub.Register.StartupHook("TeX Jax Ready",function () {
      MathJax.InputJax.TeX.postfilterHooks.Add(function (data) {
        if (data.script.parentNode.className === "leqn")
          data.math.root.indentalign = "left";
      });
    });
  }
};

(function(d, script) {
  script = d.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML-full';
  d.getElementsByTagName('head')[0].appendChild(script);
}(document));

$$e^{\pi i} - 1 = 0$$
<span class="leqn">$$e^{\pi i} - 1 = 0$$</span>
$$e^{\pi i} - 1 = 0$$

也可以在 TeX 输入 jax 中添加一个宏，允许您指定 indentalign 属性，但这会多一些工作。

Answer 3

覆盖 css 样式可能会起作用：

<style>
    mjx-container {text-align: left !important;}
</style>

如何在 MathJax 中左对齐某些方程式

How to left align certain equations in MathJax

javascript

mathjax