WordPressで数式を表示しよう

このブログのように、理系ネタが多いブログでは数式の表示が必須です。
今回はWordPressで数式を表現する方法、とりわけMathJaxについて紹介します。

数式の表現の方法とメリット・デメリット

数式の表現の方法としては、

1. がんばって文字で表現する
2. LaTeXで数式を作り画像を張り付ける
3. LaTeXでPDFを作りファイルをダウンロードしてもらう
4. QuickLaTeXを使ってTeX数式を画像に変換する
5. MathJaxを使ってTeX数式を変換する

などなど、いろいろあります。

①については、論外です。
例えば、2次方程式の解の公式
\begin{align}x = \frac{-b\pm \sqrt{b^2-4ac}}{2a}\end{align}
を文字だけで表現しようとすると次のようになります。

x = (-b ± √(b^2-4ac))/(2a)

これ、書くほうもめんどくさいですし、見るほうもわかりにくいですよね。
数式の中身の理解に時間をとるべきで、表現の読み解きに時間を割くべきではないです。

②については、量が多いと数式の作成・貼り付けなど手間がかかります。
加筆修正する際にも、再度画像を作成する必要があるなど、管理も大変です。
うちのブログのようなほとんど数式みたいなところには向きません。

③はよくある選択だと思います。
ただ、数式を表現したいだけなのに全体をLaTeX（PDF）にするのはいかがなものでしょうか。
ページの表現はWordPressのようなCMSを使ってうまくやりたいですよね。
PDFファイルの中身はWordPressの検索にヒットしません。

また、これも加筆修正の際にTeXソースを探してきて、修正して、PDF化して、アップロードして、と手間がかかります。
これだけ手間だと、ちょっとした間違いだと放置しちゃいがちになっちゃいますよね。

④当サイトはもともとこれでした。
理由は、WordPress上で編集できて、結果をすぐに見れるからです。
またMathJaxの描画の遅さが気になって、画像化できているほうが早いだろうという目論見があったからです。

しかし、使っているうちに、

• キャッシュがないときの画像生成がめちゃくちゃ遅い
• 日本語が使えない
• 画像が荒いことがある

ここらへんの欠点が目に付くようになってしまいました。

⑤MathJaxもWordPress上で編集でき、結果をすぐに見れる利点は④と同様です。
描画の遅さも1ページに表示する数式を極力抑えることで解決できます。
日本語も使えますし、デバイスに合わせて表示するのでどのデバイスで見ても綺麗に表現できます。
今回は、MathJaxをWordPressに組み込む方法を紹介します。

同じ数式をQuickLaTeXとMathJaxで表現すると、
QuickLaTeXバージョン

mathjaxバージョン
\begin{align*}
\pi(x) = \sum_{m \le \log_2 x} \frac{\mu(m)}{m} \left(\mathrm{li}(x^\frac{1}{m}) – \sum_{\rho} \mathrm{li}(x^{\frac{\rho}{m}}) – \log 2 + \int_{x^{\frac{1}{m}}}^\infty \frac{\mathrm{d} t}{t(t^2-1)\log t}\right)
\end{align*}

どっちが綺麗か一目瞭然ですよね。

MathJaxをWordPressに導入しよう

MathJaxをWordPressに導入するためには、プラグインを使うのが王道のようですが、ずっとメンテナンスされていないようです。
ここでは、JavaScriptを使って導入する方法を紹介します。

まずは導入

MathJaxを導入するのはとても簡単です。
下記コードを数式を使う前に記載するだけです。

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS_CHTML" type="text/javascript">    
    MathJax.Hub.Config({
        HTML: ["input/TeX","output/HTML-CSS"],
        TeX: {
               Macros: {
                        bm: ["\\boldsymbol{#1}", 1]},
               extensions: ["AMSmath.js","AMSsymbols.js","color.js"],
               equationNumbers: { autoNumber: "AMS" } },
        extensions: ["tex2jax.js"],
        jax: ["input/TeX","output/HTML-CSS"],
        tex2jax: { inlineMath: [ ['$','$'], ["\\(","\\)"] ],
                   displayMath: [ ['$$','$$']], 
                   processEscapes: true },
        "HTML-CSS": { availableFonts: ["TeX"],
                      linebreaks: { automatic: true } }
    });
</script>

途中に改行など入れてしまうと自動的にWordPressに整形され意図通りにならないことがありますので、注意ください。
上記を書いたあとに、記事中にTeX形式で次のように書くと該当部分が数式化されます。

