MathJaxでウェブページに数式を入れる

最終的にはTeX-PDFにしようと思うのだが

数学の用語をウェブ検索するとpdfのページの方が多くなった印象をうける。昔はウェブブラウザに付加ソフトを追加したり、ダウンロードしてから別のソフトで表示するなど面倒だったり、表示が重かったりしたが、最近はストレスなく軽快に見られることが多い。表示幅が固定なのはhtmlの思想に反するが、数式には好都合である。

しかし、y=a_0+a_1x+a_2x^2 と書くと $y=a_0+a_1x+a_2x^2$ と表示されるよとか、\sqrt{b^2-4ac} と書くと $\sqrt{b^2-4ac}$と表示されるよとかは、ウェブページに直接両方を書いて比較したい。

そこで、TeXの数式記述方法をほとんどそのままhtmlに持ってくることができるMathJaxも試してみる。

若干の違いもあるらしいので、それも含めてまとめていく。

MathJaxを使うページの設定

MathJaxを使うにはhead部に次の設定を書きます。

<script id="MathJax-script" async
  src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js">
</script>

このURLはver.3になった最近のものです。本文中に \\( と \\) でくくられた部分があると、数式として処理してくれます。

TeXでは \$ \$ でくくられる部分が数式として処理されます。MathJaxでも同様にすることができます。共通にすると文章をそのまま使うことができるので便利です。

