MathJax

Beautiful math in all browsers

\[ \frac{1}{\pi} = \frac{2\sqrt{2}}{9801} \sum_{k=0}^\infty \frac{(4k)!(1103*26390k)}{k!^4 396^{4k}} \]

Table of Contents


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

概要

  • Web上で数式表示するならこれが定番。数式表示用の javaScript ライブラリです。アーカイブ Mathjax-master.zip で 35MB、展開すると 1.2GB もあるのでサーバに置くときは要注意。CDN (Contents Delivery Network) を使うのが一般的。本家以外のサーバは十分吟味すること。突然サーバが無くなっても文句は言えない(経験者)。CDN サーバ維持やMathJaxの保守に Donation を求めてます。
  • パッと見だと、TeX の記述が面倒くさそうだけど、必要な記述を このサイトから、探せば良いので、慣れるのは早いと思う。
  • レンダリングされるのに時間がかかるので、表示の初期では数式記述が見えてしまうけど、これの回避は難しいなぁ。MathJaxのレンダリング終了まで表示を抑止するJavaScriptは書けると思うけど、個人レベルでやるには面倒臭い。商売でやるなら対応する必要があるだろうな。
  • deck.js を使ったプレゼン資料にMathJaxで数式を埋め込んでたんだけど、deck.js がレイアウトを自動で行ってくれる時点で、まだレンダリングが終了しない。なので、レイアウトがズレる。改行挿入や CSSで調整など、泥臭く回避している。

本家


関連サイト



導入

CDN 利用の方が一般的。末尾に、MathJax.js?config=TeX-AMS-MML_SVG&locale=ja と、ロケールを追加すると、数式上で右クリックしたときに出てくるメニューが日本語化する。

CDN (Content Delivery Network)

HTML+CSS 出力
<script type="text/javascript" async
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML">
</script> 
SVG画像 出力
<script type="text/javascript" async
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS-MML_SVG">
</script> 

Combined Configurations — MathJax 2.6 documentation

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

<code>
\[ \begin{align}
  f(x) & = (a+b)^2 \\
  & = a^2+2ab+b^2 \\
  \end{align} \]</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} \]

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

Tips


取り消し線

  • \require{cancel} を記述すると、取り消し線が使えるようになる。
 \[
  \require{cancel}
  M = \cancel{m} r (\frac{2 \pi}{T})^2 \frac{r^2}{G \cancel{m}} = \frac{4 \pi^2 r^3}{GT^2}
\] 

\[ \require{cancel} M = \cancel{m} r (\frac{2 \pi}{T})^2 \frac{r^2}{G \cancel{m}} = \frac{4 \pi^2 r^3}{GT^2} \]

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

MathJax.Hub.Config({
  showProcessingMessages: false
}); 

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

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

MathJax.Hub.Config({
  displayAlign: "left",
  displayIndent: "2em",
}); 

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

div.MathJax_SVG_Display {
  text-align: left !important;
  display: inline !important;
} 

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

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

            MathJax.Hub.Queue(["Typeset",MathJax.Hub], [drawCanvas]);
            function drawCanvas(){
           ...
            } 

レンダリング終了後に、透明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でのレンダリングを指定する。

            document.getElementById("tex").innerHTML = tex;
            MathJax.Hub.Queue(["Typeset",MathJax.Hub,"tex"]); 

Modifying Math on the Page — MathJax 2.4 documentation


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

            <script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_SVG"></script>
            <script type="text/x-mathjax-config">
            MathJax.Hub.Config({
              styles: {
                ".MathJax_SVG svg > g, .MathJax_SVG_Display svg > g":  {
                  fill: "#333",
                  stroke: "#333"
                }
              }
            });
             </script> 

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


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

<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_SVG"></script>
<script>
MathJax.Hub.Config({
  TeX: {
    extensions: ["color.js"],
  }
});
</script> 

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

色指定: \[a+\color[RGB]{0,255,255} bc \color[RGB]{255,255,0} + d \] a+\color[RGB]{0,255,255}bc\color[RGB]{255,255,0}+d \color[RGB]{0,0,255}
色指定: \[ a + \color[rgb]{0,1,1} bc \color[rgb]{1,1,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\) などの直後1文字は操作が適用されるが、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} \(\mathbf{A}\)\mathbf{A}

導関数

\prime は ' でもOK。

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

累積

\[\sum_{i=a}^b\]\sum_a^b \[\int_a^b\]\int_a^b \[\prod_{i=a}^N x_i\]\prod_{i=a}^N x_i \[\lim_{n \to \infty}x_n\]\lim_{n \to \infty}x_n

集合・述語論理

\(\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}
                



Copyright 2019 OMORITA Fukashi All Rights Reserved.

Last Modified:2019/05/06 12:26:01 from ELITEDESK by OMORITA Fukashi