MathJax


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

概要


本家


関連サイト



導入

CDN 利用の方が一般的。

CDN (Content Delivery Network)

HTML＋CSS 出力
SVG画像 出力

Combined Configurations — MathJax 2.6 documentation

行の中に数式を入れるときは、"\(" "\)" で囲んで、TeX数式記述。独立した行で数式を表示したい場合は、"\[" "\]" で囲む。TeX数式をTeX記述のまま表示したい場合は code タグで囲む。

\[ \begin{align} f(x) & = (a+b)^2 \\ & = a^2+2ab+b^2 \\ \end{align} \]

\[ \begin{align} f(x) & = (a+b)^2 \\ & = a^2+2ab+b^2 \\ \end{align} \]

Tips


ブラウザ下部の「Typesetting math」表示の禁止


\[\]を中央寄せじゃなく左寄せにする

JavaScript で MathJax.Hub.Config 中のプロパテイを上書きする。他にも色々設定できるみたいだが、あまり試してない。The Core Configuration Options — MathJax 2.6 documentation

或いは、以下のクラスに、CSSを指定する。important! は必須。


ちなみに、\[\] の上下のマージンは、以下のように調整。デフォルトは margin: 1em 0; なので、強調表示してボックスで囲んだりする場合は広くなりすぎるので。


レンダリング終了後のプログラム起動

MathJax の処理は MathJax.Hub.Queue に溜められ、順次実行される。なので、キューに処理を追加すれば、レンダリング終了後、最後に実行される。

レンダリング終了後に、透明Canvas を被せて描画するサンプル。


\[ \begin{pmatrix} a_{00} & a_{01} & a_{02} & a_{03} \\ a_{10} & a_{11} & a_{12} & a_{13} \\ a_{20} & a_{21} & a_{22} & a_{23} \\ a_{30} & a_{31} & a_{32} & a_{33} \end{pmatrix} \]


JavaScript出力のレンダリング

JavaScript で、TeX形式の数式を生成して表示する場合、数式生成後にHTMLに Idエレメントで表示し、以下のプログラムのように書いて、MathJax.jsでのレンダリングを指定する。

Modifying Math on the Page — MathJax 2.4 documentation


SVG 形式で出力してる時の数式に色を指定する

Changing SVG color · mathjax/MathJax-docs Wiki · GitHub


数式のフォントに部分的に色を付ける方法

準備として、color.js 拡張を読み込み。

数式中の該当箇所に、"\color[RGB]{255,0,0}" "\color[rgb]{0,0.3,0.8}" のように色指定する。元に戻す場合は、元の色を指定する。下の左端の青い色をクリックして、色の変更ができます。

色指定: \[ a + \color[RGB]{0,0,255} bc \color[rgb]{0,0,0} + d \] a+\color[RGB]{0,0,255}bc\color[RGB]{0,0,0}+d 
\color[RGB]{0,0,255}
色指定: \[ a + \color[rgb]{0,0,1} bc \color[rgb]{0,0,0} + d \] a+\color[rgb]{0,0,1}bc\color[rgb]{0,0,0}+d 
\color[rgb]{0,0,1}

個人的によく使う表記

数式の要素を順にTeX記述すれば、それなりにレンダリングしてくれる。式中のスペースは無視される。"^" 上付小文字 (\(x^3\))、"_" 下付き小文字 (\(a_{ij}\)) は拡大解釈され、\(\sum_{i=0}^\infty\) や \(\int_0^\infty\) の上下の数字にも適用される。上付下付や、\(\sqrt 2\) などの直後１文字は操作が適用されるが、２文字以上を表記したい場合は、"{}" を使って明示的にグループ化する。"\(\)" のインライン表示では、上下切り詰めの表示になる。


文字


アクセント記号・分音記号

ピンインの記述もできる。

\(\acute{a}\)\acute{a} \(\grave{a}\)\grave{a} \(\hat{a}\)\hat{a} \(\tilde{a}\)\tilde{a} \(\breve{a}\)\breve{a}
\(\check{a}\)\check{a} \(\bar{a}\)\bar{a} \(\ddot{a}\)\ddot{a} \(\dot{a}\)\dot{a}

導関数

\prime は ' でもOK。

\(\nabla\)\nabla \(\partial\)\partial \(\frac{d}{dx}f(x)\)\frac{d}{dx}f(x) \(f^{\prime\prime}\)f^{\prime\prime}

集合・述語論理

