aghtex4hatenablog: はてなブログの数式を aghtex で表示する

はてなブログの数式は使いにくい。 記事 [1] のコメントで n7shi さんに「数式にMarkdownやはてなキーワードの処理が入り込んで」ということを指摘してもらった。 実際にはてなブログで数式を色々書いてみると確かに段々とこれが気になってきた。 先ず ] を含む $\TeX コードを指定する方法が分からない (→n7shi さんのコメント参照: \\] とすれば良いそうだ。というか記事 [2] にもちゃんと書いてあった…)。それがなくてもいろいろ回避するために書き方を変えるのは疲れる。

• [1] はてなブログを数式のあるメモに使ってみるの事 - TBD
• [2] はてなブログで数式を書く - 七誌の開発日記

n7shi さんの最近の記事を見るとどうやらはてなブログの MathJax ではなくて K%{\KaTeX}% を自前で呼び出して数式を表示しているようだ [3]。 自分で数式の表示処理を呼び出した方がいろいろ制御できるから便利なのである。

• [3] KaTeXのテスト - 七誌の開発日記

ところではてなブログでは は記事の最初の方に [tex:～] がないと有効にならないらしい。 →別の理由だった。このページの下の補足を参照のこと。

1 顛末: aghtex を使いたい

どうせ他のライブラリを自分で呼び出すとなれば、やはり aghtex を使いたい。aghtex は10年ぐらい前から作っている自前の$\LaTeX表示ライブラリ (github.com/akinomyoga/agh) [4]。MathJax や K%{\KaTeX}% などは数式部分だけの変換を目的としたものだが、aghtex は元々 *.tex の文書全体の変換を目的としたものなので、paragraphモードのコマンドも使えるし、式番号も生成できるし、式へのリンクも生成できる。

• [4] akinomyoga/agh: Ageha JavaScript Library

追記: MathJax でも式番号自動生成とリンクをできるらしい [5]。

• [5] Automatic Equation Numbering — MathJax 3.0 documentation

1.1 はてなブログのスタイルシートと干渉する問題

しかし実際に aghtex を使ってみると表示が滅茶苦茶になってしまう。どうやらはてなブログの設定している CSS で .entry-content table {...} だとか .entry-content table td {...} だとかいうものがあって、それが aghtex の生成する <table> や <td> のスタイルを上書きしてしまうという事が起こっている様だ。こういう事は一般に起こりうる問題であると前々から認識していたが、できるならばここで根本的な対策をしておきたい。

• (没案1) 対策として <table> や <tr> や <td> を使わずに適当な要素に display: inline-table; や display: table-row; や display: table-cell; を指定するように書き換えてみたら colspan や rowspan が効かなくなってこれはこれで駄目だ。調べると display: table-cell; で colspan, rowspan を使う方法は存在しないようだ。何のための display: table-cell; なのか、という気がしないでもない。
• (没案2) CSS の詳細度を色々弄って何とかならないかと考えたが、親ドキュメントで #id table td などとやられた日には、詳細度で勝つために動的に CSS を生成しなければならない。そもそも、CSSの詳細度は設計が根本的に狂っている。広まってしまったので今から仕様を変える訳にも行かないのだろう。
• 結局 !important で逃げるしかないという事になった。!important を使うと今までの詳細度による計算が変わってしまう (全てに !important をつければ今までと変わらないのかもしれないがそれは嫌だ。!important は最低限にしたい)。動かなくなるといけないので慎重に書き換えなければならない。結局 aghtex を整理しながら大幅に手を入れることになった。取りあえず今のところは動いている。

1.2 MathJax や K%{\KaTeX}% には \multicolumn がない?

しかし MathJax や K%{\KaTeX}% がはてなブログのスタイルシートの影響を受けていないのは何でだろう。table を使っていないのだろうか。だとすれば colspan や rowspan を使わずに色々実現しているのだろうか。例えば \multicolumn をどうやって実現するんだろう (座標を計算して絶対配置するしかない?) と思って、確認しようとしたらどうやら MathJax も K%{\KaTeX}% も \multicolumn に対応していないようだ。aghtex は勿論 \multicolumn に対応している。ちゃんと動いている。

\begin{pmatrix}
  a & b & c \\
  \multicolumn{3}{c}{ABC} \\
  d & e & f
\end{pmatrix}

\begin{pmatrix} a & b & c \\ \multicolumn{3}{c}{ABC} \\ d & e & f \end{pmatrix}

1.3 はてなブログの処理と干渉しない記法?

