黒背景のブログに、数式を載せるためのメモ

目的

灰色背景で構成されている当ブログにおいて、一般的な数式表示方法では黒文字がデフォルトで視認性が悪い。
数式表示方法の試行錯誤を記載する共に、最終的に Google Chart API を用いた経緯を書く。

要件

背景「黒・灰色」で用いるために、数式は白文字にする。
TeX の書式を用いる。
画像を生成する方法は用いない。(白文字・背景透過処理で実現できるが、アップロードが面倒*1）

試行錯誤

第一案：はてなで mimetex を使う（正攻法だが、白文字不可なので不採用）

数式記載方法

http://d.hatena.ne.jp/keyword/mimetex

heyheytower > 管理 > デザイン編集 > スタイルシートの編集*2

当サイトは「テーマ：Nimbus」を用いているため、下記背景色指定を行った。（デフォルトの背景白では数式が浮いてしまうため）

img.tex {
background-color: #303030;
}

引用内の"［"は表示のため全角を用いていることに注意）

［TeX:{e^{i\pi} = \cos \pi + i \sin \pi \\ \:\:\:\:\:\: =-1}]

${e^{i\pi} = \cos \pi + i \sin \pi \\ \:\:\:\:\:\: =-1}$

［tex:x^2 + y^2 = z^2]

$x^2 + y^2 = z^2$

［tex:e^{i\pi} = -1]

$e^{i\pi} = -1$

やはり、灰色背景で黒文字では見難いですし、そのためだけにブログを白背景に設定すること、数式の背景だけ白にすること、は否です。

第二案：webサービスを探す（これらも白文字不可につき不採用）

http://www.forkosh.com/
$e^x=\lim_{n\to\infty} \left(1+\frac~xn\right)^n$

http://formula.s21g.com/

www.codecogs.com
$a^2$
$\300dpi a^2$

formulaサービス以外は、アンチエイリアス処理により灰色背景では使い物になりません。

第三案：Google Chart API を用いる（要件を満たすため、採用）

http://webbackwriter.blogspot.jp/2012/06/google-chart-api.htmlを参考にした。

$E=h\nu =h\frac { c }{ \lambda }$

実際のコマンドとしては下記を用いる。*3

$ maxima -q
(%i1) tex(sqrt(y)/5+x^2*%pi);
$${{\sqrt{y}}\over{5}}+\pi\,x^2$$
(%o5) false
(%i2) quit();
$ echo "{{\sqrt{y}}\over{5}}+\pi\,x^2" | perl -MURI::Escape -lne 'print uri_escape($_)'
%7B%7B%5Csqrt%7By%7D%7D%5Cover%7B5%7D%7D%2B%5Cpi%5C%2Cx%5E2

上記のURLエンコード結果を用いて下記タグを作製する。(引用内の"＜"は表示のため全角を用いていることに注意）
（数式確認のため、適宜タグテスト - HTMLタグを入力してブラウザ表示チェック/ホームページマスターでタグテストを行います。最終行の式はメモのため）

＜img src="http://chart.apis.google.com/chart?
cht=tx&
chf=bg,s,303030&
chco=FFFFFF&
chl=
%7B%7B%5Csqrt%7By%7D%7D%5Cover%7B5%7D%7D%2B%5Cpi%5C%2Cx%5E2
"sqrt(y)/5+x^2*%pi / >

${{\sqrt{y}}\over{5}}+\pi\,x^2$