LoginSignup
43

More than 5 years have passed since last update.

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

Last updated at Posted at 2012-11-25

動機

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記法が使えたら便利ですよね!

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

[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」というリンクが追加されます。

はてな風TeX記法 → markdown

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

»md をクリック

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

これで保存すると、無事

ほにゃらら equation ほにゃららん

のように表示されます。

markdown →はてな風TeX記法

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

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

»tex をクリック

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

どうでしょう?

使用例

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

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

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

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

equation

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

equation

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

equation

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

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

equation

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

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

equation

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

equation

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

equation

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

equation

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

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

equation

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

equation

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

equation

[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

[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
equation

[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

[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記法の数式だけでなく、グラフを描画したりとか出来ます。というかむしろそれが本業です。

// 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)

graph

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
43