Mathjaxの使い方を覚えて美しい数式表示をしてみよう！

Mathjaxを導入して数式を美しく表示してみましょう。

CDNを利用して簡単にMathjaxを導入する方法についてご紹介します。 またインライン表示、ディスプレイ表示の方法や数式番号を付ける方法についても解説していきます。

はてなブログのMarkdown記法モードでの書き方、Pandocを用いて秀丸エディタなどのテキストエディタで記事を書く場合についてもまとめてみました。

1. はてな記法による数式表示
2. Mathjaxとは
   1. 美しい数式表示が可能
3. Mathjaxの導入方法
   1. はてなブログへのMathjaxの導入方法
4. Mathjaxの使い方
   1. インライン表示
   2. ディスプレイ表示
   3. Mathjaxを使った場合のPandocでの変換
   4. 長い数式でスマホで数式がはみ出す場合の対処方法
   5. 定理や公式をそれらしく表示する方法
5. まとめ

はてな記法による数式表示

はてなブログでは、はてな記法で数式を簡単に書くことができます。

[tex: e^{i\pi}+1=0]

はてな記法の使い方は上のように簡単なのでちょっと数式を書く時は楽です。 書き方はTeX記法です。

TeX記法についてはこちらの記事がよくまとまっています。

www.onemathematicalcat.org

これはGoogle Chart APIを使って画像に変換しているのですね。

<p><img src="https://chart.apis.google.com/chart?cht=tx&chl=%20e%5E%7Bi%5Cpi%7D%2B1%3D0" alt=" e^{i\pi}+1=0"/></p>

はてな記法モードで書いているなら心配いりませんがMarkdown記法モードの時はアンダーバーなどの記号をエスケープする必要がありやっかいです。 アンダーバーがマークダウン記法の強調表示と被るためです。

なのでMarkdown記法モードで、しかもたくさん数式を書く場合はMathjaxがお勧めです。 はてな記法が使えない他のブログシステムで数式表示する場合もまずはMathjaxが第一の選択肢になるでしょう。

Markdown記法とMathjaxで元記事を書いて保存しておけば、将来レンタルサーバーや自前サーバーに移行する時もラクチンです。

Mathjaxとは

数式をブラウザで表示することを可能とするJavaScriptライブラリです。

アメリカ数学会によって管理されているオープンソースソフトウェアなので誰でも無料で利用できます。

Wikipediaでも使用されています。

美しい数式表示が可能

LaTeXというテキストベースの組版処理システムを用いて数式を書くことができ、非常に美しい数式表示を行うことができます。

数式を大量に書く論文ではLaTeXを使って書くのが主流です。

アメリカ数学会が管理していますので、ブログに書くようなものなら多少複雑な数式でも表示してくれるだろうという安心感がありますね。

Mathjaxの導入方法

JavaScriptライブラリですから、レンタルサーバーや自前サーバーならライブラリをダウンロードして自分のサイト内に組み込むことも可能です。

しかしCDNを利用して外部からライブラリを呼び出すのが簡単です。 2019年1月現在の最新版は2.7.5版となっています。

<script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML' async></script>

常に最新版のMathjaxを使用する場合は

<script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-MML-AM_CHTML' async></script>

検索で出てくるページの中には古い記述が散見されますのでご注意ください。 cdn.mathjax.orgは廃止されています。 以下の記事をご参照ください（英文）。

www.mathjax.org

はてなブログへのMathjaxの導入方法

はてなブログの記事にMathjaxを導入するには大きく2つの方法があります。

ひとつは数式を表示させたいページのみ本文にスクリプトを記述する方法、もうひとつは全てのブログページのフッタにMathjax用のスクリプトを埋め込む方法です。

順を追って説明していきます。

数式を表示させたいページのみにスクリプトを記述する方法

特定のページにのみ数式表示をさせる場合に便利です。

記事のどの部分にスクリプトを埋め込むかですが、記事本文の最後に配置すればHTMLが読み込まれた後にJavaScriptライブラリが読み込まれます。

先に数式以外の内容を表示できればユーザから見た体感表示速度が上がり検索エンジンからの評価も高まることが予想されます。

<script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-MML-AM_CHTML' async></script>
<script type="text/x-mathjax-config">
 MathJax.Hub.Config({
 tex2jax: {
 inlineMath: [["\\(","\\)"] ],
 displayMath: [ ['$$','$$'], ["\\[","\\]"] ]
 }
 });
</script>

CDNを利用している場合には将来リンク先が変更になるリスクがあります。 大量のページに数式を表示させる場合には次に述べるようにフッタに埋め込む方法を取ることがお勧めです。

すべてのページのフッタにMathjax用スクリプトを埋め込む方法

サイト内の大部分の記事に数式が含まれる場合にはすべてのページにスクリプトを埋め込んでおいた方が楽です。

ヘッダに埋め込みすることもできますが、ページの表示速度の観点からフッタに埋め込む方がお勧めです。

はてなブログのフッタに埋め込む

はてなブログでは次のようにしてフッタにスクリプトを埋め込みます。

まずダッシュボードを開きます。

「デザイン」を選択します。

「フッタ」をクリックしてウインドウを開き、そこにMathjax用のスクリプトを埋め込みます。

<script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-MML-AM_CHTML' async></script>
<script type="text/x-mathjax-config">
 MathJax.Hub.Config({
 tex2jax: {
 inlineMath: [["\\(","\\)"] ],
 displayMath: [ ['$$','$$'], ["\\[","\\]"] ]
 }
 });
