【お知らせ】プログラミング記事の投稿はQiitaに移行しました。

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

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

Markdown モードを前提とします。ブログのデフォルトのままコピペで使える範囲内で紹介します。

目次

行内の数式

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

[tex:x+y=z]

x+y=z

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

【補足】Markdown モード特有の問題です。

指数

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

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

[tex:xn+yn=zn]

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

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

x^ n+y^ n=z^ n

添え字

添え字はやや複雑な挙動を示します。_ の左右にスペースを入れるのが無難でしょう。

1. 空白なし:[tex:x_1+x_2][tex:x_{1}+x_{2}]
1. 左に空白:[tex:x _1+x _2][tex:x _{1}+x _{2}]
1. 右に空白:[tex:x_ 1+x_ 2][tex:x_ {1}+x_ {2}]
1. 左右に空白:[tex:x _ 1+x _ 2][tex:x _ {1}+x _ {2}]
  1. 空白なし:x_1+x_2,[tex:x{1}+x{2}]
  2. 左に空白:[tex:x 1+x 2],[tex:x {1}+x {2}]
  3. 右に空白:[tex:x 1+x 2],[tex:x {1}+x {2}]
  4. 左右に空白:x _ 1+x _ 2x _ {1}+x _ {2}

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

独立した数式

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

【補足】<div><pre> など一部のタグだけのようです。

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

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

x^n+y^n=z^n

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

displaystyle

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

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

\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>
\displaystyle{
\sum_{i=1}^n i=\frac{n(n+1)}2
}

\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>

\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}

裏技

【注意】この方法は非推奨です。

どこか一箇所で [tex:] を使用すれば、独立した数式に $$$$\[\] を使用できるようです。これを使えばかなりすっきりします。ただし正式サポートなのか不明のため推奨はしません。はてなキーワードのリンク処理も入り込んでしまいます。

<div>
$$\sum_{i=1}^n i=\frac{n(n+1)}2$$
\[\sum_{i=1}^n i^2=\frac{n(n+1)(2n+1)}6\]
</div>
$$\sum_{i=1}^n i=\frac{n(n+1)}2$$ \[\sum_{i=1}^n i^2=\frac{n(n+1)(2n+1)}6\]

require

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

cancel

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

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

\require{cancel}
\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>

\require{color}
\textcolor{red}{123}\textcolor{blue}{abc}

以下の記事を参考にしました。

その他

拡張機能は本家のドキュメントで説明されています。

どのコマンドがどの拡張に含まれているかの一覧表もあります。

ソースコードでは以下に対応します。

例えば color.js を見ると、macros:{} の箇所で追加されているコマンド(今回取り上げた textcolor など)が確認できます。

macros:{color:"Color",textcolor:"TextColor",definecolor:"DefineColor",colorbox:"ColorBox",fcolorbox:"fColorBox"}

Unicode文字

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

[tex:\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: solid 1px #999999; border-radius: 5px 5px 0 0;">
加法定理</span>[tex:
\sin(α+β)=\sinα\cosβ+\cosα\sinβ
]</div>
加法定理
\sin(α+β)=\sinα\cosβ+\cosα\sinβ

style属性はCSSと呼ばれるデザインの情報です。良く分からない場合でも、このままコピペすれば使用できます。

CSS

【注意】この節はCSSの知識を前提とします。

スタイルを毎回インラインで書くのは煩雑です。ブログの設定でCSSをカスタマイズした方が良いでしょう。

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

目次

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

概略

<!-- more -->

> 目次
> 
> [:contents]

その他

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

数式の画像から TeX に変換するアプリがあります。

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

Visual Studio Code で下書きする方法は以下を参照してください。

KaTeX をテストしました。

はてなブログで数式を使い始めた当初、以下の記事を参考にしました。