つれづれなる備忘録

日々の発見をあるがままに綴る

Texによる数式表現24~MathJaxその他機能2

 今回はMathJax3.0で自動でロードされる機能のうちMathMLの1部機能をMathJax上で利用するコマンドを中心に紹介していく。

atatat.hatenablog.com

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の要素にアクセスできる。 https://developer.mozilla.org/en-US/docs/Web/MathML/Element/menclose

\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の数式を装飾する機能について、ほぼ一通り紹介した。