MathJaxを使ってみる - HTML、WordPressで数式を表示する

ICT

 当ブログでは数式を表記する場合、
 上付き、下付きの文字は極力HTMLのタグ <sup> </sup><sub> </sub>で済ませて、
 分数も極力スラッシュ /で済ませたいと思っているが、
 稀に限界を感じることもある。

 例えば、ごみごみした分数だと/では区切りが分かりにくくなる。
 ルート記号(√)やベクトルもルビを使うなどして表示してみたが明らかに変。
 行列も横点々と縦点々は各々…や:で何とか代用できるが、斜め点々は……。

 しかし、今はMathJax (www.mathjax.org)がある。
 前回、√をキチンと表示すべく初めてWordPressで使ってみた。

 いくつかのHTMLページではブログ開始前から少しばかり使っているが、WordPressでもプラグインをインストールすれば手軽に使えることを知った。
  ※ AMPサイト化している場合、別途対処が必要

 基本的にTeX、LaTeXと同じ記法。

 分数は、\frac{x^5-x^3-1}{1-\frac{1-y}{1-z}}

$$ \frac{x^5-x^3-1}{1-\frac{1-y}{1-z}} $$

 n√xは、\sqrt[n]{x}

$$ \sqrt[n]{x} $$

 ベクトルABは、
 \vec{AB}\boldsymbol{AB}

$$ \vec{AB}、\boldsymbol{AB} $$

といった具合。
 ¥はバックスラッシュ \と同じ。

 HTMLでMathJaxを使う場合、ヘッド部 <head> </head>
 例えば

<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML">
</script>

と入れて、
 \( \)

 \[ \]
の中に記述していけば順次整形変換して表示してくれる。
 前者はインライン、つまり文章中に表示される。
 後者はディスプレイ、つまり一行独立して表示される。

  ※ 上記の<script> </script>で指定しているURLはだいぶ前に導入した時のもので、おそらくversion 2。まだ使えているのでそのままだが、最新のMathJaxはversion 3。
    最新のURLはMathJaxのHP - Getting Started - Web Integrationを参照。

 WordPressでMathJaxを使う場合、いくつかプラグインがあるが、当ブログでは「MathJax-LaTeXプラグイン」をインストールした。
 インストール後、有効化。設定はデフォルトのまま。
 投稿記事の任意の場所、例えば冒頭に

[mathjax]

とショートコードを入れて、
 \( \)

 $$ $$
の中に記述していけば順次整形変換して表示してくれる。
 前者がインライン表示、後者がディスプレイ表示。

 TeX、LaTeXといっても知らない人は知らないと思うが、世にWindowsやインターネットが現れる前から使われていたソフトウェア。
  ※ TeX + 追加機能(マクロ) ⇒ LaTeXなど
 文書(テキストファイル)にちょっと手を加えて「○○○.tex」に変えた後、コンパイルすると整形変換されて割と手軽に印刷(プリント)することができた。
 いわゆるDTPソフトで、文章中に数式があろうとなかろうと関係なく、度々使わせてもらった。
 TeXのeをEにする時は字を少し下げないとダメとか少々気難しい感じだが
 $$ \TeX と \LaTeX $$
 今も健在。

TeX Wiki(texwiki.texjp.org/


 今は(10年程前から)MathJaxのおかげでHTMLページでも
 LaTeXと同じ記法で書いて
 LaTeXと同じように表示してくれる。

 MathJaxはJavaScriptライブラリ。
 HTML、WordPressのMathJax使用ページを開くとMathJax.jsが読み込まれ、順次整形変換してくれる。
 Webフォントを読み込むのと同様、表示に少し時間がかかるが、個人的にはたいして気にならない。
 タグを組んだり、数式を画像にしてペーストするのに比べれば断然手間が省ける。

 ただし、半角スペースが入っていたり入っていなかったり、ちょっとしたことで表示してくれないので、最初は一発でうまくいかないかも。

 今回、WordPressでもなかなか表示されず、「ビジュアル編集」から「HTMLとして編集」に変えたり、いろいろいじっているうちに表示されるようになった。
 どうやら<code> </code>で囲まれていると変換されないようだ。

 よく見たら閉じる側の\))\になっていた。ケアレスミスでした。

 とりあえずMathJax使用ページを開いた時にブラウザの画面下に「Processing math……」などが表示されれば、設定のほうは問題ないハズ。
 あとはちまちまいじるだけ。

 インラインでちゃんと変換されていますか--- \( \bar{O} \dot{K} \)

 Σやlimの上付き、下付きの文字もOK。

$$ \sum_{i=0}^{n}x_i $$

$$ \lim_{n \to \infty}x_n $$

 行列もOK。

\( A = \left( \begin{array}{cccc} a_{11}&a_{12}&\cdots&a_{1n}\\ a_{21}&\pi&\cdots&a_{2n}\\ \vdots&\vdots&\ddots&\vdots\\ a_{n1}&a_{n2}&\cdots&a_{nn} \end{array} \right) \)

 場合分けもOK。

\( G(z) は \begin{cases} 虚 & if z \geq zz \\ 実 & if z \lt zz \end{cases} \)

 (PCならば)数式部分を右クリックしてShow Math As - TeX Commandsを選ぶと元の表記が見られマス。

ふシゼン
タイトルとURLをコピーしました