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

时间:2015-05-06 13:13:25

标签: javascript mathjax

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

我已尝试在网络上找到其他代码,例如:

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

然后用等式为leqn的等式包围一个div,如下所示:

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

这不起作用,我对MathJax甚至JS都知之甚少,不知道我做错了什么。有什么想法吗?

3 个答案:

答案 0 :(得分:2)

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

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

话虽这么说,Peter的方法更好,因为它不需要数学排版两次。我对下面的方法稍作改进。您可以将tex2jax_ignore添加到忽略的类中,然后在第二次排版过程之前再次删除它,而不是使用leqn并且必须返回并从具有该类的所有元素中删除它。这是代码:

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$$

编辑:这是另一种方法,它使用TeX输入jax的后置过滤器,根据父元素的类设置基础MathML的indentalign属性(你也可以使用ID,但请记住ID需要是唯一的,因此您必须为每个等式使用不同的ID,这就是为什么类更好的原因。)

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属性,但这样做会更多。

答案 1 :(得分:1)

使用TeX输入执行此操作并不优雅。该方法将根据使用情况而有所不同。在这里,您似乎能够围绕要左对齐的方程式包装HTML。为此,您通常走在正确的轨道上。这是需要修复的内容:

  • 使用正确的方法连接到MathJax的内部
  • 通过添加class="tex2jax_ignore"
  • 让MathJax忽略第一轮排版的相关公式
  • 删除该类,更改配置,并让MathJax排版其余的

以下是一种方法。

  • 您可以配置其他类名see the docs
  • 由于SO对片段中的外部资源的限制(没有允许查询字符串,所以我“手动”注入它),这有点复杂了 - 在您的页面中,只需使用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$$

答案 2 :(得分:0)

覆盖CSS样式可能会起作用:

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