はてなブログの数式の問題点は、「Markdownやはてなキーワードの処理」による干渉を避けるために煩雑な書き方をしなければならなかったことである。 つまり「Markdown やはてなキーワードの処理」が入らない様に $\TeX ソースを指定できれば良いのである。 `～` や ```～``` を使って、特定の条件で変換を適用することにした。Qiita が ```math ～``` でやっているのと同じ作戦。

2 使い方

はてなブログの側に色々コードを埋め込むのは面倒なので agh.fly.js に新しくはてなブログ専用の処理を追加することにした。

2.1 ロード

以下の3行を埋め込めば aghtex がはてなブログ用にロードされる。

<script src="https://akinomyoga.github.io/agh/agh.js?20191202c"></script>
<script src="https://akinomyoga.github.io/agh/agh.lang.tex.js?20191202c"></script>
<script src="https://akinomyoga.github.io/agh/agh.fly.js?20191202c#hatena"></script>

常用するにははてなブログの [設定]-[詳細設定]-[headに要素を追加] の欄に上記スクリプトを記述すれば良い[6, 7方法1]。最初、記事[8, 7方法2]の方法を使っていたが、後で記事[7]のコメントで n7shi さんにより良い方法を教えてもらった。

• [6] ブログのhead部分にmetaタグなどを自由に追加できるようにしました - はてなブログ開発ブログ
• [7] はてなブログで数式を書く方法(mathjaxの導入) - shangtian’s blog
• [8] はてなブログ(無料)でスマホでもスクリプトを一斉適用する - TBD

2.2 インライン数式

インライン数式の記法として

$`～`

を採用することにした。これははてなブログ的には $<code>～</code> という形に変換されて、中身「～」にはMarkdownやはてなキーワードの変な処理は入らない。

普通の記述の仕方

$～$

にも対応している。中に他と干渉しそうな記述がなければこちらでも良い。

以下の記述方法にも対応している。

<span class="aghtex">～</span>

2.3 独立した数式

独立行の数式のためには以下の記法を使う。

```tex:環境名
～
```

環境名は align, align*, equation, eqnarray など任意の環境名。これも中身「～」には変な処理は入らない (はず)。

他に以下にも対応している。\begin{align}～\end{align} で囲んで変換される。

<div class="aghtex">
～
</div>

2.4 プリアンブル

プリアンブルに指定したい内容 (\usepackage や \def や \newcommand など) は以下の形式で指定する。

```tex:preamble
～
```

3 サンプル

3.1 "KaTeXのテスト - 七誌の開発日記" の例

数式の例として記事 [3] のものを試させてもらうことにした。 こうして3種類の数式表示エンジンを並べてみると楽しい。 この例の範囲内では aghtex は少なくとも K%{\KaTeX}% と同程度には速い。元々 MathJax は遅いのである。

• MathJax では です。
• aghtex では $c=\pm\sqrt{a^2+b^2} です。
• K%{\KaTeX}% では K%{c=\pm\sqrt{a^ 2+b^ 2}}% です。

MathJax	aghtex	K%{\KaTeX}%
\[x=\frac{-b±\sqrt{b^2-4ac}}{2a}\] \[f(x)=\frac1{\sqrt{2πσ^2}}\exp\left(-\frac{(x-μ)^2}{2σ^2}\right)\] \[i\hbar\frac∂{∂t}ψ=\left(\frac{(-i\hbar∇)^2}{2m}+V\right)ψ\] \[rC=\frac{∂C}{∂t}+\frac12σ^2S_t^2\frac{∂^2C}{∂S_t^2}+rS_t\frac{∂C}{∂S_t}\]	x=\frac{-b±\sqrt{b^2-4ac}}{2a} f(x)=\frac1{\sqrt{2πσ^2}}\exp\left(-\frac{(x-μ)^2}{2σ^2}\right) i\hbar\frac∂{∂t}ψ=\left(\frac{(-i\hbar∇)^2}{2m}+V\right)ψ rC=\frac{∂C}{∂t}+\frac12σ^2S_t^2\frac{∂^2C}{∂S_t^2}+rS_t\frac{∂C}{∂S_t}	x=\frac{-b±\sqrt{b^2-4ac}}{2a} f(x)=\frac1{\sqrt{2πσ^2}}\exp\left(-\frac{(x-μ)^2}{2σ^2}\right) i\hbar\frac∂{∂t}ψ=\left(\frac{(-i\hbar∇)^2}{2m}+V\right)ψ rC=\frac{∂C}{∂t}+\frac12σ^2S_t^2\frac{∂^2C}{∂S_t^2}+rS_t\frac{∂C}{∂S_t}

