PR
WordPressできれいな数式を書く!【MathJax-LaTeXの導入法と使い方】
こちらのブログで数式を入力するために、WordPressにMathJax-LaTeXを導入しました。
この記事ではMathJax-LaTeXの導入方法と使い方のポイント(コマンドを含めて)を説明していきます。
- WordPressで数式を書きたい
- LaTeXの数式の書き方を知りたい
MathJax-Latex導入方法
MathJax-LatexはWordPressのプラグインで、理系の文書作成の定番LaTeXがWordPress上で使えるようになります。
LaTeXあるあるですが「WordPress上ではこう書く」という書き方がありますので、そのあたりも丁寧に説明していきます。
インストールはいつも通り、
プラグインで「MathJax-Latex」を検索→インストール→有効化でOK。
導入できたら、設定から「Force Load」だけチェックを入れておいてください。
MathJax-Latexの使い方
ブロックで使うときは「$$」、インラインで使うときは「\( \backslash ( \)」「\( \backslash ) \)」で囲う
$$で数式を囲みます。例えば、
$$ \int^{b}_{a} f(x) dx = \lim_{n \to \infty} \sum^{n-1}_{i=0} f(x_{i}) \Delta x $$
は次のような式になります。
$$ \int^{b}_{a} f(x) dx = \lim_{n \to \infty} \sum^{n-1}_{i=0} f(x_{i}) \Delta x $$
ただし、これだと一つのブロックとして認識されるので、真ん中にドン!という形での数式出力になります。
インラインで数式を入力するときは
\( 数式 \)
で数式を囲みます。先ほどの先頭と末尾の「$$」は必要ありません。上記の形で囲ってあげるとこんな感じ、\( \int^{b}_{a} f(x) dx = \lim_{n \to \infty} \sum^{n-1}_{i=0} f(x_{i}) \Delta x \)になります。
ただ、この状態ではあまり見栄えが良くないので、上付き、下付きの式で形が変わる場合は、
\( \displaystyle 数式 \)
という感じで、\displaystyleを数式の先頭につけてやるとキレイな数式に整います。
この形で囲うと、\( \displaystyle \int^{b}_{a} f(x) dx = \lim_{n \to \infty} \sum^{n-1}_{i=0} f(x_{i}) \Delta x \)、こんな感じになります。
この\displaystyleは「分数がちっさいなぁ…」というときにも使います。
\(\frac{1}{2}\)(←\displaystyle無し)\(\displaystyle \frac{1}{2}\)(←\displaystyleアリ)
このコマンドは結構使いますね。
使えるLatexコマンド入力方法
まず、各コマンドを使う際に「\」(バックスラッシュ)を最初につけるのですが、
Mac : 「opt」+「|」
Windows :「¥」
でバックスラッシュを入力できます。地味にハマりポイントです。Macはバックスラッシュの入力法、Windowsは「¥=\」であることを確認してください。
以下に実際に使える記号一覧を載せておきますので参考にしてください。
色々なサイトにLaTeXの表記方法がありますが、残念ながらMathJax-LaTeXですべて使えるとは限りません。実際に使えるコマンドを並べておきます。
数式編
コマンド | 出力 | 補足 | |
分数 | \frac{a}{b} | \( \frac{a}{b} \) | |
指数 | a^n | \( a^n \) | |
添字 | a_n | \( a_n \) | |
ルート | \sqrt 2 | \( \sqrt 2 \) | |
n乗根 | \sqrt[3] 2 | \( \sqrt[3] 2 \) | |
複号 | \pm , \mp | \( \pm , \mp \) | |
かける | \times | \( \times \) | |
わる | \div | \( \div \) | |
対数 | \log 2 , \log_{10} 2 | \( \log 2 , \log_{10} 2 \) | |
中(なか)点、三点 | \cdot , \cdots | \( \cdot , \cdots \) | |
より小さい、以下 | \lt , \leq | \( \lt , \leq \) | |
より大きい、以上 | \gt , \geq | \( \gt , \geq \) | |
角 | \angle | \( \angle \) | |
順列 | {}_n P_r | \( {}_n P_r \) | 添え字で表現しています |
和Σ | \sum_{k=1}^{n}a_k | \( \displaystyle \sum_{k=1}^{n}a_k \) | |
極限 | \lim_{n \to \infty} a_n | \( \displaystyle \lim_{n \to \infty} a_n \) | \toは→、\inftyは∞ |
不定積分、定積分 | \int f(x)dx , \int_a^b f(x)dx | \( \displaystyle \int f(x)dx , \int_a^b f(x)dx \) | |
ベクトル | \vec{a} , \overrightarrow{AB} | \( \vec{a} , \overrightarrow{AB} \) | \overrightarrowの方がキレイにかぶるのでオススメ |
式の体裁を整える
コマンド | 出力 | 補足 | |
連立 | \begin{cases} x+y = 1\\ x-y = 1 \end{cases} (最初のバックスラッシュは本当は半角で) | \(\begin{cases} x+y = 1\\ x-y = 1 \end{cases}\) |
装飾編
いくつか注意点があるので、それぞれの項目で説明します。
「フォントサイズについて」
MathJax-LaTeXはどうやら、フォントサイズ小がデフォルトサイズのようです(\smallコマンドでのサイズ)。
コマンド | 出力 | 補足 | |
フォントサイズ(極小)※小さめに見える | \scriptsize{ax^2+bx+c=0} | \(\scriptsize{ax^2+bx+c=0}\) | |
フォントサイズ(小)※デフォルト | \small{ax^2+bx+c=0} | \(\small{ax^2+bx+c=0}\) | |
フォントサイズ(通常)※大きめに見える | \normalsize{ax^2+bx+c=0} | \(\normalsize{ax^2+bx+c=0}\) |
「書体」
書体については特に言うことはないです。よく使いそうなものを載せておきます。
コマンド | 出力 | 補足 | |
ローマン | \textrm{ABC abc あいう アイウ} | \(\textrm{ABC abc あいう アイウ}\) | ベクトルとかとよく使います。 \overrightarrow{\textrm{AB}}→\(\overrightarrow{\textrm{AB}}\) |
ボールド | \textbf{ABC abc あいう アイウ} | \(\textbf{ABC abc あいう アイウ}\) |
「文字色について」
1.定義されている色は「red」「blue」「green」「yellow」「magenta」「white」「black」の7色です。その他の色は16進数カラーコードで指定してください。
2.MathJax-LaTeXでは\colorboxコマンドは使えないようです(2021年12月現在)。残念。ただし、このブログはCocoonで作っているのですが、(現在はSWELLで運用中)Cocoonのマーカー機能はインラインでは有効なようです。
コマンド | 出力 | 補足 | |
赤文字 | \color{red}{ABC abc あいう アイウ} | \(\color{red}{ABC abc あいう アイウ}\) | |
色を16進数で指定 | \color{#BC69F8}{ABC abc あいう アイウ} | \(\color{#BC69F8}{ABC abc あいう アイウ}\) |
Cocoonの機能でマーカーを引いてみる
「\(ax^2+bx+c=0\)を解くべきである。」この通り、インラインでは有効。
$$ax^2+bx+c=0$$
「$$」で囲んだ際にはマーカー機能は無効になる(一応赤マーカーを引いている)。
まとめ
MathJax-LaTeXは、LaTeXのコマンドが全部使えるかというとそうでもないようです。ですが、ほとんど問題ないレベルで使えるので、数式を入力するなら非常にオススメのプラグインです!