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

## 動機

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](http://chart.apis.google.com/chart?cht=tx&chl=%5CTeX)記法が使えたら便利ですよね！

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

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

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

## そこで

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

- [Chrome Extension](https://github.com/naoyat/qiita-toolkit/tree/master/TeX-on-Qiita/chrome)
- [Greasemonkey](https://github.com/naoyat/qiita-toolkit/raw/master/TeX-on-Qiita/firefox/tex-on-qiita.user.js); [userscripts.orgにあります](http://userscripts.org/scripts/show/152922)

昨日作った[Kobito-Evernote同期スクリプト (kobitonote)](http://qiita.com/items/4c465380b4020185a224)と合わせて[qiita-toolkit](https://github.com/naoyat/qiita-toolkit)というプロジェクトに収録しています。

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

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

## はてな風![TeX](http://chart.apis.google.com/chart?cht=tx&chl=%5CTeX)記法 → markdown

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

&raquo;md をクリック

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

これで保存すると、無事

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

のように表示されます。

## markdown →はてな風![TeX](http://chart.apis.google.com/chart?cht=tx&chl=%5CTeX)記法

前に書いた数式を修正したい時など、元の![TeX](http://chart.apis.google.com/chart?cht=tx&chl=%5CTeX)記法に戻せると便利ですよね。

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

&raquo;tex をクリック

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

どうでしょう？

# 使用例

各所から集めてきたはてなの![TeX](http://chart.apis.google.com/chart?cht=tx&chl=%5CTeX)記法の用例で変換を試してみました。

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

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

```
[tex:x^2 + y^2 = z^2]
```
![equation](http://chart.apis.google.com/chart?cht=tx&chl=x%5E2%20%2B%20y%5E2%20%3D%20z%5E2)

```
[tex:e^{i\pi} = -1]
```
![equation](http://chart.apis.google.com/chart?cht=tx&chl=e%5E%7Bi%5Cpi%7D%20%3D%20-1)

```
[tex:\frac{1}{x} + \frac{1}{y} = \frac{1}{z}]
```
![equation](http://chart.apis.google.com/chart?cht=tx&chl=%5Cfrac%7B1%7D%7Bx%7D%20%2B%20%5Cfrac%7B1%7D%7By%7D%20%3D%20%5Cfrac%7B1%7D%7Bz%7D)

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

```
[tex:{\Huge e^{i\pi}=-1}]
```
![equation](http://chart.apis.google.com/chart?cht=tx&chl=%7B%5CHuge%20e%5E%7Bi%5Cpi%7D%3D-1%7D)

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

```
[tex:l=\sqrt{a^2+b^2}]
```
![equation](http://chart.apis.google.com/chart?cht=tx&chl=l%3D%5Csqrt%7Ba%5E2%2Bb%5E2%7D)

```
[tex:\frac{2a}{-b\pm\sqrt{b^2-4ac}]
```
![equation](http://chart.apis.google.com/chart?cht=tx&chl=%5Cfrac%7B2a%7D%7B-b%5Cpm%5Csqrt%7Bb%5E2-4ac%7D)

```
[tex:x_{i}+x_{i+1}+x_{i+2}]
```
![equation](http://chart.apis.google.com/chart?cht=tx&chl=x_%7Bi%7D%2Bx_%7Bi%2B1%7D%2Bx_%7Bi%2B2%7D)

```
[tex:f\:A \ni a \rightarrow b \in B]
```
![equation](http://chart.apis.google.com/chart?cht=tx&chl=f%5C%3AA%20%5Cni%20a%20%5Crightarrow%20b%20%5Cin%20B)

## 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]
```
![equation](http://chart.apis.google.com/chart?cht=tx&chl=%5Cnabla%5Ccdot%5Cboldsymbol%7BB%7D%20%3D%200)

```
[tex:\nabla\times\mathbf{E}+\frac{\partial\mathbf{B}}{\partial t}=\mathbf{0}]
```
![equation](http://chart.apis.google.com/chart?cht=tx&chl=%5Cnabla%5Ctimes%5Cmathbf%7BE%7D%2B%5Cfrac%7B%5Cpartial%5Cmathbf%7BB%7D%7D%7B%5Cpartial%20t%7D%3D%5Cmathbf%7B0%7D)

```
[tex:\nabla\cdot\bm{D}={\rho}]
```
![equation](http://chart.apis.google.com/chart?cht=tx&chl=%5Cnabla%5Ccdot%5Cbm%7BD%7D%3D%7B%5Crho%7D)

```
[tex:\nabla\times\mathbf{H}-\frac{\partial\mathbf{D}}{\partial t}=\mathbf{j}]
```
![equation](http://chart.apis.google.com/chart?cht=tx&chl=%5Cnabla%5Ctimes%5Cmathbf%7BH%7D-%5Cfrac%7B%5Cpartial%5Cmathbf%7BD%7D%7D%7B%5Cpartial%20t%7D%3D%5Cmathbf%7Bj%7D)

```
[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}]
```
![equation](http://chart.apis.google.com/chart?cht=tx&chl=%5Cbegin%7Bbmatrix%7D%20a%26b%26c%20%5C%5C%20d%26e%26f%20%5Cend%7Bbmatrix%7D)

```
[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!}]
```
![equation](http://chart.apis.google.com/chart?cht=tx&chl=e%5Ex%3D%5Csum_%7Bn%3D0%7D%5E%5Cinfty%5Cfrac%7Bx%5En%7D%7Bn!%7D)
![equation](http://chart.apis.google.com/chart?cht=tx&chl=%5Cdisplaystyle%20e%5Ex%3D%5Csum_%7Bn%3D0%7D%5E%5Cinfty%5Cfrac%7Bx%5En%7D%7Bn!%7D)

```
[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}]
```
![equation](http://chart.apis.google.com/chart?cht=tx&chl=x%3D%5Cfrac%7B-b%5Cpm%5Csqrt%7Bb%5E2-4ac%7D%7D%7B2a%7D)

```
[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 は（当然のことながら）![TeX](http://chart.apis.google.com/chart?cht=tx&chl=%5CTeX)記法の数式だけでなく、グラフを描画したりとか出来ます。というかむしろそれが本業です。

// from [Google Chart API入門](http://www.ajaxtower.jp/googlechart/)

```
![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)
```

![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)