アラカン"BOKU"のITな日常

文系システムエンジニアの”BOKU”が勉強したこと、経験したこと、日々思うことを書いてます。

はてなブログの見たままモードで数式を書けるMathJax.jsの書き方・使い方を整理する

前回、はてなブログの見たままモードで、数式を書くやり方を覚えて、せっかくなのでベイズの定理の例題をさくっとやってみました。

arakan-pgm-ai.hatenablog.com

 

そうすると、ちょっと面白くなってきたので、それを実現してくれている仕組みである「MathJax.js」について、色々調べてみました。

 

LaTex並の数式描画をJavaScriptで実現!

 

奥村晴彦氏が簡単に紹介いただいてます。

MathJaxによる数式表示

 

引用させていただくと。

MathJax は LATEX 並みの数式表示能力をJavaScriptで実現したライブラリです。

数式の書き方はほぼLaTeX + amsmathのスタイル通りです。

 

もう補足の必要もないですね。

 

書いてある通りです。

 

はてなブログで使うには、デザイン>カスタマイズ(レンチのアイコン)>フッタの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>

 

2018/03/16追記

>$~$の指定は、関係ないソース(${}などで囲ったもの)で文字化けが発生したため消しました。

 

数式の書き方は「ほぼLaTeX + amsmathのスタイル通り」ということなんですが、LaTexの達人でない自分には、少々敷居が高いです。

 

LaTexのサンプルのサイトからコピペしてきても、そのままで、すんなりいかないことも多かったですし。

 

なので、ちょっと自分の備忘も兼ねて、よく使いそうな書き方を整理してみようかなと思います。

 

まずは基本的な数式の書き方から

数式は$$~$$,\(~\),\[~\]の間に書く前提です。

奥村晴彦氏のブログに以下のような注意事項もありました。

「$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 }$$

 

 こんな感じですかね。

 

もっと詳しい書き方は、こちらのページに例がてんこ盛りのってます。

 

実際に上記の表は、このページから自分でも使いそうな、ほんの一部を抜き出しただけです。

 

ものすごい機能があるので、たぶん、丹念に見れば、どんな数式でも書けそうな気はしますね。

 

数学は全然得意じゃないですが、数式がきれいにかけると、ちょっと「できる人」になった気がして良いですね(笑)