unhappychoice.com

記事を書くための yak-shaving。結構四苦八苦したので記事にする。

実際の実装は→ Latex syntax by unhappychoice · Pull Request #143 · unhappychoice/blog

要件

圏論にまつわる記事を書くために、

• 一般の数式を書く
• 可換図式を書く
• 圏の概略図等、ある程度自由な図を書く
• 作ったソースは残したい
  • コピペや編集のしやすさ

ということがやりたかった。

最終的な構成

1. rtomayko/tilt でテンプレート形式 .math を追加

Middleman では、テンプレートの処理に対して tilt が使われていたので、 xxx.html.md.math のような記事に対して処理をするようテンプレートマッピングを追加した。 Markdown エンジンに対して独自記法を追加するような方針のほうが若干良さそうな気はしたが、vmg/redcarpet 眺めるに若干難しそうだったので断念。

記事中の tex タグを雑に正規表現で取ってきて¹、後続処理へ。

2. 埋め込まれた tex タグを img タグへ変換

• luatex で TEX -> PDF 変換
• pdf2svg で PDF -> SVG 変換
• SVG を Base64 でエンコードしつつ、インラインの <img> として埋め込み

という感じに。何らかの形でライブラリにまでするのが理想だが、外部コマンドへの依存だったり汎用性を若干担保できないので見送り。

結果

https://en.wikibooks.org/wiki/LaTeX/Mathematics より適当に

https://texample.net/tikz/examples/parallelepiped/ より

https://texample.net/tikz/examples/three-link-annotated/ より

楽しい！✌('ω'✌ )三✌('ω')✌三( ✌'ω')✌

利用ようとした技術

MathJax

• 図が欠けない
• 可換図式は一応かける
  • AMScd が利用できる²

一応まだ利用しているが、画像に置き換えたほうが当然パフォーマンスが良いので、できれば自前の変換の方に移行していきたい。

TikZJax

• tikz の範囲で自由に図がかける
• 処理が全てクライアントサイドなので、パフォーマンス的に厳しい
  • tex のバイナリを wasm にして、パッケージ読み込んだメモリダンプを読み込んで、DVI出力からさらに SVG 変換までのフルコース
• tikzcd 等、追加パッケージが利用しづらい
  • メモリダンプを作り直したりしないといけない
• 導入が難しい
  • lack of HTTPS depolyment · Issue #3 · kisonecat/tikzjaxにあるように、 https で配信するためには各種ファイルを自前で配信する必要あり。
  • それでも動かないのでソースをデバッグして gz の解凍に失敗していたりを直した

他の Tex 関連ツールや Web サービス等

数式入力で画像を吐いてくれるようなツールはすでに様々あるが、生成ソースの管理がどうしても手作業になる感じがあり、見送り。

他の図をかけるやつとか ( UML etc...

数学表現をするのに、結局 Tex が最強としかならなかった。