そのためには、先程のURLの前に次のように加えます。\\(も\$も両方使えるようにする設定です。

<script>
MathJax = {
  tex: {
    inlineMath: [['$', '$'],['\\(', '\\)']]
  }
};
</script>
<script id="MathJax-script" async
  src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js">
</script>

URL末尾のtex-chtml.jsはいくつかバリエーションがあります。

tex-???.js記述出力説明
tex-chtml.jsTeXhtml普通はこれ
tex-mml-chtml.jsTeXまたはMathMLhtml記述に数式タグを混在可とする
tex-svg.jsTeXsvg出力を画像(svg)にする

MathMLは数式用のタブを使って記述する方式です。MathMLで書くのは面倒なので、mmlのついたものを使う必要はあまりないでしょう。ソフトウェアでMathML出力されたものにTeXで書き足すような場合のために用意されているのかもしれません。

chtmlとsvg

chtmlはhtml出力ですが、マニュアルではcommomHTMLと書いてあります。これはhtml+cssでの表現です。svgは画像として表現すると書きましたがpngのような画像ではありません。ページ上での文字列の選択結果は異なりますが、見た目はあまり変わらないようです。不都合がない限りchtmlを採用しようと考えています。

生成されるページの記述がどう違うか次に試してみます。

次のxxからyyまでを選択してfirefoxの「選択した部分のソースを表示」で内容を確認するとchtmlとsvgの違いが見えます。xx,yyは文字列を選択しやすくするために付けています。a2の部分だけがMathJaxです。

xx$a^2$yy

tex-chtml.jsまたはtex-mml-chtml.jsの場合

xx<mjx-container class="MathJax CtxtMenu_Attached_0" jax="CHTML" style="font-size: 127.3%; position: relative;" role="presentation" tabindex="0" ctxtmenu_counter="2"><mjx-math class="MJX-TEX" aria-hidden="true"><mjx-msup><mjx-mi class="mjx-i"><mjx-c class="mjx-c1D44E TEX-I"></mjx-c></mjx-mi><mjx-script style="vertical-align: 0.363em;"><mjx-mn class="mjx-n" size="s"><mjx-c class="mjx-c32"></mjx-c></mjx-mn></mjx-script></mjx-msup></mjx-math><mjx-assistive-mml role="presentation" unselectable="on" display="inline"><math xmlns="http://www.w3.org­/1998/Math/MathML"><msup><mi>a</mi><mn>2</mn></msup></math></mjx-assistive-mml></mjx-container>yy

tex-svg.jssの場合

xx<mjx-container class="MathJax CtxtMenu_Attached_0" jax="SVG" role="presentation" style="position: relative;" tabindex="0" ctxtmenu_counter="2"><svg style="vertical-align: -0.023ex;" xmlns="http://www.w3.org/2000/svg" width="2.11ex" height="1.909ex" role="img" focusable="false" viewBox="0 -833.9 932.6 843.9" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true"><defs><path id="MJX-3-TEX-I-1D44E" d="M33 157Q33 258 109 349T280 441Q331 441 370 392Q386 422 416 422Q429 422 439 414T449 394Q449 381 412 234T374 68Q374 43 381 35T402 26Q411 27 422 35Q443 55 463 131Q469 151 473 152Q475 153 483 153H487Q506 153 506 144Q506 138 501 117T481 63T449 13Q436 0 417 -8Q409 -10 393 -10Q359 -10 336 5T306 36L300 51Q299 52 296 50Q294 48 292 46Q233 -10 172 -10Q117 -10 75 30T33 157ZM351 328Q351 334 346 350T323 385T277 405Q242 405 210 374T160 293Q131 214 119 129Q119 126 119 118T118 106Q118 61 136 44T179 26Q217 26 254 59T298 110Q300 114 325 217T351 328Z"></path><path id="MJX-3-TEX-N-32" d="M109 429Q82 429 66 447T50 491Q50 562 103 614T235 666Q326 666 387 610T449 465Q449 422 429 383T381 315T301 241Q265 210 201 149L142 93L218 92Q375 92 385 97Q392 99 409 186V189H449V186Q448 183 436 95T421 3V0H50V19V31Q50 38 56 46T86 81Q115 113 136 137Q145 147 170 174T204 211T233 244T261 278T284 308T305 340T320 369T333 401T340 431T343 464Q343 527 309 573T212 619Q179 619 154 602T119 569T109 550Q109 549 114 549Q132 549 151 535T170 489Q170 464 154 447T109 429Z"></path></defs><g stroke="currentColor" fill="currentColor" stroke-width="0" transform="matrix(1 0 0 -1 0 0)"><g data-mml-node="math"><g data-mml-node="msup"><g data-mml-node="mi"><use xlink:href="#MJX-3-TEX-I-1D44E"></use></g><g data-mml-node="mn" transform="translate(529, 363) scale(0.707)"><use xlink:href="#MJX-3-TEX-N-32"></use></g></g></g></g></svg><mjx-assistive-mml role="presentation" unselectable="on" display="inline"><math xmlns="http://www.w3.org­/1998/Math/MathML"><msup><mi>a</mi><mn>2</mn></msup></math></mjx-assistive-mml></mjx-container>yy

SVG版

数式部分の指定の仕方

繰り返しになりますが、普通の文章の中に\$ \$ または\\( \\)で囲んだ部分を置くと内部が数式として処理されます。添字や累乗といったものがなくても、数式で使うアルファベットの書体が書籍で見慣れたものになることが嬉しいところです。

たとえばろ\$xy\$は$xy$になり、\$abgl\$は$abgl$になります。

高さが必要なものは多少はみ出して、多少詰めてくれます(変更も可能です)。

たとえば、\$\sum_{i=1}^na_ix^i\$, \$\int_0^\pi\sin x\$, \$\frac{1-x}{x}\$ などと書けば、

$\sum_{i=1}^na_ix^i$, $\int_0^\pi\sin x$, $\frac{1-x}{x}$ などとなります。

\$ \$で囲んだ部分はhtml内で普通の文字の扱いなので、<p>などブロックを作るタグ内に入れて使うのが良いでしょう。

数式だけからなる行

もう一つ、\$\$ \$\$ または\\[ \\]で囲んだ部分は数式だけを独立した行に書いてセンタリングします。

たとえば\$$\y=a_0+a_1x+a_2x^2+a_3x^3\$\$ と書けば、

$$y=a_0+a_1x+a_2x^2+a_3x^3$$

のような感じになります。

独立しているので、高さが必要なものは本来のレイアウトになります。

たとえば\$\$\sum_{i=1}^na_ix^i\$\$ \$\$\int_0^\pi\sin x\$\$ \$\$\frac{1-x}{x} \$\$と書けば、

$$\sum_{i=1}^na_ix^i$$ $$\int_0^\pi\sin x$$ $$\frac{1-x}{x}$$

となります。

\$\$ \$\$ で囲まれた部分はブロックとなりますので、<p>タグで囲むのは意味がありません。余白を作ったり、罫線で囲むには<div>タグで囲んでcssを使うのがいいでしょう。

数式の中の英字

TeX記述 TeX表示 解説
\$abcdefghijklmnopqrstuvwxyz\$ $abcdefghijklmnopqrstuvwxyz$ 数式中の英字はイタリック
\$ABCDEFGHIJKLMNOPQRSTUVWXYZ\$ $ABCDEFGHIJKLMNOPQRSTUVWXYZ$ 大文字も
\$1234567890\$ $1234567890$ 数字はローマン体
\$あいうえおアイ亜以\$ $あいうえおアイ亜以$ 数式の中に和文の文字を入れると...
\$\mathrm{abcimxyzAIM}\$ $\mathrm{abcimxyzAIM}$ \\mathrm は Math Roman
sin, cos, log などの関数は以下のようにします
\$\\sin x\$ $\sin x$ sinとxの間のスペースはsinxという関数でないことを示します
\$sin x, \mathrm{sin} x\$ $sin x, \mathrm{sin} x$ これはお勧めしません
\$\mathbf{abcimxyzAIM}\$ $\mathbf{abcimxyzAIM}$ \mathbf は Math Romanなボールド
\$\boldsymbol{abcimxyzAIM}\$ $\boldsymbol{abcimxyzAIM}$ \boldsymbol は イタリックなボールド TeXでは無効かもしれません
\$\bm{abcimxyzAIM}\$ $\bm{abcimxyzAIM}$ \bm は イタリックなボールド MathJaxでは無効かもしれません

イタリックなボールドはベクトルとして使いたいのですが、TeXとMathJaxのデフォルトの状態で異なるのは困るので、確認のためにあえて書いています。\bmなどと色付きになっていたらMathJaxでは無効だということです。回避策はあります。

TeX記述 TeX表示 解説
\$\newcommand{\bm}[1]{\boldsymbol{#1}}\$
\$\bm{abcimxyzAIM}\$
$\newcommand{\bm}[1]{\boldsymbol{#1}}\bm{abcimxyzAIM}$ これは\bmが使えない環境で、
代わりに\boldsymbolを使うというもの。
\$\vec{x}\$ $ \vec{x}$ \vec は上に矢印をつけるベクトル表記
\$\newcommand{\vec}[1]{\boldsymbol{#1}}\$
\$\vec{x}\$
$\newcommand{\vec}[1]{\boldsymbol{#1}}\vec{x}$ \vec の代わりに\boldsymbolを使うというもの。

ギリシャ文字

TeXが生まれたのはUnicodeができる前、すくなくとも普及する前ですのでギリシャ文字は直接入れずに、\alpha, \beta などで入力します。今は大勢がUnicode対応になりましたから直接入れることができますが、数式としてのバランスや入力のしやすさが同じであることを考えると、\alphaで入れるほうが得策です。

TeX記述 TeX表示 直接 \$直接\$ Unicode
\$\alpha\$ $\alpha$ α $α$ U+03B1
\$\beta\$ $\beta$ β $β$ U+03B2
\$\sigma\$ $\sigma$ σ $σ$ U+03C3
\$\phi\$ $\phi$ ϕ $ϕ$ U+03D5
\$\varphi\$ $\varphi$ φ $φ$ U+03C6
\$\psi\$ $\psi$ ψ $ψ$ U+03C8
\$\Psi\$ $\Psi$ Ψ $Ψ$ U+03A8

数学記号

これもギリシャ文字と同様な事情がある。日本語には×,÷などの文字があるが、ASCIIに代表されるUnicode以前の英字にはなく、/times, /divなどで入力する。

TeX記述 TeX表示 直接 \$直接\$ Unicode
\$-$ $-$ - $-$ U+002D
\$+\$ $+$ + $+$ U+002B
\$\times\$ $\times$ × $×$ U+00D7
\$\div\$ $\div$ ÷ $÷$ U+00F7
\$=\$ $=$ = $=$ U+003D
\$\neq\$ $\neq$ $≠$ U+2260
\$\le\$ $\le$ $≤$ U+2264

上付き下付き添字

TeX記述 TeX表示 説明
\$x^{-i}y^{34}\$ $x^{-i}y^{34}$ ^に続く{ }内が上付き
\$x^2y^a\$ $x^2y^a$ 一文字なら{ }は省略可
\$x_{ab}y_{34}\$ $x_{ab}y_{34}$ _に続く{ }内が下付き
\$x_2y_a\$ $x_2y_a$ 一文字なら{ }は省略可
\$X^a_bY_b^a\$ $X^a_bY_b^a$ どちらが先でも殆ど変わりない
\$X^{a^2}\$ $X^{a^2}$ 多重にできる
\$\sin^2\theta+\cos^2\theta=1\$ $\sin^2\theta+\cos^2\theta=1$ 文字間は自動で調整される
\$\sin^2 \theta + \cos^2 \theta = 1 \$ $\sin^2 \theta + \cos^2 \theta = 1 $ 見やすいようにスペースを入れても表示は同じ

分数や括弧

TeX記述 TeX表示 説明
\$y=\frac{x^2+3x-4}{t+1}\$ $y=\frac{x^2+3x-4}{t+1}$ \frac{分子}{分母}
\$y=\frac{(x-2)(x-5)}{x^2}e^{2x}\$ $y=\frac{(x-2)(x-5)}{x^2}e^{2x}$ ( )はそのまま使える
\$[2(x-y)+3]z^2\$ $[2(x-y)+3]z^2$ [ ]もそのままでよい
\$\{2(x-y)+3\}z^2\$ $\{2(x-y)+3\}z^2$ { }は\{ \}とする
\$\frac{d}{dz}\left[(1-z^2)\frac{dP_l(z)}{dz}\right] = -\Lambda P_l(z)\$ $\frac{d}{dz}\left[(1-z^2)\frac{dP_l(z)}{dz}\right] = -\Lambda P_l(z)$ 括弧を内部の式に合わせて大きくしたいときは\left, \rightを前置する

最後の例は、\$ \$ ではなく \$\$ \$\$ で使うと本来の形になる

$$\frac{d}{dz}\left[(1-z^2)\frac{dP_l(z)}{dz}\right] = -\Lambda P_l(z)$$