今回はMathJax3.0で自動でロードされる機能のうち主に数式を修飾（文字色の設定、背景色など）する機能について紹介していく。
MathJax3.0で利用できる拡張機能の一覧は、次の公式ドキュメントに記載がある。The TeX/LaTeX Extension List — MathJax 3.1 documentation
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. bboxの機能
bboxは数式の背景色や枠を設定するコマンドで
\bbox[option][math]
が基本的な書式になる。
$\bbox[cyan]{x+1}$
$\bbox[cyan]{x+1}$
数式の背景色が指定できる。
$\bbox[2pt]{x+1} $
$\bbox[2pt]{x+1}$
文字同士の余白2ptを設定できる。
$\bbox[cyan,2pt]{x+1}$
$\bbox[cyan,2pt]{x+1}$
背景色と余白を同時に設定できる。
$\bbox[2px, border: 2px solid red]{x+1}$
$\bbox[2px, border: 2px solid red]{x+1}$
余白と枠の設定ができる。
$\bbox[cyan, 2px, border: 2px solid red]{x+1}$
$\bbox[cyan, 2px, border: 2px solid red]{x+1}$
背景色、余白、枠を同時に設定できる。
2. 数式の打ち消し
数式の打ち消しを表示するコマンドを以下に示す。
$\cancel{x+1}$
$\cancel{x+1}$
左下から右上に打ち消し
$\bcancel{x+1}$
$\bcancel{x+1}$
右下から左上に打ち消し
$\xcancel{x+1}$
$\xcancel{x+1}$
両方、バツ印で打ち消し
$\cancelto{x+3}{x+1}$
$\cancelto{x+3}{x+1}$
打ち消した上で、訂正した値、式を表示。
3. 文字色
\color{色}{文字}を用いて文字に色を設定できる。
${\color{red} x} + {\color{blue} y}$
${\color{red} x} + {\color{blue} y}$
$\colorbox{red}{x+1}$
$\colorbox{red}{x+1}$
\bboxと同様に背景色を設定できる。
$\fcolorbox { red } {yellow} {x+1}$
$\fcolorbox { red } {yellow} {x+1}$
背景色と枠を同時に設定できる。
3. html装飾
ハイパーリンクやhtml(css)のスタイルを数式に適用することができる。
\href{url}{math}で{}内にIDなどを記述するとリンクをはることができる。
$x \href{#top}{=y^{2} + 1}$
$x \href{#top}{= y^{2} + 1}$
このページのtopに移動する。
$x \href{#step1}{= y^{2} + 1}$
$x \href{#step1}{=y^{2} + 1}$
以下のIDを付与した数式に移動する。IDの付与は\cssId{id}{math}で実行する。
$(x+1)^{2} = \cssId{step1}{\bbox[cyan]{(x+1)(x+1)}}$
$(x+1)^{2} = \cssId{step1}{\bbox[cyan]{(x+1)(x+1)}}$
\style{css}{math}でcssにstyleコードを記述することができる。
例えば
$ \style{background:limegreen;border:dashed 1px red}{x+1}$
$ \style{background:limegreen;border:dashed 1px red}{x+1}$
となりcssのstyleが適用されていることがわかる。\bboxや\colorでは定義色に限りがあったりするので、より細かくスタイルを指定するならば\cssがよいと思うが、コードが冗長になってしまうという欠点がある。
