MathMLを使ってみている

TeXでいいじゃん、と感じられたあなた。まあ、確かにそうです。

ただ、家に以前買ったMathMLの書籍があるのと、それからプログラミングで取り扱うには、明示的なタグ構造を持ったMathMLの方が扱いやすいかな、という思いもあって調べてみることにしました。ちなみに、同じ理由でSVGも好きですけど、それはまた別のお話（Canvas APIは別の観点で好きなので、結局なんでも好き）。

よくわかっていなかったんですが、まず、ブラウザによっては素で書いても対応しているんですね。なんと。すごい。試してみると、macOS Safariだと以下のコードでも「えっくすのにじょう」が表示されます。

<html>
<body>
  <math>
    <msup>
      <mi>x</mi>
      <mn>2</mn>
    </msup>
  </math>
</body>
</html>

どのブラウザでも対応させたいとなると、MathJaxを使え、ということらしいです。MathJaxって、TeX記法以外にも対応しているのか〜と思って適当にコピペしてみる。CDNから読み込めるみたいなので。ついでに少し複雑な数式にしてみます。

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" async
        src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=MML_SVG"></script>
  </head>
  <body>
    <math>
      <msup>
        <mi>e</mi>
        <mi>x</mi>
      </msup>
      <mo>=</mo>
      <munderover>
        <mo>∑</mo>
        <mrow>
          <mi>n</mi>
          <mo>=</mo>
          <mn>0</mn>
        </mrow>
        <mrow>
          <mi>∞</mi>
        </mrow>
      </munderover>
      <mfrac>
        <mn>1</mn>
        <mrow>
          <mi>n</mi>
          <mo>!</mo>
        </mrow>
      </mfrac>
      <msup>
        <mi>x</mi>
        <mi>n</mi>
      </msup>
    </math>
  </body>
</html>

と思ったらエラーが出てしまいました。

f:id:ironoir:20210219223009p:plain

調べてみると、MathJaxの読み込み時のURLのクエリパラメータ、configが大切らしいです。以下のように変更してやってみる。

config=TeX-AMS-MML_HTMLorMML

それでもだめなので、もしやと思って

<html lang="ja">
  <head>
    <meta charset="utf-8">

というふうにlang属性とcharsetをつけたら、いけました（実際にはcharsetだけでいいっぽい？）

f:id:ironoir:20210219224941p:plain

なんだかしょぼくてすいません。ひきつづき、やってみましょう。