という疑問に答えます。
Webコンテンツ上に数式を美しく記述するには？
電子ファイルドキュメントに数式を美しく記述するためのフォーマットとしてLaTeXがあります。
理工系の大学出身の方であれば、卒業論文の執筆やレポートなどに数式を記述するために使った経験のある方も多いと思います。
このLaTeXを含む数式の記法をWeb上にも応用すべく開発されたのが、オープンソースのJavaScript製ライブラリMathJaxです。
この記事では、MathJaxライブラリを用いて、WordPressの記事上にLaTeX記法で数式を記述する方法を紹介します。
WordPressでMathJaxを使う方法
★☆☆ 初級者向け:WordPressのプラグインを使う
WordPressには、MathJaxを簡単に使うためのプラグインが用意されています。
コードを直接いじるなど面倒なことをしたくない場合は、これを利用するのがオススメです。
プラグインのインストール
WordPress管理画面の「プラグイン」タブから「新規追加」をクリックします。
「mathjax-latex」でキーワード検索するとプラグインが出てくるので「今すぐインストール」をクリックします。
インストール後、有効化するとすぐ使えるようになっています。
ショートコードの設置
記事内で数式を記述したい場合は、記事内の任意の場所に[mathjax]を記述する必要があります。
このショートコードを記述しないとLaTeXコマンドがそのまま文字列として表示されてしまいます。
数式を記述したい記事には忘れずに記述するようにしましょう。
プラグインを使用する場合
- WordPressのMathJax-LaTeXプラグインをインストールする
- 記事内の任意の位置に[mathjax]ショートコードを記述する
★★☆ 中級者以上向け：CDN経由でライブラリをインポート
CDN(Contents Delivery Network)経由でライブラリを読み込む方法です。
以下の<script>タグを<head>タグに追加します。
<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><head>タグに直接コードを埋め込んだ場合、WordPressテーマを変更するなどした場合はこのライブラリのインポート処理が消えてしまいます。
functions.phpにアクションフックで追加するようにするとよいでしょう。
add_action('wp_head', 'add_meta_to_head');
function add_meta_to_head ()
{
echo '<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の公式ドキュメントはこちら
CDNからライブラリをインポートする場合
- <head>タグに<script>タグを記述するだけ
- functions.phpにアクションフックでの追加を推奨
MathJax-LaTeX記法まとめ
数式の表示方法
MathJaxでは、数式の表示方法にインライン数式(In-line mathematics)と別行立て数式(display mathematics)の2種類があります。
| 表示方法 | 開始/終了表示 | 表示例 |
|---|---|---|
| インライン数式 | \(\verb|\(|\) \(\verb|\|\)\(\verb|)|\) | 2次方程式\(a^2 + bx + c = 0\)の解は\(\frac{b \pm \sqrt{b^2 - 4ac}}{2a}\)である |
| 別行立て数式 | $$ または \(\verb|\[|\) \(\verb|\]|\) |
2次方程式$$a^2 + bx + c = 0$$の解は$$\frac{b \pm \sqrt{b^2 - 4ac}}{2a}$$である |
インライン数式
インライン数式では、数式を文中に埋め込むことができます。
数式の開始と終了は\(と\)で表現します。
2次方程式\(a^2 + bx + c = 0\)の解は\(\frac{b \pm \sqrt{b^2 - 4ac}}{2a}\)である2次方程式\(a^2 + bx + c = 0\)の解は\(\frac{b \pm \sqrt{b^2 - 4ac}}{2a}\)である
インライン数式で表示を別行立て数式の大きさにするには\displaystyleを使います。
2次方程式\(a^2 + bx + c = 0\)の解は\(\displaystyle\frac{b \pm \sqrt{b^2 - 4ac}}{2a}\)である2次方程式\(a^2 + bx + c = 0\)の解は\(\displaystyle\frac{b \pm \sqrt{b^2 - 4ac}}{2a}\)である
別行立て数式
別行立て数式では、数式を本文とは別行立て中央寄せで表示することができます。
数式の開始と終了は$$と$$または\[と\]で表現します。
2次方程式$$a^2 + bx + c = 0$$の解は$$\frac{b \pm \sqrt{b^2 - 4ac}}{2a}$$である
2次方程式\[a^2 + bx + c = 0\]の解は\[\frac{b \pm \sqrt{b^2 - 4ac}}{2a}\]である2次方程式$$a^2 + bx + c = 0$$の解は$$\frac{b \pm \sqrt{b^2 - 4ac}}{2a}$$である
別行立て数式で表示をインライン数式の大きさにするには\textstyleコマンドを使います。
2次方程式$$a^2 + bx + c = 0$$の解は$$\textstyle\frac{b \pm \sqrt{b^2 - 4ac}}{2a}$$である2次方程式$$a^2 + bx + c = 0$$の解は$$\textstyle\frac{b \pm \sqrt{b^2 - 4ac}}{2a}$$である
数式を複数行に分けて表示する
数式を複数行に分けて記述する場合は、alignコマンドを使用します。
\begin{align}
(x + 2)^2 = & 0 \\
x^2 +4x + 4 = & 0 \\
\end{align}\begin{align}
(x + 2)^2 = & 0 \\
x^2 +4x + 4 = & 0 \\
\end{align}
数式を揃えたい箇所に&を挿入することで、揃えてくれます。
MathJax-LaTeXコマンド一覧
上下付き文字
| 内容 | コマンド例 | 表示例 |
|---|---|---|
| 上付き文字 |
e^{i\pi}, e^{-i\pi}
|
$$e^{i\pi}, e^{-i\pi}$$ |
| 下付き文字 |
x_1, x_2, x_3 |
$$x_1, x_2, x_3$$ |
分数
| 内容 | コマンド例 | 表示 |
|---|---|---|
| 分数 |
\frac{1}{x + 1}
|
$$\frac{1}{x + 1}$$ |
行列/行列式
| 内容 | コマンド例 | 表示例 |
|---|---|---|
| 行列 |
\begin{matrix}
|
\begin{matrix} a & b \\ c & d \\ \end{matrix} |
\begin{pmatrix}
|
\begin{pmatrix} a & b \\ c & d \\ \end{pmatrix} |
|
\begin{bmatrix}
|
\begin{bmatrix} a & b \\ c & d \\ \end{bmatrix} |
|
| 行列式 |
\begin{vmatrix}
|
\begin{vmatrix} a & b \\ c & d \\ \end{vmatrix} |
\begin{Vmatrix}
|
\begin{Vmatrix} a & b \\ c & d \\ \end{Vmatrix} |
積分/重積分/周回積分
| 内容 | コマンド例 | 表示 |
|---|---|---|
| 積分 |
\int f(x) dx |
$$\int f(x) dx$$ |
\int_{0}^{\infty} f(x) dx
|
$$\int_{0}^{\infty} f(x) dx$$ | |
| 重積分 |
\iint_{0}^{\infty} f(x) dx
|
$$\iint_{0}^{\infty} f(x) dx$$ |
| 周回積分 |
\oint_C f(x) dx |
$$\oint_C f(x) dx$$ |
平方根/立法根/n乗根
| 内容 | コマンド例 | 表示 |
|---|---|---|
| 平方根 |
\sqrt{2}
|
$$\sqrt{2}$$ |
| 立法根 |
\sqrt[3]{2}
|
$$\sqrt[3]{2}$$ |
| n乗根 |
\sqrt[n]{3}
|
$$\sqrt[n]{2}$$ |
三角関数
| 内容 | コマンド例 | 表示 |
|---|---|---|
| 正弦関数 |
\sin \theta |
$$\sin \theta$$ |
| 余弦関数 |
\cos \theta |
$$\cos \theta$$ |
| 正接関数 |
\tan \theta |
$$\tan \theta$$ |
| 正割関数 |
\sec x |
$$\sec x$$ |
| 余割関数 |
\csc x |
$$\csc x$$ |
| 余接関数 |
\cot x |
$$\cot x$$ |
| 逆正弦関数 |
\arcsin x |
$$\arcsin x$$ |
| 逆余弦関数 |
\arccos x |
$$\arccos x$$ |
| 逆正接関数 |
\arctan x |
$$\arctan x$$ |
総和
| 内容 | コマンド例 | 表示 |
|---|---|---|
| 総和 |
\sum x_i |
$$\sum x_i$$ |
\sum_{i=1}^{\infty} x_i
|
$$\sum_{i=1}^{\infty} x_i$$ |
極限
| 内容 | コマンド例 | 表示 |
|---|---|---|
| 極限 |
\lim |
$$\lim$$ |
\lim_{n\to\infty} a_n
|
$$\lim_{n\to\infty} a_n$$ |
ベクトル
| 内容 | コマンド例 | 表示 |
|---|---|---|
| ベクトル |
\vec{a}
|
$$\vec{a}$$ |
\overrightarrow{a}
|
$$\overrightarrow{a}$$ |
ギリシャ文字
| 内容 | コマンド例 | 表示 |
|---|---|---|
| アルファ |
\alpha |
$$\alpha$$ |
| ベータ |
\beta |
$$\beta$$ |
| ガンマ |
\gamma |
$$\gamma$$ |
| デルタ |
\delta |
$$\delta$$ |
| イプシロン |
\epsilon |
$$\epsilon$$ |
| ゼータ |
\zeta |
$$\zeta$$ |
| イータ |
\eta |
$$\eta$$ |
| シータ |
\theta |
$$\theta$$ |
| イオタ |
\iota |
$$\iota$$ |
| カッパ |
\kappa |
$$\kappa$$ |
| ラムダ |
\lambda |
$$\lambda$$ |
| ミュー |
\mu |
$$\mu$$ |
| ニュー |
\nu |
$$\nu$$ |
| グザイ |
\xi |
$$\xi$$ |
| オミクロン |
o |
$$o$$ |
| パイ |
\pi |
$$\pi$$ |
| ロー |
\rho |
$$\rho$$ |
| シグマ |
\sigma |
$$\sigma$$ |
| タウ |
\tau |
$$\tau$$ |
| ファイ |
\phi |
$$\phi$$ |
| カイ |
\chi |
$$\chi$$ |
| プサイ |
\psi |
$$\psi$$ |
| オメガ |
\omega |
$$\omega$$ |