綺麗な数式をHTMLで出力する方法

SICP解いてて、たまに数式を書かなきゃならない時があるんだが、特に何も疑問に思わずそれっぽく見えればいいや的な感じでゴリゴリ書いてた。
で、ふと「それこそTexみたいな綺麗な数式を出力できるサービスがあるんじゃね？と思って調べてみたらあった。
以下で紹介するサービス群は、全てLaTexフォーマットの記述で表示ができるとのこと。
ちなみに使用したTeXコードはこんな感じ。



x^2 + y^2 = z^2

e^{i\pi} = -1

f(x)=\int_0^{x}g(t)\,dt

\iota(f,z_{0})=\frac{1}{2 \pi i}\oint\frac{dz}{z_{0}-f(z)}

\displaystyle \iota(f,z_{0})=\frac{1}{2 \pi i}\oint\frac{dz}{z_{0}-f(z)}

※2014/04/22 匿名さんからのコメントで、「\displaystyle」をつけるとインテグラルが長く表示されるとのことなので追記しました。

では参りましょう。

Google Chart API

まるで Post Script で出力したかのような美しい数式、ビックリ！

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

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

$f(x)=\int_0^{x}g(t)\,dt$

$\iota(f,z_{0})=\frac{1}{2 \pi i}\oint\frac{dz}{z_{0}-f(z)}$

$\displaystyle \iota(f,z_{0})=\frac{1}{2 \pi i}\oint\frac{dz}{z_{0}-f(z)}$

ちなみにソースはこんな感じ。

<div style="background-color: white; margin: 10px 10px 10px 10px; padding: 10px 10px 10px 10px;">
<img src="https://chart.googleapis.com/chart?cht=tx
&chl=x%5E2%20%2B%20y%5E2%20%3D%20z%5E2" />
<br/>
<img src="https://chart.googleapis.com/chart?cht=tx
&chl=e%5E%7Bi%5Cpi%7D%20%3D%20-1" />
<br/>
<img src="https://chart.googleapis.com/chart?cht=tx
&chl=f(x)=%5Cint_0%5E%7Bx%7Dg(t)%5C%2Cdt"  />
<br/>
<img src="https://chart.googleapis.com/chart?cht=tx
&chl=%5Ciota(f%2Cz_%7B0%7D)%3D%5Cfrac%7B1%7D%7B2%20%5Cpi%20i%7D%5Coint%5Cfrac%7Bdz%7D%7Bz_%7B0%7D-f(z)%7D" />
<br/>
<img src="https://chart.googleapis.com/chart?cht=tx&chl=%5Cdisplaystyle%20%5Ciota(f%2Cz_%7B0%7D)%3D%5Cfrac%7B1%7D%7B2%20%5Cpi%20i%7D%5Coint%5Cfrac%7Bdz%7D%7Bz_%7B0%7D-f(z)%7D" />
</div>

「chl」属性値としてTeXのコードを記述すればいける感じ。但しそのTeXのコードを属性にセットする際に、encodeURIComponentを使ってURI エンコードした文字列にするように気をつけるべし。
↓このコードをローカルファイルに保存してブラウザで開いて、テキストボックスにTeXコードを入力してみよう。

<html>
  <head>
    <script type='text/javascript'>
      function createExpressionImage()
      {
          var img = document.getElementById('math_exp');
          var tex = document.getElementById('tex_exp');
          var ans = document.getElementById('uri_encoded_value');
          var base = 'http://chart.apis.google.com/chart?cht=tx&chl=';
          var url = base + encodeURIComponent(tex.value);

          img.alt = tex;
          img.src = url;
          ans.innerHTML = url;
      }
    </script>
  </head>
  <body>
    <form>
      <input type='text' id='tex_exp' />
      <input type='button' value='数式の表示' onclick='createExpressionImage();' />
      <br/>
      <img id='math_exp' alt='数式表示エリア' />
      <br/>
      <div id='uri_encoded_value' />
    </form>
  </body>
</html>

Formula

もう一つ、Formulaというサービスもあってこっちもスゲエ綺麗。。
~~個人的に、積分記号（インテグラル）はこれぐらい長く表示された方が好きだなぁ。~~
↑2014/04/22 Google Chart API でも長いインテグラルが出せました。
あ、上のGoogle Chart API で記述したHTMLコードと同じようなことが、上記リンク先にあります。試してみてください。

こいつのコードはこんな感じ

<img src="http://formula.s21g.com/?x%5E2%20%2B%20y%5E2%20%3D%20z%5E2.png" />
<br/>
<img src="http://formula.s21g.com/?e%5E%7Bi%5Cpi%7D%20%3D%20-1.png" />
<br/>
<img src="http://formula.s21g.com/?f(x)=%5Cint_0%5E%7Bx%7Dg(t)%5C%2Cdt.png" />
<br/>
<img src="http://formula.s21g.com/?%5Ciota(f%2Cz_%7B0%7D)%3D%5Cfrac%7B1%7D%7B2%20%5Cpi%20i%7D%5Coint%5Cfrac%7Bdz%7D%7Bz_%7B0%7D-f(z)%7D.png" />