概要

Web上に説明文を書く際に数式をさらっと載っけたかったので、手軽にやれる方法はないか探してみた。

@CretedDate 2014/12/14

MathJax

JavaScriptライブラリ、MathJaxを使うと手軽だよという話を聞いた。

http://docs.mathjax.org/en/latest/

下記のように記述してJavaScriptの設定をする。 

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  tex2jax: {inlineMath: [['$','$']]}
});
</script>
<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

で、下記のように記述する（＄の部分は都合により全角で記述。実際には半角）。 

$ \sum _{k=1}^{10}k $

すると下記のように表示される。

$$ \sum _{k=1}^{10}k $$

非常に手軽だが、使ってみた感じ、若干重い。長文で大量の数式が登場する場合はあまり向かない。

MathMLを使う

HTML上に数式を書く規格、MathML（正式名称はMathematical Markup Language）。

こちらはW3Cの規格なのでXML形式で記述される。ブラウザの実装に頼るので、MathJaxより軽いけどブラウザのサポート状況によって表示できるかが分かれる。

下記を見る限り、2014年12月時点でサポートしているブラウザはFirefoxとSafari。ChromeやIEはサポートしていない。IEだけがサポートしていないなら問題ないのだけど、Chromeがいないのは厳しい。またFirefoxでもそれ用の

ブラウザ対応状況
http://caniuse.com/#feat=mathml

ただ、MathJax.jsを読み込んでいると、JavaScript側で処理をしてちゃんと数式にしてくれるらしい。手元で動作させてみたところ、ChromeやIEでもちゃんと下記のMathMLの記述は評価され出力された。

∑ k = 1 10 k

Googleさんは一度MathMLを導入しかけてやめてるので、今後導入されるかどうかはよくわからない。

また、MathMLは人類が手書きするにはちょっと厳しい規格。例えば上で出した数式を出す場合、MathMLでは下記のようなk術になる。 

<math xmlns="http://www.w3.org/1998/Math/MathML">
  <mstyle displaystyle="true">
    <munderover>
      <mrow>
        <mo> &#x2211;<!--n-ary summation--> </mo>
      </mrow>
      <mrow>
        <mi> k </mi>
        <mo> = </mo>
        <mn> 1 </mn>
      </mrow>
      <mrow>
        <mn> 10 </mn>
      </mrow>
    </munderover>
    <mi> k </mi>
  </mstyle>
</math>

latex → mathmlのコンバータ的なものを探して使うことになる。

便利サイト

MathToWeb

ローカルでLaTeXの文字列をMathMLに変換できるjarを配布してる。Web版もある。
http://www.mathtoweb.com/cgi-bin/mathtoweb_home.pl

iTex2Img

こちらは画像に変換してくれるサイト。
http://www.sciweavers.org/free-online-latex-equation-editor

Web Equation

手書きの数式をLaTexやMathMLに変換してくれる便利なサイト。けっこう適当に書いてもうまく判定してくれる。
http://webdemo.myscript.com/#/demo/equation