目次
JavaScriptでLATEX 並みの数式表示能力を実現する「MathJax.js」
MathJax.js は LATEX 並みの数式表示能力をJavaScriptで実現したライブラリです。
数式の書き方はほぼ「LaTeX + amsmathのスタイル」通りです。
こちらにまとめてくださってます。
あと、こちらのPDF(amsmathパッケージユーザガイド)にも書き方の大量のサンプルがのってます。
この記事でも、お試しに使う程度の基本的な数式のサンプルを書いておきます。
基本的な数式の書き方サンプル
数式は$$~$$ または \(~\) または \[~\]の間に書きます。
奥村晴彦氏のブログに以下のような注意事項もありました。
「$a<b$ のように書くと,ブラウザが < をタグの一部と解釈してしまって,うまくいきません。$a < b$ のようにスペースを空ければたいていうまくいくはずです」ともありました
とりあえず、基本的な書き方を整理してみました。
基本形を知っていれば、その組み合わせで、あらかたはかけますからね。
表の「書き方」列にある式を、$$<式>$$のように「$$」で括って、はてなブログの記事上に書けば、表示例の列のように数式が表示されます。
種類 | 書き方 | 表示例 |
---|---|---|
普通の式 | y=2x+1 | $$y=2x+1$$ |
大きい文字で書く | \Large y=2x+1 | $$\Large y=2x+1$$ |
もっと大きい文字で書く | \LARGE y=2x+1 | $$\LARGE y=2x+1$$ |
もっと大きい文字で書く | \huge y=2x+1 | $$\huge y=2x+1$$ |
分数 | \frac ab | $$\frac ab$$ |
平方根 | \sqrt 3 | $$\sqrt 3$$ |
平方根 | \sqrt[3]{x} | $$\sqrt[3]{x}$$ |
添字 | x_i | $$x_i$$ |
平均 | \bar x | $$\bar x$$ |
ベクトル | \vec x | $$\vec x$$ |
AまたはB | A\cupB | $$A \cup B$$ |
AかつB | A\capB | $$A \cap B$$ |
べき乗 | x^2 | $$x^2$$ |
べき乗 | (a+1)^3 | $$(a+1)^3$$ |
大なり | x \gt y | $$x \gt y$$ |
大なりイコール | x \geqq y | $$x \geqq y$$ |
小なり | x \lt y | $$x \lt y$$ |
小なりイコール | x \leqq y | $$x \leqq y$$ |
シグマ | \sum_{i=1}^n x_i+2 | $$\sum_{i=1}^n x_i+2$$ |
積分 | \int_a^b f(x)\,dx | $$\int_a^b f(x)\,dx$$ |
極限 | \lim_{n\rightarrow\infty} f(x) = \ell | $$\lim_{n\rightarrow\infty} f(x) = \ell$$ |
連立式 | \eqalign{ ax + by &= c \\ x + 2y &= 3 } | $$\eqalign{ ax + by &= c \\ x + 2y &= 3 }$$ |
式の展開 | \eqalign{ (a+b)^2 &= (a+b)(a+b) \\ &= a^2 + ab + ba + b^2 \\ &= a^2 + 2ab + b^2 } | $$\eqalign{ (a+b)^2 &= (a+b)(a+b) \\ &= a^2 + ab + ba + b^2 \\ &= a^2 + 2ab + b^2 }$$ |
条件式 | |x| = \cases{ x & \text{if } x\ge 0\cr -x & \text{if } x\lt 0 } | $$|x| = \cases{ x & \text{if } x\ge 0\cr -x & \text{if } x\lt 0 }$$ |
行列式 | A = \pmatrix{ a_{11} & a_{12} & \ldots & a_{1n} \cr a_{21} & a_{22} & \ldots & a_{2n} \cr \vdots & \vdots & \ddots & \vdots \cr a_{m1} & a_{m2} & \ldots & a_{mn} \cr } | $$ A = \pmatrix{ a_{11} & a_{12} & \ldots & a_{1n} \cr a_{21} & a_{22} & \ldots & a_{2n} \cr \vdots & \vdots & \ddots & \vdots \cr a_{m1} & a_{m2} & \ldots & a_{mn} \cr }$$ |
Mathjax.jsをはてなブログで使えるようにする
はてなブログでは、デザイン>カスタマイズ(レンチのアイコン)>フッタのHTMLを記述できます・・に、以下を追記して更新すれば使えます。
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_HTML"></script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [["\\(","\\)"] ],
displayMath: [ ['$$','$$'], ["\\[","\\]"] ]
},
CommonHTML: { matchFontHeight: false }
});
</script>
画面イメージです。
これで保存すれば、使えるようになるはずです。
ではでは。