やりたいこと
コマンドライン上で劣化しないSVG形式の数式を作成したいです。(PNGも生成できます)
ブラウザを使って、オンラインでTeXの記法の数式を画像化するWebサイトが既にあります。
ですが、以下のような問題があります。
- 外部にアップロードの必要性
- スクリプトでの自動化が困難
そのため、美しいSVGの形式の数式を
- ローカル内だけで完結して生成
- スクリプトなどで自動化しやすい方法
で作成する方法の紹介です。
インストール
npmで以下のコマンド使えばmath2imageコマンドとしてインストールできます。コマンドとして使うので、-gオプションでinstallしてしまいます。
npm install -g math2image
GitHubリポジトリ
GitHub: https://github.com/nwtgck/math2image-npm
math2imageという名前で開発しています。
使い方
echoを使って数式をmath2imageコマンドに渡すとSVGの画像が生成できます。
echo "e^{i \pi} + 1 = 0" | math2image > euler_identity.svg
(QiitaはSVGが表示できないみたいなので、PNGになってます)
パイプで数式を渡せるので、中間ファイルなしでSVGの生成が可能です。SVGの標準出力に出せるので、それをパイプしてJPEGにするなど、パイプをつないで他の形式に変換するのも可能なはずです。
以下みたいに、ちょっと複雑になってもいけます。
echo "\sum_{n=0}^∞\frac{f^{(n)}(a)}{ n! }(x-a)^n" | math2image > taylor_series.svg
ファイルから作成する
以下の内容の、sample7.math.texを用意して、（拡張子は何でもOKです）
% (from: https://en.wikibooks.org/wiki/LaTeX/Mathematics)
f(n) =
\begin{cases}
n/2 & \quad \text{if } n \text{ is even}\\
-(n+1)/2 & \quad \text{if } n \text{ is odd}
\end{cases}
以下のように、実行するとsample7.math.tex.svgとして作成されます
math2image sample7.math.tex
指定したファイルパスに保存する
ファイル名・ファイルパスを指定したいときは-oオプションで指定でします。以下の例ではout/euler_identity.svgに保存されます。
echo "e^{i \pi} + 1 = 0" | math2image -o out/euler_identity.svg
.png形式で保存する
--to-pngオプションと--png-width=500を指定すると透過pngで綺麗に保存できます。
echo "e^{i \pi} + 1 = 0" | math2image --to-png --png-width=500 > euler_identity.png
使ってる技術
MathJaxを利用しています。MathJaxはQiitaの ```mathのハイライト機能でも使われている機能で、TeX記法の数式をブラウザ（JavaScriptなど）で生成できる技術です。
参考： Qiitaの数式チートシート - Qiita
このMathJaxをNode.js上で使うために、mathjax-nodeを使っています。
PNGの生成はsvg2pngを使っていて、内部ではPhantomJSでsvgからPNGに変換しているようです。2年ぐらい前に開発が止まっているので、なるべく破壊的な変更を加えずに他のライブラリに移行できればと思います。
数式以外も生成できる！
MathJaxで生成できるものなら何でも生成できるはずなので、数式に限らずテーブル（表）なども生成可能です。
見てて楽しいMathJaxで生成している綺麗な数式のサイト見つけました。表とか可換図式とかもありました。math2imageでも利用可能なはずです。
Easy Copy MathJax