WordPressでMathJax 3を使ってみる

2020年3月28日2020年9月5日WebサイトWordPress

ウェブサイト上で数式を表示するのは大変で、ベタに文字で「x=a/b+c」などと書いても読みづらいですし、何よりダサいですね。また、行列や積分などは事実上書けないでしょう。

そんな人のためにMathJaxというものがあります。MathJaxは、LaTeX形式で数式を入力するときれいな数式を表示してくれるもので、例えば前述の式はインライン表示では「$x=a/b+c $」と表示できますし、次のような積分の式もきれいに書けます。
$$ F(\omega)=\int_{-\infty}^\infty f(t)\cdot e^{-i \omega t}dt$$

今回、WordPressでMathJaxを使えるように準備してみました。プラグインなどを入れても良いでしょうが、WordPressの「再利用ブロック」を使うと、プラグインを入れなくても比較的簡単にMathJaxが使えますので、その方法を紹介します。

1. やりたいこと
2. 再利用ブロックを準備する
3. 使い方
- 3.1. 記事にスクリプト読み込みブロックを挿入する
- 3.2. 数式を書く
4. MathJaxの設定について
- 4.1. 式の区切り文字（デリミタ）を変更する
- 4.2. 式番号を振る
5. 補足
6. 追記：2020/4/3
7. さらに追記：2020/4/10

やりたいこと

WordPressの記事中できれいな数式が書けるように、ページにMathJaxを読み込みます。

MathJaxを使っていないページでMathJaxのスクリプトを読み込むのは無駄がありますし、想定外の記事でMathJaxが動いてしまうのも困るので、記事ごとにスクリプトを読み込むか選択できるようにします。

再利用ブロックを準備する

WordPressには「再利用ブロック」という機能があります。これは、記事中に差し込むテンプレートを事前に定義しておいて、使いたいときに数クリックで呼び込める機能です。再利用ブロックを編集すると、それを読み込んでいるすべてのページで内容が書き換わります。

MathJaxを使用するには、MathJaxのスクリプトをページ中で呼び込む必要があります。今回はMathJaxスクリプトを読み込む再利用ブロックを作成し、各記事で再利用ブロックを呼ぶ、という形にしたいと思います。

スクリプトの読み込みは、カスタムHTMLブロックで行いますので、まずは記事編集画面でカスタムHTMLブロックを選択します。

ブロック中に、スクリプト読み込みのコードを記述します。

MathJax公式サイトにあるとおり、こんなコードを記述します。

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async="" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

コードを書いたら、上部のメニューから「再利用ブロックに追加」をクリックします。

再利用ブロックの名前を入力して保存します。

これで再利用ブロックの作成は終わりました。

使い方

記事にスクリプト読み込みブロックを挿入する

記事中で数式を書きたい場合は、合わせてMathJaxのスクリプトを読み込みます。スクリプトの読み込みといっても、前述の再利用ブロックを挿入すれば良いので、記事中のどこかに再利用ブロックを入れておきます。

このブロックは表示されませんので、記事の最初でも最後でも、どこでも良いと思います。

数式を書く

再利用ブロックを入れたら、後は数式を書くだけです。通常の段落ブロック内に、特定の記号で挟んで数式を入力します。

以下、記入例のバックスラッシュは、環境によっては円マークとして表示されるかもしれませんが、どちらも意味は同じです。

インライン数式

インライン数式は、文章の途中に数式を入れ込む形式です。$数式$の形式で入力します。例えば、

\(t\) 秒後の位置は \(x= \frac{1}2 a t^2+v_0 t+x_0\) です。

と入力すると、

$t$ 秒後の位置は $x= \frac{1}2 a t^2+v_0 t+x_0$ です。

と表示されます。

ディスプレイ数式

ディスプレイ数式は、改行を入れて数式を独立した行に表示する形式です。\[数式\]か$$数式$$の形式で入力します。例えば、

\(t\) 秒後の位置は \[x= \frac{1}2 a t^2+v_0 t+x_0\] です。

と入力すると、

$t$ 秒後の位置は \[x= \frac{1}2 a t^2+v_0 t+x_0\] です。

と表示されます。

MathJaxの設定について

MathJaxの読み込みスクリプトの前に設定ブロックを書くことができます。例えば、MathJaxのヘルプの設定テンプレートをそのまま使う場合は、WordPressの再利用ブロックを下記のように書き換えます。

