この記事では、MathJaxで書いた数式の右端に、式番号を付ける方法を紹介します。また、自動番号付けによって無効化されてしまう左寄せや横スクロールバーを適切に設定方法なども紹介します。

この記事で紹介する方法は、WordPressのプラグイン「Simple MathJax」を使って、MathJaxを読み込んでいることを前提にしています。

WordPressで数式を書くプラグイン「Simple MathJax」の使い方

WordPressで数式を書くプラグイン「Simple MathJax」の使い方

この記事では、WordPressの投稿内で数式を書くためのプラグイン「Simple MathJax」の使い方を紹介します。

sj-note

この記事執筆時点（2022年12月）のWordPressはバージョン6.1、MathJaxはバージョン3.2です。

基本設定編　自動番号付け

式番号をすべての数式に付けるには、WordPressの管理メニュー「設定」の「Simple MathJax」を選択し、「Custom MathJax config」に下記のコードを記載します。

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

上記コードのうち、５行目の「tags: 'all'」が式番号を付けるためのコードです。

なお、「tags: 'all'」はすべての別行立て数式（displayed equations）に式番号をつけます。

一方、「tags: 'ams'」と記載すると区切り記号[...]に書いた別行立て数式には式番号がつかず、\begin{equation}...\end{equation}には式番号がつきます。（詳細は、MathJax公式サイトを参照）

📌NOTE
  • 自動番号付けの設定がなくても、式番号を付けることができます。
  • 下記のとおり、数式の後ろに\tex{3}と入力すると、式番号として「(３)」が表示されます。
1
2
3
\begin{equation}
    E=mc^2 \tag{3}
\end{equation}

Web上の表示は下記のとおり。

  • 自動番号付けが設定されていても、\tag{*}を記載すると、上書きされます。
  • 自動番号付けの連番は、\tag{*}の付いた式がないものとして付番されます。

応用設定編１　数式左寄せと自動番号付け

数式を左寄せにするためにCSSに下記コードを記載しても、自動番号付けをすると中央揃え（初期設定）になってしまいます。

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

しかし、「CSS」ではなく「Custom MathJax config」に下記のコードを記載すると、左寄せしつつ式番号を付けることができます。

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'
 }
};

8～11行目が左寄せのためのコードです。

10行目のdisplayIndentの値は、左インデントを示していますので、お好みの値に書き換えてください。

📌NOTE
  • ２行目の「loader: {load: ['ui/lazy']},」は、Web表示を高速化するための遅延組版（Lazy Typesetting）を組み込むコードです。
  • 詳細は、下記の記事をご覧ください。
MathJaxの「遅延組版（Lazy Typesetting）」を設定してWebサイトを高速化

MathJaxの「遅延組版（Lazy Typesetting）」を設定してWebサイトを高速化

この記事では、MathJaxの遅延組版（Lazy Typesetting）を設定する方法を紹介します。Web表示におけるMathJaxの処理時間が短くなりますので、Webサイトを高速化したい方にはお勧めの機能です。この記事で紹介する方法は、WordPressのプラグインを使ってMathJaxを読み込んでいることを前提にしています。

sj-note

応用設定編２　横スクロールバーと自動番号付け

長い数式を書くと、数式がコンテンツエリアからはみ出してしまうため、その対策として、横スクロールバーを設定するのが有効です。

しかし、CSSにコードを記載して横スクロールバーを表示するよう設定しても、自動番号付けのためのコードを記載すると横スクロールバーは表示されなくなります。

ところが、CSSにコードを記載せず横スクロールバーを追加すれば、横スクロールバーを表示しつつ自動番号付けできるようになります。

具体的には下記のコードをカスタムHTMLブロックにコピペします。

1
2
3
4
5
<div style="overflow-x: auto">
   \begin{equation}
      E=mc^2
   \end{equation}
</div>
📌NOTE
  • 長い数式に横スクロールバーを設定する方法の詳細は、下記の記事をご覧ください。
MathJaxの長い数式を横スクロールで表示する方法

MathJaxの長い数式を横スクロールで表示する方法

この記事では、下記の画像のようにMathJaxで書いた長い数式が、はみ出してしまう時の対策として、横スクロールで表示する設定方法を２つを紹介します。この記事執筆時点（2022年11月）のWordPressはバージョン6.1です。MathJaxはバージョン3.2です。

sj-note

その他の設定

ラベル付けと参照

下記コードのとおり、式の後ろに\label{...}を書くと、参照のためのラベルが付きます。

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

例えば、Web上での数式の表示は下記のとおりです。

文章中で参照するときは、\eqref{MyEQ1}と書けば、(1)のように括弧つきで表示されます

また、\ref{MyEQ1}と書けば、1 のように括弧なしで表示されます。

どちらも内部リンクになります。

数式の改行と、式番号の位置

数式を改行した場合、式番号の位置は２種類あります。

１つ目に紹介する下記のコードでは、式番号が上下方向の中央に配置されます。

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>

Webサイトでの表示は下記のとおりです。

２つ目に紹介する下記のコードでは、式番号が上下方向の下端に配置されます。

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>

Webサイトでの表示は下記のとおりです。

１ブロックに複数数式

区切り記号\begin{equation}...\end{equation}の中には数式を１つしか書けませんが、区切り記号\begin{align}...\end{align}ではコードを「\」2つで区切れば、複数の数式を書くことができます。

例えば、下記のとおり記載すると、１つのカスタムHTMLブロック内にある数式それぞれに式番号を付けることができます。

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>

Webサイトでの表示は下記のとおりです。

部分的に式番号なし

自動番号付けを設定してあっても、\notag または \nonumberを数式コードの後に記載すると、番号が付きません。

例えば、上述の区切り文字\begin{align}を使って記載した３つの数式のうち、２つ目の数式に式番号を付けない場合は、下記のコードとなります。

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>

Webサイトでの表示は下記のとおりです。