TeX on Qiita - Qiitaで数式を、あるいはQiitaではてな風TeX記法を使えるようにする魔法のブラウザ拡張

19762 ワード
Chrome TeX Qiita greasemonkey Qiita テキストリンク

動機

Qiitaに数式を楽に書ける記法があると嬉しいよね…
というか今どき数式が書けないとかないわー…

Qiita に数式を貼ろう

![equation](http://chart.apis.google.com/chart?cht=tx&chl=f%5E%5Cprime(x%29%5C%20%3D%20%5Clim_%7B%5CDelta%20x%5Cto0%7D%5Cfrac%7Bf(x%2B%5CDelta%20x%29-f(x%29%7D%7B%5CDelta%20x%7D)

これはGoogle Chart APIを使って、

![equation](http://chart.apis.google.com/chart?cht=tx&chl=f%5E%5Cprime(x%29%5C%20%3D%20%5Clim_%7B%5CDelta%20x%5Cto0%7D%5Cfrac%7Bf(x%2B%5CDelta%20x%29-f(x%29%7D%7B%5CDelta%20x%7D)

のように画像として貼り込んでいます。

でもこんなエンコードされたURLを記述するの面倒ですよね！
はてな風の記法が使えたら便利ですよね！

先ほどの数式なら、例えばこんな風に書けると捗ります。

[tex:f^\prime(x)\ = \lim_{\Delta x\to0}\frac{f(x+\Delta x)-f(x)}{\Delta x}]

でもQiita独自のmarkdown仕様拡張とか出来ればしてほしくないし。

そこで

…と思ってブラウザ拡張を作ってみました。
とりあえず Chrome Extension と greasemonkey を用意してあります。

昨日作ったKobito-Evernote同期スクリプト (kobitonote)と合わせてqiita-toolkitというプロジェクトに収録しています。

git clone git://github.com/naoyat/qiita-toolkit.git

Qiitaで編集画面を開くと、「編集」「プレビュー」の右に「»md」「»tex」というリンクが追加されます。

はてな風記法 → markdown

ほにゃらら [tex:e=mc^2] ほにゃららん

»md をクリック

ほにゃらら ![equation](http://chart.apis.google.com/chart?cht=tx&chl=e%3Dmc%5E2) ほにゃららん

これで保存すると、無事

ほにゃらら ほにゃららん

のように表示されます。

markdown →はてな風記法

前に書いた数式を修正したい時など、元の記法に戻せると便利ですよね。

ほにゃらら ![equation](http://chart.apis.google.com/chart?cht=tx&chl=e%3Dmc%5E2) ほにゃららん

»tex をクリック

ほにゃらら [tex:e=mc^2] ほにゃららん

どうでしょう？

使用例

各所から集めてきたはてなの記法の用例で変換を試してみました。

画像が壊れているのは、mimetexでは使えるけれどGoogle Chart APIでは使えない命令が使われている物と思われます。

http://d.hatena.ne.jp/tt_clown/20100205/1265350752 

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


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


[tex:\frac{1}{x} + \frac{1}{y} = \frac{1}{z}]

http://d.hatena.ne.jp/edvakf/20090530/1243672072 

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

http://adiary.blog.abk.nu/063 

[tex:l=\sqrt{a^2+b^2}]


[tex:\frac{2a}{-b\pm\sqrt{b^2-4ac}]


[tex:x_{i}+x_{i+1}+x_{i+2}]


[tex:f\:A \ni a \rightarrow b \in B]

http://d.hatena.ne.jp/tequilasunset/20101117/p1 

[tex:f^\prime(x)=\lim_{\Delta x\to0}\frac{f(x+\Delta x)-f(x)}{\Delta x}]

![equation](http://chart.apis.google.com/chart?cht=tx&chl=f%5E%5Cprime(x%29%3D%5Clim_%7B%5CDelta%20x%5Cto0%7D%5Cfrac%7Bf(x%2B%5CDelta%20x%29-f(x%29%7D%7B%5CDelta%20x%7D)

[tex:f(x)=\int_{-\infty}^x e^{-t^2}dt]

![equation](http://chart.apis.google.com/chart?cht=tx&chl=f(x%29%3D%5Cint_%7B-%5Cinfty%7D%5Ex%20e%5E%7B-t%5E2%7Ddt)

[tex:\nabla\cdot\boldsymbol{B} = 0]


[tex:\nabla\times\mathbf{E}+\frac{\partial\mathbf{B}}{\partial t}=\mathbf{0}]


[tex:\nabla\cdot\bm{D}={\rho}]


[tex:\nabla\times\mathbf{H}-\frac{\partial\mathbf{D}}{\partial t}=\mathbf{j}]


[tex:i\hbar\frac{\partial{}}{\partial{}t}|\psi(t)\rangle=\hat{H}|\psi(t)\rangle]

![equation](http://chart.apis.google.com/chart?cht=tx&chl=i%5Chbar%5Cfrac%7B%5Cpartial%7B%7D%7D%7B%5Cpartial%7B%7Dt%7D%7C%5Cpsi(t%29%5Crangle%3D%5Chat%7BH%7D%7C%5Cpsi(t%29%5Crangle)

[tex:\delta S=\sum_{i=1}^N\left\[\frac{\partial L}{\partial\dot{q}_{k}}\delta q_k\right\]_{t_1}^{t_2}+\sum_{i=1}^N\int_{t_1}^{t_2}\left(\frac{\partial L}{\partial q_k}-\frac{d}{d t}\frac{\partial L}{\partial \dot{q}_k}\right)\delta q_k dt]

![equation](http://chart.apis.google.com/chart?cht=tx&chl=%5Cdelta%20S%3D%5Csum_%7Bi%3D1%7D%5EN%5Cleft%5C%5B%5Cfrac%7B%5Cpartial%20L%7D%7B%5Cpartial%5Cdot%7Bq%7D_%7Bk%7D%7D%5Cdelta%20q_k%5Cright%5C%5D_%7Bt_1%7D%5E%7Bt_2%7D%2B%5Csum_%7Bi%3D1%7D%5EN%5Cint_%7Bt_1%7D%5E%7Bt_2%7D%5Cleft(%5Cfrac%7B%5Cpartial%20L%7D%7B%5Cpartial%20q_k%7D-%5Cfrac%7Bd%7D%7Bd%20t%7D%5Cfrac%7B%5Cpartial%20L%7D%7B%5Cpartial%20%5Cdot%7Bq%7D_k%7D%5Cright%29%5Cdelta%20q_k%20dt)

[tex:D={f\in L^2(\R, dx) : \frac{df}{dx} \in L^2(\R, dx)}]

![equation](http://chart.apis.google.com/chart?cht=tx&chl=D%3D%7Bf%5Cin%20L%5E2(%5CR%2C%20dx%29%20%3A%20%5Cfrac%7Bdf%7D%7Bdx%7D%20%5Cin%20L%5E2(%5CR%2C%20dx%29%7D)

[tex:\begin{bmatrix} a&b&c \\ d&e&f \end{bmatrix}]


[tex:A = \large\left(\begin{array}{c.cccc} &1&2&\cdots&n\\ \hdash 1&a_{11}&a_{12}&\cdots&a_{1n}\\ 2&a_{21}&a_{22}&\cdots&a_{2n}\\ \vdots&\vdots&\vdots&\ddots&\vdots\\ n&a_{n1}&a_{n2}&\cdots&a_{nn} \end{array}\right)]

![equation](http://chart.apis.google.com/chart?cht=tx&chl=A%20%3D%20%5Clarge%5Cleft(%5Cbegin%7Barray%7D%7Bc.cccc%7D%20%261%262%26%5Ccdots%26n%5C%5C%20%5Chdash%201%26a_%7B11%7D%26a_%7B12%7D%26%5Ccdots%26a_%7B1n%7D%5C%5C%202%26a_%7B21%7D%26a_%7B22%7D%26%5Ccdots%26a_%7B2n%7D%5C%5C%20%5Cvdots%26%5Cvdots%26%5Cvdots%26%5Cddots%26%5Cvdots%5C%5C%20n%26a_%7Bn1%7D%26a_%7Bn2%7D%26%5Ccdots%26a_%7Bnn%7D%20%5Cend%7Barray%7D%5Cright%29)

[tex:\normalsize\left(\large\begin{array}{GC+23} \varepsilon_x\\ \varepsilon_y\\ \varepsilon_z\\ \gamma_{xy}\\ \gamma_{xz}\\ \gamma_{yz}\end{array}\right) {\Large=} \left\[\begin{array}{CC} \begin{array}\frac{1}{E_{\fs{+1}x}}&-\frac{\nu_{xy}}{E_{\fs{+1}x}}&-\frac{\nu_{\fs{+1}xz}}{E_{\fs{+1}x}}\\ -\frac{\nu_{yx}}{E_y}&\frac{1}{E_{y}}&-\frac{\nu_{yz}}{E_y}\\ -\frac{\nu_{\fs{+1}zx}}{E_{\fs{+1}z}}&-\frac{\nu_{zy}}{E_{\fs{+1}z}}&\frac{1}{E_{\fs{+1}z}}\end{array}&{\LARGE 0}\\ {\LARGE 0}&\begin{array}\frac{1}{G_{xy}}&&\\ &\frac{1}{G_{\fs{+1}xz}}&\\&&\frac{1}{G_{yz}} \end{array} \end{array}\right\] \left(\large\begin{array} \sigma_x\\ \sigma_y\\ \sigma_z\\ \tau_{xy}\\ \tau_{xz}\\ \tau_{yz} \end{array}\right)]

![equation](http://chart.apis.google.com/chart?cht=tx&chl=%5Cnormalsize%5Cleft(%5Clarge%5Cbegin%7Barray%7D%7BGC%2B23%7D%20%5Cvarepsilon_x%5C%5C%20%5Cvarepsilon_y%5C%5C%20%5Cvarepsilon_z%5C%5C%20%5Cgamma_%7Bxy%7D%5C%5C%20%5Cgamma_%7Bxz%7D%5C%5C%20%5Cgamma_%7Byz%7D%5Cend%7Barray%7D%5Cright%29%20%7B%5CLarge%3D%7D%20%5Cleft%5C%5B%5Cbegin%7Barray%7D%7BCC%7D%20%5Cbegin%7Barray%7D%5Cfrac%7B1%7D%7BE_%7B%5Cfs%7B%2B1%7Dx%7D%7D%26-%5Cfrac%7B%5Cnu_%7Bxy%7D%7D%7BE_%7B%5Cfs%7B%2B1%7Dx%7D%7D%26-%5Cfrac%7B%5Cnu_%7B%5Cfs%7B%2B1%7Dxz%7D%7D%7BE_%7B%5Cfs%7B%2B1%7Dx%7D%7D%5C%5C%20-%5Cfrac%7B%5Cnu_%7Byx%7D%7D%7BE_y%7D%26%5Cfrac%7B1%7D%7BE_%7By%7D%7D%26-%5Cfrac%7B%5Cnu_%7Byz%7D%7D%7BE_y%7D%5C%5C%20-%5Cfrac%7B%5Cnu_%7B%5Cfs%7B%2B1%7Dzx%7D%7D%7BE_%7B%5Cfs%7B%2B1%7Dz%7D%7D%26-%5Cfrac%7B%5Cnu_%7Bzy%7D%7D%7BE_%7B%5Cfs%7B%2B1%7Dz%7D%7D%26%5Cfrac%7B1%7D%7BE_%7B%5Cfs%7B%2B1%7Dz%7D%7D%5Cend%7Barray%7D%26%7B%5CLARGE%200%7D%5C%5C%20%7B%5CLARGE%200%7D%26%5Cbegin%7Barray%7D%5Cfrac%7B1%7D%7BG_%7Bxy%7D%7D%26%26%5C%5C%20%26%5Cfrac%7B1%7D%7BG_%7B%5Cfs%7B%2B1%7Dxz%7D%7D%26%5C%5C%26%26%5Cfrac%7B1%7D%7BG_%7Byz%7D%7D%20%5Cend%7Barray%7D%20%5Cend%7Barray%7D%5Cright%5C%5D%20%5Cleft(%5Clarge%5Cbegin%7Barray%7D%20%5Csigma_x%5C%5C%20%5Csigma_y%5C%5C%20%5Csigma_z%5C%5C%20%5Ctau_%7Bxy%7D%5C%5C%20%5Ctau_%7Bxz%7D%5C%5C%20%5Ctau_%7Byz%7D%20%5Cend%7Barray%7D%5Cright%29)

mimetexのサンプルから

mimetexでは\large以上で\displaystyle扱いにしてくれますが、Google Chart APIでは\displaystyleと明記する必要があります

[tex:f(x)=\int_{-\infty}^x e^{-t^2}dt]

![equation](http://chart.apis.google.com/chart?cht=tx&chl=f(x%29%3D%5Cint_%7B-%5Cinfty%7D%5Ex%20e%5E%7B-t%5E2%7Ddt)

[tex:e^x=\sum_{n=0}^\infty\frac{x^n}{n!}]
[tex:\displaystyle e^x=\sum_{n=0}^\infty\frac{x^n}{n!}]



[tex:e^x=\lim_{n\to\infty} \left(1+\frac~xn\right)^n]

![equation](http://chart.apis.google.com/chart?cht=tx&chl=e%5Ex%3D%5Clim_%7Bn%5Cto%5Cinfty%7D%20%5Cleft(1%2B%5Cfrac~xn%5Cright%29%5En)

[tex:f^\prime(x)\ = \lim_{\Delta x\to0}\frac{f(x+\Delta x)-f(x)}{\Delta x}]

![equation](http://chart.apis.google.com/chart?cht=tx&chl=f%5E%5Cprime(x%29%5C%20%3D%20%5Clim_%7B%5CDelta%20x%5Cto0%7D%5Cfrac%7Bf(x%2B%5CDelta%20x%29-f(x%29%7D%7B%5CDelta%20x%7D)

[tex:x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}]


[tex:f(x) = \frac1{\sigma\sqrt{2\pi}} \int_{-\infty}^x e^{-\frac{(t-\mu)^2}{2\sigma^2}}dt]
[tex:\displaystyle f(x) = \frac1{\sigma\sqrt{2\pi}} \int_{-\infty}^x e^{-\frac{(t-\mu)^2}{2\sigma^2}}dt]

![equation](http://chart.apis.google.com/chart?cht=tx&chl=f(x%29%20%3D%20%5Cfrac1%7B%5Csigma%5Csqrt%7B2%5Cpi%7D%7D%20%5Cint_%7B-%5Cinfty%7D%5Ex%20e%5E%7B-%5Cfrac%7B(t-%5Cmu%29%5E2%7D%7B2%5Csigma%5E2%7D%7Ddt)
![equation](http://chart.apis.google.com/chart?cht=tx&chl=%5Cdisplaystyle%20f(x%29%20%3D%20%5Cfrac1%7B%5Csigma%5Csqrt%7B2%5Cpi%7D%7D%20%5Cint_%7B-%5Cinfty%7D%5Ex%20e%5E%7B-%5Cfrac%7B(t-%5Cmu%29%5E2%7D%7B2%5Csigma%5E2%7D%7Ddt)

余談

Google Chart API は（当然のことながら）記法の数式だけでなく、グラフを描画したりとか出来ます。というかむしろそれが本業です。

// from Google Chart API入門

![graph](http://chart.apis.google.com/chart?chs=300x300&chd=t:10,15,4,60,45|30,23,73,24,87&cht=lc&chco=ff0000,0000ff&chg=20,50,3,3&chxt=x,y&chxl=0:|0|1|2|3|4|1:|Min|Max)