mimeTeXを使ってHTMLに数式を表示させる

MathMLを使うのが主流になりそうですが、、

mimeTeXのダウンロード

http://www.forkosh.com/mimetex.html
からmimetex.zipをダウンロード→展開。展開したディレクトリに移動。

mimeTeXのコンパイル

README(III.COMPILATION AND INSTALLATION)にコンパイル手順が記載されています。
必要なファイルは以下の3つ
mimetex.c：本体ソースファイル
mimetex.h：本体ヘッダ
gifsave.c:gif保存ライブラリ
Windowsの場合はMinGWやcygwinなどccが使えるようにしておく

gif（アンチエイリアス有）で表示する場合

Linux：cc –DAA mimetex.c gifsave.c –lm –o mimetex.cgi
Windows：cc -DAA -DWINDOWS mimetex.c gifsave.c -lm -o mimetex.cgi

gif（アンチエイリアス無）で表示する場合

Linux：cc -DGIF mimetex.c gifsave.c -lm -o mimetex.cgi
Windows：cc -DGIF -DWINDOWS mimetex.c gifsave.c -lm -o mimetex.cgi

xbitmaps（Xwindowにおけるビットマップフォント用フォーマット）

cc –DXBITMAP mimetex.c gifsave.c –lm –o mimetex.cgi
これでバイナリファイルmimetex.cgiが作成されます。

mimeTeXのテスト

作成したmimetex.cgiをcgi-binに配置
ドキュメントルートがpublic_htmlのときに以下のような構成でファイルを配置してみます。
public_html/test_tex.html
public_html/cgi-bin/mimetex.cgi
imgタグのsrcにcgiのパスを指定すればOK。バイナリに渡す引数がtex形式になっています。

  <img src="cgi-bin/mimetex.cgi?f(x)=\frac{sin{x}}{x}" border="0">

これでttp://localhost/test_tex.htmlにアクセスして表示されていればOKです。
$f(x)=\frac{sin{x}}{x}$

canvasを使って表示させる

まず、test_tex.htmlです。

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Test Tex</title> 
  <script type="text/javascript" src="test_tex.js"></script>
  </head>
  <body>
    <article>
      <h3>imgタグのみ</h3>
        <img src="cgi-bin/mimetex.cgi?f(x)=\frac{sin{x}}{x}" border="0">
      <h3>canvasを利用</h3>
        <canvas id="myCanvas" width="400" height="200">
          <img src="./cgi-bin/mimetex.cgi?f(x)=\frac{sin{x}}{x}" border="0">
        </canvas>
    </article>
 </body>
</html>

同じディレクトリにtest_tex.jsを置きます。tex記述部分の"\"を"\\"にします。

window.onload=display_tex;

function display_tex() {
    var canvas=document.getElementById('myCanvas');
    if ( !canvas || !canvas.getContext ) return(false);
    var ctx=canvas.getContext('2d');
    var image = new Image;
    image.onload = function(){
      ctx.drawImage( image, 0, 0 );
     }
    image.src = "./cgi-bin/mimetex.cgi?f(x)=\\frac{sin{x}}{x}";
}

replacemath.jsを使ってみる

ちなみに同サイトからreplacemath.jsを入手することができます。使い方はhtmlの最後に3行を挿入するだけです。
TeX同様、文章中の"$$"で区切られた部分を数式にしてくれるみたいです。

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Test Tex</title> 
  <script type="text/javascript" src="test_tex.js"></script>
  </head>
  <body>
  render $$y = \frac{1}{x}$$
 </body>
</html>
<script type="text/javascript" src="replacemath.js"></script>
<script type="text/javascript">
 replaceMath( document.body );
</script>