The Fool In The Valleyの雑記帳

-- 好奇心いっぱいのおじいちゃんが綴るよしなし事 --

トップ > はてなブログに数式を書く　その２

はてなブログに数式を書く　その２

はてなブログに見やすい数式を書くために、以前、Markdown編集でLaTeXのコードを書く方法を書きました。 tfitv.com

このLaTeX等で記述された数式をウェブブラウザ上で見やすく表示するものとしてはMathJaxというJavaScriptライブラリがあります。 今回、ブログの記事を書くために試してみるとなかなかいい感じです。そこで備忘のためにここでまとめておくことにします。

ーーーーーーーーーー

例えば下のような複数の数式を書くときは左に寄せて、インデントをつけ、さらに式番号が振られていると相互に参照できて読み易くなるでしょう。

\displaystyle{ I\frac{d^2 \varphi}{\mathrm{dt}^2}=V L \sin \varphi-H L \cos \varphi }
\displaystyle{ H=M \frac{d^2}{d t^2}(y+L \sin \varphi) }
\displaystyle{ V=M g+M \frac{d^2}{d t^2} L \cos \varphi }
\displaystyle{ u-H=m \frac{d^2 y}{d t^2} }

そのためには、まず、はてなブログのダッシュボード→設定→詳細設定→要素にメタデータを追加　に以下のコードを書き足します。

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
    displayAlign: 'left', // 左寄せ
    displayIndent: '2em', // 2字分のインデント
    TeX: { equationNumbers: { autoNumber: "AMS" } }
});</script>

そして、Markdown編集で、はてなTex記法を使って

[tex:\begin{eqnarray}\displaystyle{
....
}\end{eqnarray}]

のように挟んで記述しておくと、次のように表示されて、自動的に式番号も付けられて見やすくなります。

\begin{eqnarray}\displaystyle{
I\frac{d^2 \varphi}{\mathrm{dt}^2}=V L \sin \varphi-H L \cos \varphi
}\end{eqnarray}
\begin{eqnarray}\displaystyle{
H=M \frac{d^2}{d t^2}(y+L \sin \varphi)
}\end{eqnarray}
\begin{eqnarray}\displaystyle{
V=M g+M \frac{d^2}{d t^2} L \cos \varphi
}\end{eqnarray}
\begin{eqnarray}\displaystyle{
u-H=m \frac{d^2 y}{d t^2}
}\end{eqnarray}

逆に式番号を振りたくない場合は、はてなTex記法で*を付けて

[tex:\begin{eqnarray*}\displaystyle{
....
}\end{eqnarray*}]

のように挟んでおくと、次のように式番号は表示されなくなります。

\begin{eqnarray*}\displaystyle{
\begin{aligned}
& -\left(\mathrm{ck}_2+\mathrm{dk}_4\right)=\lambda_1+\lambda_2+\lambda_3+\lambda_4 \\
& -\left(\mathrm{a}+\mathrm{ck}_1+\mathrm{dk}_3\right)=\lambda_1 \lambda_2+\lambda_2 \lambda_3+\lambda_3 \lambda_4+\lambda_4 \lambda_1+\lambda_1 \lambda_3+\lambda_2 \lambda_4 \\
& -(\mathrm{ad}-\mathrm{bc}) \mathrm{k}_4=\lambda_1 \lambda_2 \lambda_3+\lambda_2 \lambda_3 \lambda_4+\lambda_3 \lambda_4 \lambda_1+\lambda_4 \lambda_1 \lambda_2 \\
& (\mathrm{ad}-\mathrm{bc}) \mathrm{k}_3=\lambda_1 \lambda_2 \lambda_3 \lambda_4
\end{aligned}
}\end{eqnarray*}

ところで、

\displaystyle{ \begin{aligned} & \dot{x_1}=x_2 \\ & \dot{x_2}=a x_1+c u \\ & \dot{x_3}=x_4 \\ & \dot{x_4}=b x_1+d u \end{aligned} }

のような連立微分方程式は、スペースを使って項の位置を揃えると式の意味が分かりやすくなりますが、はてなTex記法ではスペースは無視されてしまいます。このときは代わりに'\ 'を使うと、

\begin{eqnarray}\displaystyle{
\begin{aligned}
& \dot{x_1}=\ \ \ \ \ \ \ \ \ \ x_2 \\
& \dot{x_2}=a x_1\ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ +c u \\
& \dot{x_3}=\ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \  x_4 \\
& \dot{x_4}=b x_1\ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ +d u
\end{aligned}
}\end{eqnarray}

のように分かりやすい表示にすることができます。

また、式が横に長いと、ブラウザで表示したときに横に収まりきらなくなります。そのとき横方向にスクロールできるようになっていると、表示を整然とさせることができます。 そのためには、ダッシュボード→デザイン→カスタマイズ　で｛｝デザインCSS　に以下のコードを書き足しておきます。

/* MathJax */
.MathJax_Display {
    overflow: auto hidden;
}

こうしておくことにより、式が長い場合はスクロールして表示させるようにできます。

\begin{eqnarray}\displaystyle{
\left(\begin{array}{cccc}
0 & c & 0 & d \\
{ }_{-c} & 0 & d & 0 \\
0 & 0 & 0 & -a d+b c \\
0 & 0 & a d-b c & 0
\end{array}\right)\left(\begin{array}{l}
k_1 \\
k_2 \\
k_3 \\
k_4
\end{array}\right)=\left(\begin{array}{c}
\lambda_1+\lambda_2+\lambda_3+\lambda_4 \\
\lambda_1 \lambda_2+\lambda_2 \lambda_3+\lambda_3 \lambda_4+\lambda_4 \lambda_1+\lambda_1 \lambda_3+\lambda_2 \lambda_4 \\
\lambda_1 \lambda_2 \lambda_3+\lambda_2 \lambda_3 \lambda_4+\lambda_3 \lambda_4 \lambda_1+\lambda_4 \lambda_1 \lambda_2 \\
\lambda_1 \lambda_2 \lambda_3 \lambda_4
\end{array}\right)
}\end{eqnarray}

ーーーーー

実は先週紹介したGyrodの記事を書くための準備をしているのですが、これを使うと多くの数式を使った記事を読みやすく書くことができそうです。