</script>

最後に「変更を保存」をクリックしておくのを忘れないようにしてください。

お疲れ様でした。

Mathjaxの使い方

それでは早速Mathjaxの使い方を説明しましょう。

数式を表示する方法としては大きく2つあり、文章の中で数式をインラインで表示させるインライン表示と、テキストとは切り離して数式のみをブロックで表示させるディスプレイ表示の2種類の表示方法があります。

インライン表示

文章のテキストと同じ行の中に数式を表示します。

TeX記法による数式表示の頭の部分に\(を書き、後に\)を書いて挟みます。

更にこれをpタグなどのHTMLタグで囲みます。Markdown記法モードではHTMLはそのまま出力されますのでこれでMathjaxをうまく動かすことができます。

<p>エネルギーと質量には \(E=mc^2\) の関係がある。</p>

エネルギーと質量には \(E=mc^2\) の関係がある。

もうひとつやってみましょう。

<p>オイラーの公式 \(e^{i\pi}+1=0\) は美の極致である。</p>

オイラーの公式 \(e^{i\pi}+1=0\) は美の極致である。

Mathjaxで数式をインライン表示する場合には$記号で挟むようにする場合もありますが、プログラムコードでは適当な空白が挟まれず不都合が生じる恐れがあります。例えばスペースが何らかの理由で取れてしまったような場合です。

$variable$ 

variable

先ほど紹介したスクリプトではこのようなことが起こらないようドル記号の使用が抑制されています。

ディスプレイ表示

数式だけをブロックで表示する表示方法です。

$$でTeX記法を囲みます。

あるいは頭の部分に\[を書き、後に\]を書いて挟みます。

$$は日本語においてもめったに書かれないので、これでTeX記法で書かれた数式を挟めばOKです。

更にこれを<div class="math display">～</div>で挟みます。

例を見てみましょう。

<div class="math display">
$$
x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}
$$
</div>

$$ x = \frac{-b \pm \sqrt{b^2-4ac}}{2a} $$

<div class="math display">
\[
x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}
\]
</div>

\[ x = \frac{-b \pm \sqrt{b^2-4ac}}{2a} \]

Mathjaxで式番号を入れる方法

\tag{ }を使うと数式に式番号を入れることができます。

<div class="math display">
$$
  \sum_{n=1}^\infty \frac{1}{n^2} = \frac{\pi^2}{6}
  \tag{1}
$$
</div>

$$ \sum_{n=1}^\infty \frac{1}{n^2} = \frac{\pi^2}{6} \tag{1} $$

<div class="math display">
$$
  \sum_{n=1}^\infty \frac{1}{n^4} = \frac{\pi^4}{90}
  \tag{2}
$$
</div>

$$ \sum_{n=1}^\infty \frac{1}{n^4} = \frac{\pi^4}{90} \tag{2} $$

<div class="math display">
$$
  \sum_{n=1}^\infty \frac{1}{n^6} = \frac{\pi^6}{945}
  \tag{3}
$$
</div>

$$ \sum_{n=1}^\infty \frac{1}{n^6} = \frac{\pi^6}{945} \tag{3} $$

Mathjaxを使った場合のPandocでの変換

はるなぴは記事の原稿をまずMarkdown記法を使って秀丸エディタで書き、それをPandocを使ってHTMLに変換しています。

この場合の設定や書き方を紹介します。

Pandocの導入とオプション設定についてはこちらの記事をご参照ください。

www.halu7.com

www.halu7.com

まずはOptionの設定です。

+tex_math_dollars

をOption設定に加えます。

これで$$で囲んだ部分をMathjaxによる記法と認識してくれます。

$$
  \sum_{n=1}^\infty \frac{1}{n^2} = \frac{\pi^2}{6}
  \tag{1}
$$

が次のように変換されます。

<p><br /><span class="math display">$$
  \sum_{n=1}^\infty \frac {1}{n^2} = \frac{\pi^2}{6}
  \tag{1}
$$</span><br /></p>

class="math display"が追加されていることに注意してください。

これを用いてCSSで見栄えをコントロールすることが可能になります。

長い数式でスマホで数式がはみ出す場合の対処方法

class="math display"を利用してCSSで制御します。

$$ a^3+b^3+c^3-3abc=(a+b+c)(a^2+b^2+c^2-ab-bc-ca) $$

スクロールバーにより長い数式でも折り返しなしで表示することが可能になります。

<div class="math display" style="overflow: auto">
$$
a^3+b^3+c^3-3abc=(a+b+c)(a^2+b^2+c^2-ab-bc-ca)
$$
</div>

大量に数式を記述しないのであれば上のようにstyle直打ちでもOKです。

定理や公式をそれらしく表示する方法

CSSを利用して囲み枠をつけます。

一例として以下のCSSを適用してみます。

.math.display {
background-color: #ffffcc;
    margin: 15px auto;
    padding: 10px 12px;
    width: 100%;
    overflow: auto;
    border-radius: 8px;
    border: 1px solid #36c
}

$$ a^3+b^3+c^3-3abc=(a+b+c)(a^2+b^2+c^2-ab-bc-ca) $$

囲み枠をつけてそれらしく表現することができました。

まとめ

Mathjaxを導入することにより数式を美しく表示することが可能になります。

理系ブログでは数式を扱うこともでてくるでしょうから、その際の参考にしていただければ幸いです。