Math extension: support alignment of multiple equations for MathJAX.

This is a follow-up commit of #2254, which supported alignment of
multiple equations for imgmath and LaTeX output.

2 files changed, 25 insertions, 11 deletions

diff --git a/sphinx/ext/mathjax.py b/sphinx/ext/mathjax.py
index 511c4f3dd..325003d0c 100644
--- a/sphinx/ext/mathjax.py
+++ b/sphinx/ext/mathjax.py
@@ -35,21 +35,24 @@ def html_visit_displaymath(self, node):
         self.body.append('</div>')
         raise nodes.SkipNode
 
+    # necessary to e.g. set the id property correctly
+    if node['number']:
+        self.body.append('<span class="eqno">(%s)</span>' % node['number'])
+    self.body.append(self.builder.config.mathjax_display[0])
     parts = [prt for prt in node['latex'].split('\n\n') if prt.strip()]
+    if len(parts) > 1:  # Add alignment if there are more than 1 equation
+        self.body.append(r' \begin{align}\begin{aligned}')
     for i, part in enumerate(parts):
         part = self.encode(part)
-        if i == 0:
-            # necessary to e.g. set the id property correctly
-            if node['number']:
-                self.body.append('<span class="eqno">(%s)</span>' %
-                                 node['number'])
-        if '&' in part or '\\\\' in part:
-            self.body.append(self.builder.config.mathjax_display[0] +
-                             '\\begin{split}' + part + '\\end{split}' +
-                             self.builder.config.mathjax_display[1])
+        if r'\\' in part:
+            self.body.append(r'\begin{split}' + part + r'\end{split}')
         else:
-            self.body.append(self.builder.config.mathjax_display[0] + part +
-                             self.builder.config.mathjax_display[1])
+            self.body.append(part)
+        if i < len(parts) - 1:  # append new line if not the last equation
+            self.body.append(r'\\')
+    if len(parts) > 1:  # Add alignment if there are more than 1 equation
+        self.body.append(r'\end{aligned}\end{align} ')
+    self.body.append(self.builder.config.mathjax_display[1])
     self.body.append('</div>\n')
     raise nodes.SkipNode
 
diff --git a/tests/test_ext_math.py b/tests/test_ext_math.py
index d72da7934..be90dfe9c 100644
--- a/tests/test_ext_math.py
+++ b/tests/test_ext_math.py
@@ -44,6 +44,17 @@ def test_imgmath_svg(app, status, warning):
     assert re.search(html, content, re.S)
 
 @with_app('html', testroot='ext-math',
+          confoverrides={'extensions': ['sphinx.ext.mathjax']})
+def test_mathjax_align(app, status, warning):
+    app.builder.build_all()
+
+    content = (app.outdir / 'index.html').text()
+    html = (r'<div class="math">\s*'
+            r'\\\[ \\begin\{align\}\\begin\{aligned\}S \&amp;= \\pi r\^2\\\\'
+            r'V \&amp;= \\frac\{4\}\{3\} \\pi r\^3\\end\{aligned\}\\end\{align\} \\\]</div>')
+    assert re.search(html, content, re.S)
+
+@with_app('html', testroot='ext-math',
           confoverrides={'math_number_all': True,
                          'extensions': ['sphinx.ext.mathjax']})
 def test_math_number_all(app, status, warning):