<script>
  MathJax = {
    tex: {
      packages: ['base'],        // extensions to use
      inlineMath: [              // start/end delimiter pairs for in-line math
        ['\\(', '\\)']
      ],
      displayMath: [             // start/end delimiter pairs for display math
        ['$$', '$$'],
        ['\\[', '\\]']
      ],
      processEscapes: true,      // use \$ to produce a literal dollar sign
      processEnvironments: true, // process \begin{xxx}...\end{xxx} outside math mode
      processRefs: true,         // process \ref{...} outside of math mode
      digits: /^(?:[0-9]+(?:\{,\}[0-9]{3})*(?:\.[0-9]*)?|\.[0-9]+)/,
                                 // pattern for recognizing numbers
      tags: 'none',              // or 'ams' or 'all'
      tagSide: 'right',          // side for \tag macros
      tagIndent: '0.8em',        // amount to indent tags
      useLabelIds: true,         // use label name rather than tag for ids
      multlineWidth: '85%',      // width of multline environment
      maxMacros: 1000,           // maximum number of macro substitutions per expression
      maxBuffer: 5 * 1024,       // maximum size for the internal TeX string (5K)
      baseURL:                   // URL for use with links to tags (when there is a <base> tag in effect)
         (document.getElementsByTagName('base').length === 0) ?
          '' : String(document.location).replace(/#.*$/, ''))
    }
  };
</script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async="" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

私はtagsをamsにする設定だけ入れた、下記のような再利用ブロックにしています。

<script>
  MathJax = {
    tex: {
      tags: 'ams',              // or 'ams' or 'all'
    }
  };
</script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async="" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

式の区切り文字（デリミタ）を変更する

MathJaxに「ここは数式だよ」と知らせる区切り文字は変更できます。該当する設定が、上記記入例の「inlineMath」と「displayMath」の部分で、この設定だと前述の通り$数式$でインライン数式が、\[数式\]か$$数式$$でディスプレイ数式が表示されます。（ \ がJavaScriptの特殊文字のため、設定中では \\ とエスケープして入力されていることに注意してください）

例えば、インライン数式の区切り文字を変更して、 $数式$ と $数式$ で数式表示させるようにするには、inlineMathを下記のように変更します。

inlineMath: [ ['$', '$'], ['\\(', '\\)'] ],

式番号を振る

「tags」の設定を変更すると、ディスプレイ数式に対して式番号を振ることができます。

すべてのディスプレイ数式に式番号を振るにはtags:'all',に変更します。AMSmath方式で番号を振るにはtags:'ams',に変更します。このページでは、後者の設定にしています。

後者の場合は\begin{gather}数式\end{gather}か\begin{align}数式\end{align}の形式で入力すると、式番号付きで数式が表示されます。例えば、

\(t\) 秒後の位置は \begin{gather} x= \frac{1}2 a t^2+v_0 t+x_0 \end{gather} です。

と入力すると、

$t$ 秒後の位置は \begin{gather} x= \frac{1}2 a t^2+v_0 t+x_0 \end{gather} です。

と表示されます。

また、式に対して相互参照リンクを貼ることもできます。相互参照を使う場合は、式中に\label{式名称}という形でラベルを定義します。例えば、

\(t\) 秒後の位置は \begin{gather} x= \frac{1}2 a t^2+v_0 t+x_0 \label{eq:1} \end{gather} です。

と入力すると、

$t$ 秒後の位置は \begin{gather} x= \frac{1}2 a t^2+v_0 t+x_0 \label{eq:1} \end{gather} です。

と表示されます。ラベルは表示されません。

相互参照のリンクは、文中に\eqref{式名称}の形式で指定することができます。例えば、

式\eqref{eq:1}に示したとおり、

と入力すると、

式\eqref{eq:1}に示したとおり、

と表示されます。eqrefでラベル名を指示すると、その式へのリンクが貼られますので、それをクリックするとリンク先の式の所へ移動してくれます。ちなみの、eqrefではなくrefを使うと、カッコなしで数字だけのリンクが貼られます。

補足

WordPress関連の注意

モバイル向け軽量ページを提供するAMP(Accelerated Mobile Pages)では、独自のスクリプトを使うことができませんので、MathJaxも動きません。AMPページは無効にしておきましょう。

また、ソースコードのハイライトプラグインのEnlighterを使用していたのですが、どうもEnlighterとMathJax 3の相性が悪いらしくMathJaxが動かなかったため、ハイライトのプラグインはHighlighting Code Blockに乗り換えました。（EnlighterとMathJax 2系は大丈夫そうです）