今回はMathJax3.0で自動でロードされる機能のうちMathMLの1部機能をMathJax上で利用するコマンドを中心に紹介していく。
MathJax3.0で利用できる拡張機能の一覧は、次の公式ドキュメントに記載がある。The TeX/LaTeX Extension List — MathJax 3.1 documentation
MathMLとはHTMLタグを利用して数式を表示する手法だが、対応ブラウザがChromeやEdgeは未対応になっている。(対応ブラウザはFire FoxやSafariなど)
MathJax3.0とphysicsパッケージのロードについては以下に示す。今回はphysicsパッケージはロードしないところが変更点になる。
+MathJax3.0をロードするscript
<script> MathJax = { loader: {load: ['[tex]/physics']}, tex: { inlineMath: [['$', '$'], ['\\(', '\\)']], }, chtml: { matchFontHeight: false } }; </script> <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"> </script> <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script> //IE用スクリプト
注:HOMEやTOPページで複数ページ表示された状態では、script同士が干渉してうまく認識できないコマンドがある模様。1記事のみ個別のページとしてロードすれば正しく表示される
(追記2020.09.21): CDNサイトへのプライバシーエラーによりChromeなどで数式表示できない。対策は下記参照
Texによる数式表現37～MathJax, KaTeX表示トラブルの要因・解決 - つれづれなる備忘録
Texによる数式表現38～MathJaxの表示トラブル解決法 - つれづれなる備忘録
1. actionの機能
action機能はMathMLの
\mathtip{math}{text}は数式上をマウスオーバーするとtextが表示される。
$\mathtip{x+1}{基本数式}$
$\mathtip{x+1}{基本数式}$
\texttip{math}{text}はplain textモード(上は数式モード)の数式でマウスオーバーするとtextが表示される。(現れるtextの形式が若干上と異なる)
$\texttip{x+1}{基本数式}$
$\texttip{x+1}{基本数式}$
\toggle|math1}{math2}{math3}...\endtoggleはクリックするごとに数式がmath1,math2,math3...と切り替わる。
$\toggle{x+1}{x+2}{x+3}\endtoggle$
$\toggle{x+1}{x+2}{x+3}\endtoggle$
2. enclose機能
enclose機能は数式の囲い表示でMathMLの
\enclose{notation}[atributes]{math}でnotationは囲いなど修飾方法、attributesはmathcolorだと修飾と文字色、mathbackgroundだと背景色を指定し、mathに数式を記述する。
circleで円で囲い、mathcolorで円と数式を赤にしている。
$\enclose{circle}[mathcolor=red]{x}$
$\enclose{circle}[mathcolor=red]{x}$
文字だけ色を変えたい場合は\colorで文字色を指定する。
$\enclose{circle}[mathcolor=red]{\color{black}{x}}$
$\enclose{circle}[mathcolor=red]{\color{black}{x}}$
mathbackgroundで背景色を指定するが、形状はボックスとなる。
$\enclose{circle}[mathbackground=red]{x}$
$\enclose{circle}[mathbackground=red]{x}$
notationを複数指定することもできる
$\enclose{circle,box}{x}$
$\enclose{circle,box}{x}$
修飾を行う数式をencloseで修飾することもできる。
$\enclose{circle}{\enclose{box}{x}}$
$\enclose{circle}{\enclose{box}{x}}$
circle,box以外のnotationと効果を下に示す。
$\enclose{longdiv}{a^{2}+b^{2}}$
$\enclose{longdiv}{a^{2}+b^{2}}$
$\enclose{actuarial}{a^{2}+b^{2}}$
$\enclose{actuarial}{a^{2}+b^{2}}$
$\enclose{roundbox}{a^{2}+b^{2}}$
$\enclose{roundbox}{a^{2}+b^{2}}$
$\enclose{left}{a^{2}+b^{2}}$
$\enclose{left}{a^{2}+b^{2}}$
$\enclose{right}{a^{2}+b^{2}}$
$\enclose{right}{a^{2}+b^{2}}$
$\enclose{top}{a^{2}+b^{2}}$
$\enclose{top}{a^{2}+b^{2}}$
$\enclose{bottom}{a^{2}+b^{2}}$
$\enclose{bottom}{a^{2}+b^{2}}$
$\enclose{roundbox}{a^{2}+b^{2}}$
$\enclose{roundbox}{a^{2}+b^{2}}$
$\enclose{updiagonalstrike}{a^{2}+b^{2}}$
$\enclose{updiagonalstrike}{a^{2}+b^{2}}$
$\enclose{downdiagonalstrike}{a^{2}+b^{2}}$
$\enclose{downdiagonalstrike}{a^{2}+b^{2}}$
$\enclose{verticalstrike}{a^{2}+b^{2}}$
$\enclose{verticalstrike}{a^{2}+b^{2}}$
$\enclose{horizontalstrike}{a^{2}+b^{2}}$
$\enclose{horizontalstrike}{a^{2}+b^{2}}$
$\enclose{updiagonalarrow}{a^{2}+b^{2}}$
$\enclose{updiagonalarrow}{a^{2}+b^{2}}$
$\enclose{madruwb}{a^{2}+b^{2}}$
$\enclose{madruwb}{a^{2}+b^{2}}$
$\enclose{phasorangle}{a^{2}+b^{2}}$
$\enclose{phasorangle}{a^{2}+b^{2}}$
3. verb機能
MathMLの機能ではないが、verb機能を利用することで入力通りに出力するように指定できる。コードなどをTex中で記述する場合に用いることが多い。
\verb|text |としてtextに出力したい内容を記述する。例えば
$\verb| \sqrt{x} |$
$\verb| \sqrt{x} |$
Tex文中に挿入する場合は
$ \sqrt{x}は\verb|\sqrt{x}|と記述する$
$ \sqrt{x}は\verb|\sqrt{x}|と記述する$
4. まとめ
ここまででMathJax3.0の数式を装飾する機能について、ほぼ一通り紹介した。
