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

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

数学 はてなブログ

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

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

【2020.11.16】他サービスの紹介を追記しました。
【2020.04.16】変換フォームにリンクしました。
【2020.03.14】概要を追記しました。
【2019.12.02】括弧についての注意書きと aghtex へのリンクを追記しました。

目次

お断り

はてなブログでの数式には細かい問題点があり、この記事では主に回避方法を紹介しています。

そのような苦労なく数式が利用できるサービスもあるので、紹介しておきます。

自動変換

id:ano3さんが、この記事で紹介した記法に変換するフォームを作成してくださいました。

ano3.hatenablog.com

概要

はてなブログで数式を書くと、演算子や \ 周りに癖があります。余分なエスケープ \ を追加する回避策がよく紹介されますが、この記事では div タグで囲む方法を推奨します。そうすれば他の回避策はほぼ不要になります。

<div>[tex:
\{x^n+y^n\}=z^n \\
\{x_n+y_n\}=z_n
]</div>
\{x^n+y^n\}=z^n \\ \{x_n+y_n\}=z_n

詳細は独立した数式を参照してください。

行内の数式

div タグを使うと改行されてしまうため、文章の行内に書く数式には使えません。

※ CSS で回避することはできますが、煩雑になり過ぎるため省略します。

行内の数式は div タグなしで [tex: ～ ] だけで囲みます。

[tex:x] の平方根は [tex:\pm\sqrt{x}] です。

x の平方根は \pm\sqrt{x} です。

指数と添え字と括弧で問題が起きます。対処法を知らないとハマります。以下、回避策を説明します。

【補足】Markdown モード特有の問題です。div タグを使えば回避できますが、行内では使えないので回避策が必要となります。

指数

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

[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 _ 2，x _ {1}+x _ {2}

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

括弧

{ ～ } は普通の TeX でも \ が必要ですが、はてなブログでは二重に書く必要があります。また、数式の終わりと区別するため ] にも二重に \ を付ける必要があります。\ の後にアルファベットが来る場合は二重にしなくても問題ないようです。（下記 \times 参照）

* NG: [tex:\{a+b\}\times[c+d]\times(e+f)]
* OK: [tex:\\{a+b\\}\times[c+d\\]\times(e+f)]
  • NG: {a+b}\times[c+d\times(e+f)]
  • OK: \{a+b\}\times[c+d]\times(e+f)

独立した数式

ここまで見たように行内の数式では Markdown の干渉を避けるために小細工が必要でした。独立した数式では、Markdown パーサーが <div> や <pre> など一部のタグをスキップすることを利用して、<div> タグで囲むことで干渉を回避できます。

こうすれば余分なスペースを入れたり \ を二重に書く必要はありません。ただし ] は数式の終わりと区別するため一重の \ が必要です。

<div align="center">[tex:
x^n+y^n=z^n \\
\{a+b\}\times[c+d\]\times(e+f)
]</div>
x^n+y^n=z^n \\ \{a+b\}\times[c+d]\times(e+f)

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

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}

裏技

【注意】2020年2月4日現在、この方法は使えなくなったようです。

どこか一箇所で [tex: ～ ] を使用すれば、独立した数式に $$ ～ $$ や \[ ～ \] を使用できるようです。やはり Markdown の干渉を受けるため <div> で回避します。

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

ただし <div> で囲んでもはてなキーワードのリンク処理を防ぐことはできません。特定の数式が表示されないという現象が発生します。

<div>
$$k-1$$
</div>
$$k-1$$

このように問題があり、サポート外の方法のため、使わない方が無難でしょう。

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 を使う方法です。私自身はこちらに乗り換えました。

別のライブラリ aghtex を使う方法です。作者の方がはてなブログで使う方法を説明されています。

MathJax や KaTeX などは数式部分だけの変換を目的としたものだが、aghtex は元々 *.tex の文書全体の変換を目的としたものなので、paragraphモードのコマンドも使えるし、式番号も生成できるし、式へのリンクも生成できる。

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