MathJaxの使い方｜Google Chromeでも表示可能！プラグインなしでWordPressサイトに綺麗な数式を表示させる方法

たまにではありますが、あなたのWordPressサイトに綺麗な数式を表示させたいと思ったことはありませんか？足し算や引き算ならともかく、べき数（a^b：aのb乗）の数式や対数表示など…xの小文字を筆記体スタイルできれいに表示できたら、かける記号（×）と紛らわしくなくなりますよね？

この記事では、MathJaxという複雑な数式をwebブラウザで表示させるオープンソースのJavaScriptライブラリを使って、WordPressサイト上に数式を表示させる方法をご紹介します。以前問題となっていたchromeなど一部ブラウザでの数式表示も、この方法で解決です。

WordPressサイトでのMathJaxの使い方を説明する場合、通常MathJax-LaTeXというプラグインを使われるのですが、今回はあえてプラグインなしでMathJaxを使う方法をご紹介します。

MathJax使用の準備：headerタグにコードを足すだけで意外と簡単！

そのための準備段階として、WordPressサイトに少しコードを書き足す必要があります。管理画面から「外観 >> テーマの編集 >> header.php」を選択し、<header>と</header>の間に次の<script>タグを埋め込みます。

<script type=”text/x-mathjax-config”>
MathJax.Hub.Config({ tex2jax: { inlineMath: [[‘$’,’$’], [“\\(“,”\\)”]] } });
</script>
<script type=”text/javascript” src=”https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_CHTML”>
</script>

これで準備完了です。追加でソフトウェアやフォントをインストールする必要はありません。

MathJaxの使い方｜LaTexコマンドを使って数式を自由自在に表示

それでは、実際のMathJaxの使い方を説明しましょう。MathJaxでの数式の書き方にはinline形式とdisplay形式の2種類があります。Inline形式とは「改行なしで数式が文章間に埋め込まれている」形式で、display形式とは数式だけ改行して独立表示させる形式です。

Inline形式で数式を書く時は数式を$と$あるいは\[と\]ではさみ、display形式で書くときには数式を$$と$$あるいは\(と\)ではさみます。例えばブロックに…

Inline形式：例として、$x+y=1$を表示させてみます。
Display形式：例として、$$x+y=1$$を表示させてみます。

Inline形式：例として、$x+y=1$を表示させてみます。

Display形式：例として、$$x+y=1$$を表示させてみます。

MathJaxで使用する基本的なLaTexコマンドを紹介

MathJaxを使ってWordPressで数式を表示させるには、LaTexコマンドというものを使います。多数のコマンドがあるのでを紹介することはできませんが、詳しくはLaTexコマンド一覧というサイトが参考になると思います。

ここでは、使う頻度が高いと思われるLaTexコマンドをいくつかご紹介するに留めておきます。

• 上付き文字：数式の後ろに”^”をつける → a^b
• 下付き文字：数式の後ろに”_”をつける → x_0
• 不等号：”\leq”または”\geq”をつける → a\geqb
• 絶対値（ノルム）：数式を|（パイプ）で囲む → |x|
• 角度：数式の後ろに”^\circ”をつける → 60^\circ

MathJaxの具体的使用例

それでは、もうちょっとちょっと複雑な数式をWordPressサイトに表示させてみましょう。例えば…

2次方程式 $ax^2 + bx + c =0$ の根の公式は
\[
x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}
\]

である。

実際の入力内容はこちら…

2次方程式 $ax^2 + bx + c =0$ の根の公式は
\[
x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}
\]
である。

上のコードの中に出てくるコマンドを解説すると…

• \frac{分子}{分母}：分数表記
• \pm：プラスマイナス
• \sqrt{数式}：平方根

となります。

さらに具体例をあげていきますね。次は合同式…

$a \equiv b \mod n$

実際の入力内容は…

 $a \equiv b \mod n$

“\equiv”がaとbの間にある三本線のコマンドになっています。続いて…

\begin{eqnarray} \left\{ \begin{array}{l} x + y = 10 \\ 2x + 4y = 32 \end{array} \right. \end{eqnarray}

実際の入力内容は…

\begin{eqnarray}
   \left\{
     \begin{array}{l}
       x + y = 10 \\
       2x + 4y = 32 
    \end{array}
   \right.
 \end{eqnarray}

連立方程式のように複数の数式を表示させるには、“\begin{eqnarray}”と“\end{eqnarray}”で数式をはさみます。1つ目の式の後の”\\”は改行記号です。複数の数式を大きな波括弧で囲むために、数式の前に“\left\{“、後ろに“\right.”をつけています。

LaTexコマンドを使えば、ベクトルや行列などもきれいに表示することができます。例えば…

$\vec{a} = (a_1, a_2, \cdots, a_n)$

と入力すると…

$\vec{a} = (a_1, a_2, \cdots, a_n)$

“\cdots”は3つの横並びドットのコマンドです。そして…

$\overrightarrow{ab}$

と入力すると…

$\overrightarrow{ab}$

複数の変数の上に→をつけるには、“\overrightarrow”というコマンドを使います。

続いて行列の表示。

\begin{pmatrix}a & b \\c & d\end{pmatrix}

と入力すると…

\begin{pmatrix} a & b \\ c & d \end{pmatrix}

行列の中身を“\begin{pmatrix}”と“\end{pmatrix}”で囲みます。

最後に数列の総和を表記するコマンドをご紹介します。いわゆる「シグマ記号」を表記するには、コマンド“\sum_{下限}^{上限}”を使います。

$\sum_{i=1}^{n} a_n$

と入力すると…

$\sum_{i=1}^{n} a_n$

こんな数式が自分のWordPressサイトに自由自在に表記できるようになったら、むちゃくちゃカッコいいと思いませんか？

ここに紹介したMathJaxの使い方はほんの一部です。他にも微分積分表記やフーリエ変換、ラプラス変換など（もうこの辺になると僕は完全に理解不能）、大学以上レベルの数式もMathJaxできれいに表示することができます。興味のある方は、是非このMathJaxの使い方を極めてみてください。

まとめ

いかがでしたか？WordPressサイトで複雑な数式も自由自在に表示できるようになれば、作成する記事の自由度が格段に上がりますよね。MathJaxを使った数式の表示方法は、特に数学や物理に関わる内容のサイトを運営している場合には特におすすめです。

あなたも今まで自分のwebサイトで数式を書こうとして苦労したことはありませんか？MathJaxや他の方法を使ってみての感想、体験談などがありましたら、ぜひ下のコメント欄にシェアしてもらえたら嬉しいです。