3.2 意味のある数式の例

記事 [9] の数式。正しいかは知らない。

• [9] Dentonの式の縮退のある場合 - TBD

  \left\|
    \begin{pmatrix} v_{i_1,j_1} \\ v_{i_2,j_1} \\ \vdots \\ v_{i_\Lambda,j_1} \end{pmatrix}
    \wedge \dots \wedge
    \begin{pmatrix} v_{i_1,j_P} \\ v_{i_2,j_P} \\ \vdots \\ v_{i_\Lambda,j_P} \end{pmatrix}
  \right\|^2
  &= \frac{\displaystyle
    \sum_{j_{P+1} < \dots < j_\Lambda\atop \{j_p\}_{p=1}^P \cap \{j_p\}_{p=P+1}^\Lambda = \emptyset}
    \prod_{k=1}^{n-\Lambda}[\lambda - \lambda_k(M_{j_1,\dots,j_\Lambda})]
  }{\displaystyle
    \prod_{k=1 \atop \lambda_k(A) \neq \lambda}^n [\lambda - \lambda_k(A)]} \\
  &= \frac{c_{n-\Lambda}\{\lambda - \lambda_k(M_{j_1,\dots,j_P})\}_{k=1}^{n-P}}{
    \displaystyle
    \prod_{k=1 \atop \lambda_k(A) \neq \lambda}^n [\lambda - \lambda_k(A)]}.

3.3 式の参照のテスト

式$\eqref{eq:sample3-eq1}$は足し算です!
```tex:align
  A = B + C. \label{eq:sample3-eq1}
```

式$\eqref{eq:sample3-eq1}$は足し算です!

  A = B + C. \label{eq:sample3-eq1}

3.4 着色のテスト

```tex:preamble
\usepackage{color}
```
```tex:align
  \textcolor{red}{A} = \textcolor[rgb]{0.0,0.5,0.0}{B} + \textcolor{blue}{C}.
```

\usepackage{color}

  \textcolor{red}{A} = \textcolor[rgb]{0.0,0.5,0.0}{B} + \textcolor{blue}{C}.

3.5 DOM要素埋め込みのテスト

aghtex が MathJax や K%{\KaTeX}% に勝っていると思うのは aghtex は DOM 要素を含められるということ。 これが可能なのは aghtex は自身では具体的なレイアウト計算はしていなくて全てブラウザのレイアウトエンジンに要素の配置を計算させているから。 数式の中に含まれているDOM要素の大きさなどが動的に変わってもそれに応じて数式が変形する。 実際に使える場面があるのかは不明だけれども。

<div class="aghtex">
x &= \sqrt{
  \left[
  <table style="margin:0;display:inline-table;vertical-align:middle;">
  <tr><td>A</td><td>B</td></tr>
  <tr><td>C</td><td>D</td></tr>
  </table>\right]_{A=123}^{456}
  + \frac{<code>code block</code>}{<a href="https://katex.org/">K%{\KaTeX}%</a>}
  + <button>Button</button>
}
</div>
<script>
(function() {
  var button1 = document.getElementById("button1");
  agh.addEventListener(button1, "click", function() {
    console.log("button1 clicked");
    button1.innerHTML = "Button Clicked!";
    button1.style.height = "100px";
  });
})();
</script>

x &= \sqrt{ \left[

A	B
C	D

\right]_{A=123}^{456} + \frac{code block}{K%{\KaTeX}%} + Button }

最後に

よく考えたら、はてなブログを使ってみたのはデフォルトで数式を表示する機能があるらしいということが分かったから。 自分で数式を表示するコードを書いてメンテナンスするのは面倒だし、下手に自由度があるので数式の表示についていろいろ工夫が始まってしまう。 初めからある機能しか使わないことにすれば数式表示関連で色々と工夫して時間を費やしてしまうこともなくなる。

そう思っていたはずなのに、結局 aghtex に手を出してそれに時間を費やしているので、はてなブログを使い始めた意味がないのでは。。

でも結果には満足している。特に式番号を自動で生成できるのは便利である。

補足: はてなブログでは <pre> の直後で数式記法が効かなくなる

以下のように <pre> を直接記述すると数式記法 [tex:～] が効かなくなるということが判明した。

<pre>hello</pre>
[tex: c = \pm \sqrt{a^ 2+b^ 2}]

以下のように ```～``` を間に挟むと動くようになるようだ。

<pre>hello</pre>
<div style="display:none;">
```dummy
```
</div>
[tex: c = \pm \sqrt{a^ 2+b^ 2}]