How to left align certain equations in MathJax

问题

So, by default MathJax equations are centered, but I want to left align certain equations. I know how to make ALL equations left aligned with MathJax.Hub.Config, but this is not what I want.

I've tried other code found on the web, such as the following:

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

then wrapped a div around the equation with an id of leqn, like so:

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

This does not work and I don't know enough about MathJax or even JS to have any idea as to what I'm doing wrong. Any ideas?

回答1:

There's no elegant way for doing this using TeX input. The approach will vary with the use cases. Here you seem to be able to wrap HTML around those equations you want to align to the left. For this you are generally on the right track. Here's what would need fixing:

use the correct way of hooking into MathJax's internals
have MathJax ignore the relevant equations on the first round of typesetting by adding class="tex2jax_ignore"
remove that class, change the configuration, and have MathJax typeset the rest

Below is one way of doing that.

You can configure other class names, see the docs.
It's a bit more complicated because of SO's restrictions on external resources in snippets (no query strings allowed so I'm injecting it "manually") -- in your page, just use the window.MathJax part and load it before you load 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:

The reason why your original approach didn't work is that the equation has already been typeset during the initial typesetting pass performed by MathJax, and your call to MathJax.Hub.Typeset() doesn't re-typeset existing math, but only typesets new math since the last typeset call. So the math is left as it was.

Instead, you could use MathJax.Hub.Rerender(["leqn"]) to have the math re-rendered with the new displayAlign setting.

That being said, Peter's approach is better, since it doesn't require the math to be typeset twice. I provide a slight refinement to his approach below. Rather than using tex2jax_ignore and having to go back and remove that from all the elements that have that class, you can add leqn to the ignored classes, and then remove it again before the second typesetting pass. Here is the code:

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: Here is another approach that uses a post-filter for the TeX input jax that sets the indentalign property of the underlying MathML based on the class of the parent element (you could also use ID, but remember that ID's need to be unique, so you would have to use a different ID for each equation, which is why classes are better).

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

It would also be possible to add a macro to the TeX input jax that would allow you to specify the indentalign property, but that would be a little more work.

来源：https://stackoverflow.com/questions/30077862/how-to-left-align-certain-equations-in-mathjax

标签

javascript

mathjax