\(\forall\)\forall \(\exists\)\exitsts \(\varnothing\)\varnothing \(\in\)\in \(\ni\)\ni \(\notin\)\notin \(\not \ni\)\not \ni
\(\subset\)\subset \(\subseteq\)\subseteq \(\supset\)\supset \(\supseteq\)\supseteq \(\cap\)\cap \(\cup\)\cup

二項演算子

\(\pm\)\pm \(\mp\)\mp \(\times\)\times \(\cdot\)\cdot \(\bullet\)\bullet
\(\star\)\star \(\div\)\div \(\frac{a}{b}\)\frac{a}{b}

論理演算子

\(\land\)\land \(\lor\)\lor \(\lnot\)\lnot \(\bar{p}\)\bar{p} \(\to\)\to

平方根

\(\sqrt{2}\)\sqrt{2} \(\sqrt[3]{2}\)\sqrt[3]{2} \(\sqrt[n]{x}\)\sqrt{n]{x}

関係演算子

「＜」「＞」 はそのまま記述。

\(\sim\)\sim \(\simeq\)\simeq \(\cong\)\cong \(\approx\)\approx \(\dot=\)\dot=
\(\leqq\)\leqq \(\le\)\le \(\ll\)\ll \(\gg\)\gg \(\ge\)\ge \(\geqq\)\geqq
\(\equiv\)\equiv \(\not\equiv\)\not\equiv \(\ne\)\ne \(\propto\)\propto

幾何学記号

\(\triangle\)\triangle \(\angle\)\angle \(\perp\)\perp \(45^\circ\)45^\circ

矢印

斜め矢印は、頭に ne (North East) などの方角で指定。

\(\leftarrow\)\leftarrow \(\gets\)\gets \(\rightarrow\)\rightarrow \(\to\)\to \(\leftrightarrow\)\leftrightarrow
\(\Leftarrow\)\Leftarrow \(\Rightarrow\)\Rightarrow \(\Leftrightarrow\)\Leftrightarrow
\(\longleftarrow\)\longleftarrow \(\longrightarrow\)\longrightarrow \(\longleftrightarrow\)\longleftrightarrow
\(\Longleftarrow\)\Longleftarrow \(\Longrightarrow\)\Longrightarrow \(\Longleftrightarrow\)\Longleftrightarrow
\(\uparrow\)\uparrow \(\downarrow\)\downarrow \(\updownarrow\)\updownarrow \(\Uparrow\)\Uparrow \(\Downarrow\)\Downarrow \(\Updownarrow\)\Updownarrow
\(\nearrow\)\nearrow \(\searrow\)\searrow \(\swarrow\)\swarrow \(\nwarrow\)\nwarrow \(\mapsto\)\mapsto \(\longmapsto\)\longmapsto

特殊記号

\(\And\)\And \(\ldots\)\ldots \(\cdots\)\cdots \(\infty\)\infty \(\imath\)\imath \(\hbar\)\hbar
\(\diamondsuit\)\diamondsuit \(\heartsuit\)\heartsuit \(\clubsuit\)\clubsuit \(\spadesuit\)\spadesuit \(\flat\)\flat \(\natural\)\natural \(\sharp\)\sharp

ギリシャ文字

