はてなブログで数式を書く方法を前回の記事で書きましたが、問題がありました。

MathJaxを自分で導入する方法では、sigmaなどのキーワードがはてなキーワードのリンクになってしまい、数式表示にならない問題がわかりました。

はてなブログの有料版であればはてなキーワードのリンクを回避できるようですが、試行錯誤の結果、はてなブログ公式の方法にひと工夫加える方法に落ち着きました。前回の記事で言うと冒頭の1つ目です。

方法

まず、管理画面のデザインの設定で以下のCSSを書き加えます。

.entry-content pre.math {
  text-align: center;
  background: none;
  color: #000;
}

記事中の数式は以下のように書きます。[tex:という公式の方法を<pre>で囲むのです。

<pre class="math">[tex:
\begin{align}
e^x &= \sum_{n=0}^\infty \frac{x^n}{n!} = -1 \\
x &= \sigma
\end{align}
]</pre>

インライン表示は [tex: e^{i\pi} = -1] と書いて、 $e^{i\pi} = -1$ です。

インライン表示では <, & は使用不可です。エスケープしようとしてもダメです。 ] もダメでした。

説明

公式の[tex:を<pre>で囲むと、はてなキーワードのリンクを回避でき、かつエスケープも不要になるようです。[tex:だけでははてなキーワードのリンクも回避できませんでした。

ただし、<pre>で囲むとはてなブログ標準のスタイルシートにより、背景が黒になり左寄せになってしまいます。数式は表示されますが、この見た目が嫌なので、スタイルシートで text-align, background, color を指定して、中央配置、白地に黒になるようにします。

<pre>のすべてにこのスタイルシートが適用されると、今度は数式ではないコードブロックの表示が困ったことになるので、このスタイルシートは数式にだけ適用されるように限定したいです。このために<pre>にclass="math"を付け、スタイルシートにも .math を付与します。

これでできあがりです。

前回の記事のMathJaxを導入する方法で数式内の改行 \\ を \\\\ と書かないといけない問題も、この方法なら回避できます。

ブロック表示では<pre>を使えますが、インライン表示では使えませんので、インライン表示ではエスケープがたくさん必要なことは受け入れないといけません。

前回の記事での方法に比べ、デメリットはいまのところブロック内の数式表示の開始が <pre class="math">[tex: と長いことと、インライン表示での制限が大きいことです。インライン表示で <, &, ] が使えない問題は回避方法がわからなくて困ったものです。