二次方程式$ax^2+bx+c=0(a\neq 0)$の解の公式は、
\begin{align*}
x = \frac{-b\pm\sqrt{b^2-4ac}}{2a}
\end{align*}

簡単ですね。

コードスニペット(ショートコード)化

毎回、上記のようにスクリプトを張り付けるのは大変です。
スニペット化しましょう。
私はCode Snippetsというプラグインを使っています。
導入の仕方は他の記事に譲って、MathJaxを使うためのスニペットについて解説します。

①WordPressの管理画面からSnippets→「Add New」を選択します。

②Add New Snippetのページが表示されます。

Titleの部分は好きに書いてください「例：MathJax利用コードスニペット」
Codeの部分に次のように書いてください。

function MathJax_code(){
return <<<EOD
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS_CHTML" type="text/javascript">    
    MathJax.Hub.Config({
        HTML: ["input/TeX","output/HTML-CSS"],
        TeX: {
               Macros: {
                        bm: ["\\\\boldsymbol{#1}", 1]},
               extensions: ["AMSmath.js","AMSsymbols.js","color.js"],
               equationNumbers: { autoNumber: "AMS" } },
        extensions: ["tex2jax.js"],
        jax: ["input/TeX","output/HTML-CSS"],
        tex2jax: { inlineMath: [ ['$','$'], ["\\\\(","\\\\)"] ],
                   displayMath: [ ['$$','$$']], 
                   processEscapes: true },
        "HTML-CSS": { availableFonts: ["TeX"],
                      linebreaks: { automatic: true } }
    });
</script>
 
EOD;
}
add_shortcode('usemath','MathJax_code');

③「Save Changes and Activate」ボタンを押して登録してください。

④数式を使いたい記事で、次のように[usemath]を記載してから先ほどと同様にTeX形式を使うことができます。

[usemath]
二次方程式$ax^2+bx+c=0(a\neq 0)$の解の公式は、
\begin{align*}
x = \frac{-b\pm\sqrt{b^2-4ac}}{2a}
\end{align*}

スマホ対応(横スクロール対応)する

これで気持ちよく数式を書く環境が整ったと思います。
しかし、スマホから数式入りのページを見るとどうでしょう。
長い数式がはみ出てかっこ悪いですね。

そこで、長い数式を横スクロールできるようにしましょう。

手作業

長い数式を

<div style="overflow-x: auto;">長い数式</div>

のように、overflow-x:auto;スタイルを付けたdivで囲むことで簡単に横スクロール対応できます。
はみ出すほど長くない場合は、このスタイルは無視されます。

しかし、全てをこのように囲むのは大変です。
はみ出すやつのみ囲もうと思っても、たまたま自分のスマホでははみ出さなかったら、対応漏れしそうですね。
そこで自動化を考えます。

自動化

先ほどのスニペットをこのように書き換えます。

function MathJax_code(){
return <<<EOD
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS_CHTML" type="text/javascript">    
    MathJax.Hub.Config({
        HTML: ["input/TeX","output/HTML-CSS"],
        TeX: {
               Macros: {
                        bm: ["\\\\boldsymbol{#1}", 1]},
               extensions: ["AMSmath.js","AMSsymbols.js","color.js"],
               equationNumbers: { autoNumber: "AMS" } },
        extensions: ["tex2jax.js"],
        jax: ["input/TeX","output/HTML-CSS"],
        tex2jax: { inlineMath: [ ['$','$'], ["\\\\(","\\\\)"] ],
                   displayMath: [ ['$$','$$']], 
                   processEscapes: true },
        "HTML-CSS": { availableFonts: ["TeX"],
                      linebreaks: { automatic: true } }
    });
</script>
 
EOD;
}
function change_math_into_div($text){
    $replace = array(
        //'変更前' => '変更後',
        '\begin{align}' => '<div style="overflow-x: auto;">\begin{align}',
        '\end{align}' => '\end{align}</div>',
        '\begin{align*}' => '<div style="overflow-x: auto;">\begin{align*}',
        '\end{align*}' => '\end{align*}</div>',  
 
    );
    $text = str_replace(array_keys($replace), $replace, $text);
    return $text;
}
add_filter('the_content', 'change_math_into_div');
add_shortcode('usemath','MathJax_code');

これは、簡単に言うと記事本文中の文字列を置き換えてくれるというものです。
横に長くなる数式は￥begin{align}￥end{align}で囲むようにすれば、対応忘れなく横スクロール可能になります。

まとめ

以上、WordPressで数式を表現する方法でした。
参考にしていただければ幸いです。