\(\Gamma\)\Gamma \(\Delta\)\Delta \(\Theta\)\Theta \(\Lambda\)\Lambda \(\Xi\)\Xi \(\Pi\)\Pi
\(\Sigma\)\Sigma \(\Upsilon\)\Upsilon \(\Phi\)\Phi \(\Psi\)\Psi \(\Omega\)\Omega
\(\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 \(\omicron\)\omicron \(\pi\)\pi \(\rho\)\rho \(\sigma\)\sigma
\(\tau\)\tau \(\upsilon\)\upsilon \(\phi\)\phi \(\chi\)\chi \(\psi\)\psi \(\omega\)\omega

空白

\(a\qquad b\)\qquad \(a\quad b\)\quad \(a\ b\)\ \(a\,b\)\,

定形

大括弧 \[ \left ( \frac{a}{b} \right ) \] 
\left ( \frac{a}{b} \right )
総和 \[ \sum_{k=1}^N k^2 \] 
\sum_{k=1}^N k^2
総積 \[ \prod_{i=1}^N x_i \] 
\prod_{i=1}^N x_i
極限 \[ \lim_{n \to \infty}x_n \] 
\lim_{n \to \infty}x_n
積分 \[ \int\limits_{1}^{3}\frac{e^3/x}{x^2}\, dx \] 
\int\limits_{1}^{3}\frac{e^3/x}{x^2}\, dx
解の公式 \[ x=\frac{-b\pm\sqrt{b^2-4ac}}{2a} \] 
\frac{-b\pm\sqrt{b^2-4ac}}{2a}
連分数 \[ \frac{4}{\pi} = 1 + \frac{1^2}{2+\frac{3^2}{2+\frac{\cdots}{2 + \frac{(2n-1)^2}{2+\cdots}}}} \] 
\frac{4}{\pi} = 1 + \frac{1^2}{2+\frac{3^2}
{2+\frac{\cdots}{2 + \frac{(2n-1)^2}{2+\cdots}}}}
ラマヌジャン \[ \frac{1}{\pi} = \frac{2\sqrt{2}}{9801} \sum_{k=0}^\infty \frac{(4k)!(1103*26390k)}{k!^4 396^{4k}} \] 
\frac{1}{\pi} = \frac{2\sqrt{2}}{9801}
 \sum_{k=0}^\infty \frac{(4k)!(1103*26390k)}{k!^4 396^{4k}}
マクローリン \[ f(x) = \sum_{n=1}^\infty \frac{f^{(n)}(0)}{n!} x^n \] 
f(x) = \sum_{n=1}^\infty \frac{f^{(n)}(0)}{n!} x^n
sin \[ \sin x = x - \frac{x^3}{3!} + \frac{x^5}{5!} - \cdots + (-1)^n \frac{x^{2n+1}}{(2n+1)!} + \cdots \] 
\sin x = x - \frac{x^3}{3!} + \frac{x^5}{5!}
- \cdots + (-1)^n \frac{x^{2n+1}}{(2n+1)!} + \cdots
加法定理 \[ \cos(\alpha \pm \beta) = \cos\alpha \cos\beta \mp \sin\alpha \sin\beta \] 
\cos(\alpha \pm \beta) = \cos\alpha \cos\beta \mp \sin\alpha \sin\beta
行列 2x2 \[ A = \begin{pmatrix} 1 & 2 \\ 3 & 4 \end{pmatrix} \] 
\begin{pmatrix}
1 & 2 \\
3 & 4
\end{pmatrix}
行列 3x3 \[ A = \begin{pmatrix} 1 & 2 & 3 \\ 4 & 5 & 6 \\ 7 & 8 & 9 \end{pmatrix} \] 
\begin{pmatrix}
1 & 2 & 3 \\
4 & 5 & 6 \\
7 & 8 & 9
\end{pmatrix}
行列 4x4 \[ A = \begin{pmatrix} 1 & 2 & 3 & 4 \\ 5 & 6 & 7 & 8 \\ 9 & 10 & 11 & 12 \\ 13 & 14 & 15 & 16 \end{pmatrix} \] 
\begin{pmatrix}
1 & 2 & 3 & 4 \\
5 & 6 & 7 & 8 \\
9 & 10 & 11 & 12 \\
13 & 14 & 15 & 16
\end{pmatrix}
行列 省略 \[ A = \begin{pmatrix} 1 & 0 & \cdots & 0 \\ 0 & 1 & \cdots & 0 \\ \vdots & \vdots & \ddots & \vdots \\ 0 & 0 & \cdots & 1 \end{pmatrix} \] 
\begin{pmatrix}
1 & 0     & \cdots & 0      \\
0 & 1     & \cdots & 0      \\
\vdots & \vdots & \ddots & \vdots \\
0 & 0     & \cdots & 1
\end{pmatrix}
複数行 \[ \begin{align} f(x) & = (a+b)^2 \\ & = a^2+2ab+b^2 \\ \end{align} \] 
\begin{align}
f(x) & = (a+b)^2 \\
& = a^2+2ab+b^2 \\
\end{align}
場合分け \[ f(n) = \begin{cases} n/2, & \mbox{if }n\mbox{ is even} \\ 3n+1, & \mbox{if }n\mbox{ is odd} \end{cases} \] 
f(n) =
\begin{cases}
n/2,  & \mbox{if }n\mbox{ is even} \\
3n+1, & \mbox{if }n\mbox{ is odd}
\end{cases}
連立方程式 \[ \begin{cases} 3x + 5y + z &= 1 \\ 7x - 2y + 4z &= 2 \\ -6x + 3y + 2z &= 3 \end{cases} \] 
\begin{cases}
3x + 5y +  z &= 1 \\
7x - 2y + 4z &= 2 \\
-6x + 3y + 2z &= 3
\end{cases}