"BOKU"のITな日常

BOKUが勉強したり、考えたことを頭の整理を兼ねてまとめてます。

JavaScriptでLATEX 並みの数式表示能力を実現する「MathJax.js」をはてなブログで使えるようにする

f:id:arakan_no_boku:20190301193447j:plain

目次

JavaScriptLATEX 並みの数式表示能力を実現する「MathJax.js」

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

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

こちらにまとめてくださってます。

mathlandscape.com

あと、こちらの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>

画面イメージです。

f:id:arakan_no_boku:20210502221133p:plain

これで保存すれば、使えるようになるはずです。

ではでは。