はてなブログで数式を書く

はてなブログで数式を書くと癖があってハマることがあります。私が使っている対処方法や、その他にも便利なノウハウを書きます。

Markdownモードを前提とします。

目次

行内の数式

行内の数式は [tex: ～ ] で囲むのが基本です。

[tex:x+y=z]

x+y=z$x+y=z$

指数と添え字で問題が起きます。対処法を知らないとハマります。

指数

指数を使うと数式モードにならずに上付き文字になります。

[tex:x^n+y^n=z^n]

[tex:xⁿ+yⁿ=zⁿ]

ハット ^ の後にスペースを入れると回避できます。

[tex:x^ n+y^ n=z^ n]

xn+yn=zn$x^n+y^n=z^n$

添え字

添え字は _ の前か後にスペースがあると崩れます。前後とも空いていればOKです。

1. [tex:x_1+x_2]
1. [tex:x _1+x _2]
1. [tex:x_ 1+x_ 2]
1. [tex:x _ 1+x _ 2]

1. x1+x2$x_1+x_2$
2. [tex:x 1+x 2]
3. [tex:x 1+x 2]
4. x1+x2$x_1+x_2$

これはMarkdownパーサーがイタリック _ ～ _ を優先的に処理するためだと思われます。

独立した数式

MarkdownパーサーはHTMLタグで囲まれている部分はスキップします。

これを利用して、独立した数式は <div> タグで囲めば崩れないので楽です。

<div align="center">[tex:
x^n+y^n=z^n
]</div>

xn+yn=zn$x^n+y^n=z^n$

正直、毎回これを書くのは面倒ですが、諦めてコピペしています。

displaystyle

分数やシグマなどの大型演算子が行内形式でレンダリングされて縦に詰まります。

<div align="center">[tex:
\sum_{i=1}^n i=\frac{n(n+1)}2
]</div>

∑ni=1i=n(n+1)2$\sum _{i=1}^{n}i=\frac{n(n+1)}{2}$

対策としては \displaystyle を指定します。

<div align="center">[tex:
\displaystyle \sum_{i=1}^n i=\frac{n(n+1)}2
]</div>

∑i=1ni=n(n+1)2${\displaystyle \sum _{i=1}^{n}i=\frac{n(n+1)}{2}}$

\\ で改行すると効果がなくなるため、行ごとに指定する必要があります。

<div align="center">[tex:
\displaystyle \sum_{i=1}^n i=\frac{n(n+1)}2 \\
\sum_{i=1}^n i^2=\frac{n(n+1)(2n+1)}6 \\
\displaystyle \sum_{i=1}^n i^3=\left(\frac{n(n+1)}2\right)^2
]</div>

∑i=1ni=n(n+1)2∑ni=1i2=n(n+1)(2n+1)6∑i=1ni3=(n(n+1)2)2$$\begin{gathered} {\displaystyle \sum _{i=1}^{n}i=\frac{n(n+1)}{2}} \\ \sum _{i=1}^n{i}^2=\frac{n(n+1)(2n+1)}{6} \\ {\displaystyle \sum _{i=1}^n{i}^3={\left(\frac{n(n+1)}{2}\right)}^2} \end{gathered}$$

\begin{aligned} ～ \end{aligned} で囲めば \displaystyle は不要です。複数行書くときにはこちらの方が良いと思います。ただし & で揃える位置を指定しないと右寄せになります。

<div align="center">[tex:
\begin{aligned}
\sum_{i=1}^n i   &= \frac{n(n+1)}2 \\
\sum_{i=1}^n i^2 &= \frac{n(n+1)(2n+1)}6 \\
\sum_{i=1}^n i^3 &= \left(\frac{n(n+1)}2\right)^2
\end{aligned}
]</div>

∑i=1ni∑i=1ni2∑i=1ni3=n(n+1)2=n(n+1)(2n+1)6=(n(n+1)2)2$\begin{array}{rl}\sum _{i=1}^{n}i& =\frac{n(n+1)}{2}\\ \sum _{i=1}^n{i}^2& =\frac{n(n+1)(2n+1)}{6}\\ \sum _{i=1}^n{i}^3& ={\left(\frac{n(n+1)}{2}\right)}^2\end{array}$

require

オプション機能を使用するには \require{...} で読み込む必要があります。一度読み込めばその後の数式でも使えるため、その記事で最初に使用する箇所に書けば良いでしょう。

cancel

打ち消しに使用する斜線です。

<div align="center">[tex:
\require{cancel}
\displaystyle \frac{df}{\cancel{dx}}\frac{\cancel{dx}}{dt}=\frac{df}{dt}
]</div>

dfdxdxdt=dfdt${\displaystyle \frac{df}{\cancel{dx}}\frac{\cancel{dx}}{dt}=\frac{df}{dt}}$

color

文字に色を付けます。

<div align="center">[tex:
\require{color}
\textcolor{red}{123}\textcolor{blue}{abc}
]</div>

123abc$123abc$

Unicode文字

Unicode文字として存在する文字や記号は直接記述しても認識されます。

[tex:\alpha\otimes\beta=α⊗β]

α⊗β=α⊗β$\alpha \otimes \beta =\alpha \otimes \beta$

Unicode文字を使うかは好みの別れる所ですが、私はソースの視認性が良くなるので多用しています。

囲み枠

定理などを枠で囲めばおしゃれです。

<div style="text-align: center; position: relative; margin: 2.5em 0 0 0; padding: 0.5em 1em; border: solid 3px #999999;">
<span style="position: absolute; top: -28px; left: -3px; padding: 0 10px; height: 26px; font-weight: bold; color: white; background-color: #999999; border: 1px solid #999999; border-radius: 5px 5px 0 0;">
加法定理</span>[tex:
\sin(α+β)=\sinα\cosβ+\cosα\sinβ
]</div>

加法定理sin(α+β)=sinαcosβ+cosαsinβ$\sin (\alpha +\beta )=\sin \alpha \cos \beta +\cos \alpha \sin \beta$

スタイルをインラインで書くのは煩雑なので、ブログの設定でCSSをカスタマイズした方が良いかもしれません。

デザインはCSSの解説を参照してください。

• 【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30
• 【CSS】シンプルな囲み枠（ボックス）コピペで楽チン変更も簡単♪ | Purple Life

目次

数式とは直接関係ありませんが、私はブログの冒頭に概略を書いて、その後を「続きを読む」で区切って目次を入れるようにしています。

概略

<!-- more -->

> 目次
> 
> [:contents]

その他

数式の記法が分からない時は、Wikipediaで調べる方法があります。

• WikipediaからTeX情報を取得

Word や PowerPoint で書いた数式を TeX に変換するツールを作りました。

• MS Officeの数式をTeXに変換