はてなブログを始めて約1年半ほど経ち、やっと数式の書き方がわかってきました。 今回はちょっと癖のある、はてなブログでのきれいな数式の書き方をまとめます🐜
執筆環境
私は普段、ローカルで.mdファイルに下書きし、Chrome + Markdown Viewerで表示を確認しています。
このとき、一般的なTex(LaTex)記法（インライン数式なら、$hoge$のように$で括る）で数式を書いています。裏でMathJaxが動いているようですね。
下書きが終わったら、数式部分をはてなTex記法(インライン数式なら、[tex: hoge ]のように[tex: と ]で括る（可読性を考慮して、私は直前直後にスペースを入れてます。本来は不要。））に変えて、はてなブログに書き込んでいます。
このとき、編集モードはMarkdownモードです。
どちらも同じMarkdownで書いているのですが、どうしてもはてなブログ側の仕様により、うまく表現できない場合があります。 なので、きれいに表示させるためには、はてなブログ側でうまく読み込めるよう、少しだけお膳立てしてあげる必要があります。
MathJaxをはてなブログに埋め込み方法は避けるべき
少しググってみると、「はてなブログにMathJaxを埋め込んで、Tex記法で数式を表示させる方法」がヒットすると思いますが、これは避けたほうが良いです。
私も以前この方法をとっていましたが、これをやってしまうと、ただでさえ読み込みが遅いはてなブログがさらに遅くなってしまい、最悪数式のレンダリングがうまくいかず、崩れたページが表示されます。 それだけでなく、この方法だと表示されないギリシャ文字がいくつかあり、使いづらいです。
以上の理由から、SEOの観点だけでなく、使い勝手の観点からも好ましくない方法ですので、避けるべきだと思います。
Tex記法とはてなTex記法の比較
ローカル環境でも、はてなブログ環境でもMarkdownで記述することを前提に、「Tex記法」と「はてなTex記法」の比較をしながら、書き方を整理します。
ディスプレイ数式
ここでのディスプレイ数式とは、数式を新しい行に表示する数式のことを指します。他の呼び方として、ディスプレイモードやディスプレイスタイル、ブロックなどがあるようです。
Tex記法では、$2つで括る方法が一般的です。
はてなTex記法では、後述のように[tex: ]にhtmlを追加することで、中央揃えで書くことができます。
表示
Tex記法
$$ F = ma $$
はてなTex記法
<div align='center' class='scroll'>
[tex: \displaystyle
F = ma
]
</div>
インライン数式
ここでのインライン数式とは、文中に表示する数式のことを指します。他の呼び方として、インラインモードやインラインスタイル、単にインラインなどがあるようです。
Tex記法では、$1つで括る方法が一般的です。
はてなTex記法では、ディスプレイ数式とは異なり、[tex: ]だけで書きます。
表示
を物体の質量、
を加速度とすると、
は力を示す。
Tex記法
$m$は物体の質量、$a$は加速度であるとき、$F$は力を示す。
はてなTex記法
[tex: m ]を物体の質量、[tex: a ]を加速度とすると、[tex: F ]は力を示す。
角括弧[]
Tex記法ではそのまま[や]と書けばよいですが、はてなTex記法では想像以上に厄介です。
はてなTex記法のディスプレイ数式では、直前にバックスラッシュ\が1つ必要です。
しかし、インライン数式では2つ必要です。
ディスプレイ数式例
表示
Tex記法
$$
y[n] = \sum_{k=0}^{M}b_{k}x[n-k]
$$
はてなTex記法
直前にバックスラッシュ\が1つ必要。
<div align='center' class='scroll'>
[tex: \displaystyle
y\[n\] = \sum_{k=0}^{M}b_{k}x\[n-k\]
]
</div>
インライン数式例
表示
はシステムの出力、
はシステムの入力である。
Tex記法
$y[n]$はシステムの出力、$x[n]$はシステムの入力である。
はてなTex記法
直前にバックスラッシュ\が2つ必要。
[tex: y\\[n\\] ]はシステムの出力、[tex: x\\[n\\] ]はシステムの入力である。
下付き文字｜アンダースコア
下付き文字を書きたい際に、Tex記法ではアンダースコア_を使いますね。
はてなTex記法のディスプレイ数式でも_だけでOKです。
ただし、インライン数式では、直前にバックスラッシュ\が1つ必要です。
ディスプレイ数式例
Tex記法もはてなTex記法も同じであるため、割愛。
インライン数式例
表示
時刻
のx座標の位置
、速度
、加速度
は以下のように書ける。
Tex記法
時刻$t$のx座標の位置$x_t$、速度$\dot{x}_t$、加速度$\ddot{x}_t$は以下のように書ける。
はてなTex記法
直前にバックスラッシュ\が1つ必要。
時刻[tex: t ]のx座標の位置[tex: x\_t ]、速度[tex: \dot{x}\_t ]、加速度[tex: \ddot{x}\_t ]は以下のように書ける。
不等号
等号付き不等号（や
など）をよく使うので、はじめから記号を使わず
\leqや\geqqと書いています。したがって、私の運用ではTex記法とはてなTex記法で違いはありません。
ここでは不等号の書き方を、以下にまとめておきます。
| 表示 | 書き方（共通） |
|---|---|
\lt |
|
\leq |
|
\leqq |
|
\ll |
|
\gt |
|
\geq |
|
\geqq |
|
\gg |
バーティカルバー｜縦棒
いわゆる縦棒 は、Tex記法とはてなTex記法、またはディスプレイ数式とインライン数式でも
|と書けば問題ありません。
ただし、Markdownの表では表示されないので、Tex記法でもはてなTex記法でもこのときだけは、\midと書く必要があります。
| 表示 | 書き方（Markdown表のみ） |
|---|---|
p(x \mid y) |
まとめ
ここまでの内容をまとめると、以下のようになります。
チートシートして使ってもらえればと、思います。
おわりに
これまで数式を書くときに、自分の過去記事をいろいろ参照して煩わしかったので、この記事で整理することができました。
最近はZennという新しいサービスもあって、目移りしちゃいますね！
でも私は、不満はありますが、はてなブログが気に入っているので、しばらくは様子見です。
参考になれば幸いです(^^)
