This article shows how to add equation numbers to the right end of the equations written in MathJax. It also includes information on how to properly set up left-justification and horizontal scrollbars, which are disabled by auto-numbering.

The method introduced in this article assumes that you have loaded MathJax using a WordPress plugin, Simple MathJax.

How to use Simple MathJax, a WordPress plug-in for math formulas

How to use Simple MathJax, a WordPress plug-in for math formulas

This article will show you how to use Simple MathJax, a WordPress plug-in for writing mathematical formulas within posts.

mago-note

As of this writing (November 2022), WordPress is version 6.1 and MathJax is version 3.2.

Automatic Numbering

To add formula numbers to all formulas, select “Simple MathJax” from the WordPress admin menu “Settings” and enter the following code in the “Custom MathJax config”.

1
2
3
4
5
6
7
MathJax = {
   tex: {
         inlineMath: [['$','$'], ['\\(','\\)']],
         processEscapes: true,
         tags: 'all'
   },
};

In the above code, tags: 'all' on the 5th line is the code for adding equation numbers.

Note that tags: 'all' will number all displayed equations.

If you write ‘ams’ instead of ‘all’, the displayed equations written in the delimiter \[...\] do not have equation numbers, but \begin{equation}...\end{equation} have an equation number. (For more information, see the MathJax official website)

📌NOTE
  • You can number equations even without the automatic numbering.
  • As shown below, adding \tex{3} after the equation displays (3) as the equation number.
1
2
3
\begin{equation}
    E=mc^2 \tag{3}
\end{equation}

The display on the website is as follows.

  • Even if autonumbering is set, \tag{*} will override it.
  • The automatic numbering leaves out equations with \tag{*} from its sequential number.

Left-alignment with auto-numbering

Even if you write the following code in CSS to align equations to the left, they will be centered (default setting) when automatic numbering is set.

1
2
3
4
div mjx-container[jax="CHTML"][display="true"] {
    text-align:left;
    text-indent:2em;
}

However, if you write the following code in Custom MathJax config instead of CSS, you can add numbers to the equations while aligning them to the left.

1
2
3
4
5
6
7
8
9
10
11
12
MathJax = {
   loader: {load: ['ui/lazy']},
   tex: {
         inlineMath: [['$','$'],['\\(','\\)']],
         processEscapes: true,
         tags: 'all'
   },
   chtml: {
         displayAlign: 'left',
         displayIndent: '1em'
 }
};

Lines 8 to 11 are the code for left alignment.

The value of displayIndent on line 10 indicates left indentation, so replace it with your preferred value.

📌NOTE
  • The second line, loader: {load: ['ui/lazy']},} is code to implement the lazy typesetting functionality to speed up Web display.
  • For more information, please see the article below.
How to set up Lazy Typesetting in MathJax

How to set up Lazy Typesetting in MathJax

This article shows how to set up lazy typesetting in MathJax. Lazy Typesetting speeds up your website by reducing MathJax processing time when loading your website. The methods in this article assume

mago-note

Horizontal scrollbars with auto-numbering

Long equations overflow the content area, so you should add horizontal scrollbars for them.

Even though you put the code in CSS to add horizontal scrollbars, the auto-numbering disables the horizontal scrollbars.

However, if you add horizontal scrollbars without writing the code in CSS, you can display the horizontal scrollbars while auto-numbering.

Specifically, copy and paste the following code into a custom HTML block.

1
2
3
4
5
<div style="overflow-x: auto">
   \begin{equation}
      E=mc^2
   \end{equation}
</div>
📌NOTE
  • For more information on how to add horizontal scrollbars to long equations, check out the article below.
How to add a horizontal scrollbar for the MathJax equation

How to add a horizontal scrollbar for the MathJax equation

This article introduces how to set up WordPress to display long MathJax equations in horizontal scrolling mode as a countermeasure for when the equations overflow, as shown in the image below. As

mago-note

Other settings

Labeling and referencing

As shown in the code below, putting \label{...} after an equation labels it for reference.

1
2
3
4
5
<div style="overflow-x: auto">
   \begin{equation}
      E=mc^2 \label{MyEQ1}
   \end{equation}
</div>

The display on the website is as follows.

When referring to it in a sentence, if you write \eqref{MyEQ1}, it will be displayed in parentheses like (1).

Also, if you write \ref{MyEQ1}, it will appear without parentheses, such as 1.

Both are internal links.

Line breaks in a equation and the position of the equation number

There are two types of equation number positions when you put line breaks in an equation.

The code, the first of which is shown below, places the expression number in the center of the vertical direction.

1
2
3
4
5
6
7
8
9
<div style="overflow-x: auto">
   \begin{equation}
      \begin{split}
         E_G =& 1+2+3+4+5+6+7+8+9+10\\
              & +11+12+13+14+15+16+17+18+19+20\\
              & +21+22+23+24+25+26+27+28+29+30
      \end{split}
   \end{equation}
</div>

The display on the website is as follows.

In the second code below, the expression number is placed at the bottom of the vertical direction.

1
2
3
4
5
6
7
<div style="overflow-x: auto">
   \begin{multline}
      E_G =& 1+2+3+4+5+6+7+8+9+10\\
           & +11+12+13+14+15+16+17+18+19+20\\
           & +21+22+23+24+25+26+27+28+29+30
   \end{multline}
</div>

The display on the website is as follows.

Multiple equations in one block

Only one equation can be written inside the delimiter \begin{equation}...\end{equation}, but the delimiter \begin{align}...\end{align} allows you to write multiple equations by separating the code with a double \.

If you put the code below in one custom HTML block, each equation will have an equation number.

1
2
3
4
5
6
7
<div style="overflow-x: auto">
   \begin{align}
      E_G &=\frac{1}{2}+1+2\\
      J &=\sum_{x=1}^{n}ax+b\\
      K &=3+4+5
   \end{align}
</div>

The display on the website is as follows.

Preventing the numbering

Even if you have automatic numbering set up, you can prevent numbering by putting \notag or \nonumber after the equation code.

In the following code, the second of the three formulas does not have an equation number.

1
2
3
4
5
6
7
<div style="overflow-x: auto">
   \begin{align}
      E_G &=\frac{1}{2}+1+2 \\
      J &=\sum_{x=1}^{n}ax+b \nonumber \\
      K &=3+4+5
   \end{align}
</div>

The display on the website is as follows.