Qiitaで$\newcommand{\rmtex}{\mathrm{\TeX}} \rmtex$記法の数式を表示する際にはMathJaxというライブラリが利用されています。素の$\newcommand{\rmlatex}{\mathrm{\LaTeX}} \rmlatex$では表現の幅が狭いので、$\rmlatex$用パッケージのいくつかが拡張機能(Extensions)という形でMathJaxに対応しています。これとは別に、MathJax独自の拡張機能も存在します。
QiitaのMathJaxのバージョンは2019年12月現在でv2.6.0です。2019年9月にMathJaxの最新版v3.0.0がリリースされていて、v2.6.0はおよそ4年前のものなので少し年季が入っています。その分だけ使用できる拡張機能の種類も少し少なめで、使えたとしても拡張機能のバージョンもまた古いものとなっています。ここでは備忘録も兼ねてQiitaで使える主要なMathJaxの拡張機能を書き出していきます。個別の詳細な使用方法については参照のリンクのドキュメントを読んでください。
【2022年1月11日 追記】
拡張機能に列挙抜けと記述誤りがあったためこの機に少し加筆修正を行いました。記事のタイトルも簡潔なものに変更。
ちなみに、2020年1月の投稿から2年が経ちましたがQiitaのMathJaxのバージョンは変わらずv2.6.0です。ブラウザのデベロッパーツールからSources -> Page -> cdn.qiita.comと覗くとバージョンが確認できます(Chromium系の場合)。
AMSmath AMSsymb
$\rmlatex$で数式を含む文書を書いている人は全員知っていて、MathJaxやKaTeXしか$\rmtex$記法を使ったことがない人でも知らず知らずのうちにこれらを使用しているかもしれません。
ˋˋˋmath
\delta(x) = \begin{cases}
\infty & (x = 0) \\
0 & (x \neq 0)
\end{cases}
ˋˋˋ
\delta(x) = \begin{cases}
\infty & (x = 0) \\
0 & (x \neq 0)
\end{cases}
参照
AMScd
名前の"cd"はCommutative diagramの略で、日本語だと可換図式というそうです。その名の通りAMScdは可換図式を描くためのCDという環境を提供します。下のような図を表現できます。長方形(とその組み合わせ)型の図のみに対応していて、斜め方向の矢印を記述する方法は無いようです。
この拡張機能は使用する前にページ内のどこかの数式内で\require{}コマンド1を使って明示的に「AMScdを使うよ！」と宣言する必要があります。そうしないとAMScdの記法をMathJaxが認識してくれません。宣言は\begin{CD}の直前である必要はありません。この記事のMarkdownを見てみると、実は下のˋˋˋmath ...ˋˋˋではなく記事の一番初めの"$\rmtex$"の部分で宣言が行われている事がわかります。また、\require{}する際は拡張機能の名前の大文字と小文字は区別されます。\require{amscd}ではNGですよ。
ˋˋˋmath
\require{AMScd}
\begin{CD}
A @>>{\text{What}}> B \\
@A{\text{diagram?}}AA @VV{\text{is a}}V \\
C @<{\text{commutative}}<< D
\end{CD}
ˋˋˋ
\begin{CD}
A @>>{\text{What}}> B \\
@A{\text{diagram?}}AA @VV{\text{is a}}V \\
C @<{\text{commutative}}<< D
\end{CD}
私の数学の知識がペラペラなのがバレるので早く次行きましょう。
参照
boldsymbol
記号を太字にする\boldsymbol{}コマンドを提供します。ギリシャ文字もボールドにできます。強制的に立体になる\mathbf{}と違ってイタリック体のままなのが美味しいところです。主にベクトルを書くときにいいです。いちいちタイプするには長いので\newcommandなどで短い表記にした方がいいでしょう。
ˋˋˋmath
\newcommand{\bs}[1]{\boldsymbol{#1}}
\bs{a} = \bs{i} a_x + \bs{j} a_y + \bs{k} a_z \\
\mathbf{rot}\ \bs{a} \stackrel{\text{def}}{=} \nabla \times \bs{a}
ˋˋˋ
\newcommand{\bs}[1]{\boldsymbol{#1}}
\bs{a} = \bs{i} a_x + \bs{j} a_y + \bs{k} a_z \\
\mathbf{rot}\ \bs{a} \stackrel{\text{def}}{=} \nabla \times \bs{a}
$\rmlatex$では\boldsymbol{}コマンドはamsmathに含まれていたような気がしますがMathJaxでは別個の拡張機能という扱いのようです。
newcommand
なぜかMathJaxでは拡張機能となっているコマンドがさらにいくつかあり、先程しれっと使った\newcommandはどうもMathJaxでは拡張機能らしいです。この他$(\mathrm{La})\rmtex$でおなじみの\def、\let、\renewcommand、\newenvironmentそして\renewenvironmentがnewcommand拡張機能のマクロという扱いとなっています。
mathchoice
使用される場所によって出力結果を変えるために使われる\mathchoice{displaystyle}{textstyle}{scriptstyle}{scriptscriptstyle}も拡張機能扱いになっています。これは標準の$\rmtex$で使えるものなので説明は省略します。私は今まで一度も使ったことのない命令ですが、どうやら$\rmtex$のダークサイドとも関わりのある結構ややこしい仕様があるようです。
参照
begingroup
begingroup拡張で定義されている\begingroup、\endgroup、\global、\gdefも標準の$\rmtex$で使用できるものですが、これについてはWebサイト上でのMathJaxの挙動と、他ユーザーが書き込みを行えるQiitaならでは使い方があるので触れておく必要があるでしょう。
この記事のコメント欄に$\LaTeX\ \mathrm{\LaTeX}\ \rmlatex$と入力し、「プレビュー」タブをクリックして結果を表示してみてください。
\LaTeX\ \mathrm{\LaTeX}\ \rmlatex
と表示されます。左2つについては不思議なことは何もありません。数式モード中で\LaTeXと打つと斜体で表示されて見栄えが悪いため、立体(ローマン体)にするには\mathrmしてあげる必要があるのです。では\rmlatexとは何者でしょうか。こんなマクロは$\rmlatex$では定義されていません。
実はこれ、いちいち\mathrmするのを面倒くさがった私が記事内の数式中で定義した\newcommand{\rmlatex}{\mathrm{\LaTeX}}というコマンド。MathJaxで\defなどを使ってマクロ・環境を普通に定義すると、そのページ中においてグローバルに通用するのです。通常の用途なら問題になりにくいとは思いますが、よほど性格の悪い迷惑系Qiiterがこの仕様を知ったら、一般的によく知られたコマンドを\defで強制的に上書きして、コメントで$\rmtex$記法を使いたい人に嫌がらせもできるでしょう。
このような問題に役立ちそうなのが\begingroup、\endgroupです。初めて使うときには**\require{begingroup}**宣言を行いましょう。
ˋˋˋmath
\begingroup
\newcommand{\curl}{\nabla \times} \curl \bs{E} = -\frac{\partial \bs{B}}{\partial t}
\gdef\rot{\nabla \times} \quad \rot \bs{B} = 0
\def\mathrm#1{\mathbf{#1}} \quad \mathrm{abcdef} \\
\endgroup
\curl \bs{E} = -\frac{\partial \bs{B}}{\partial t} \quad \rot \bs{B} = 0 \quad \mathrm{abcdef}
ˋˋˋ
\begingroup
\newcommand{\curl}{\nabla \times} \curl \bs{E} = -\frac{\partial \bs{B}}{\partial t}
\gdef\rot{\nabla \times} \quad \rot \bs{B} = 0
\def\mathrm#1{\mathbf{#1}} \quad \mathrm{abcdef} \\
\endgroup
\curl \bs{E} = -\frac{\partial \bs{B}}{\partial t} \quad \rot \bs{B} = 0 \quad \mathrm{abcdef}
上記の例を見てみると、\begingroupと\endgroupの間では3つのコマンドが定義され、それぞれ実行されています。\endgroup後に3つのコマンドを再度実行してみると、グローバルである\gdefすなわち\global\defで定義された\rot以外は定義が無かったことになっています。\curlの部分はエラーとなり、\mathrmは元の機能に復元されました。
\begingroupと\endgroupは1つの数式モード中に入れなければならない訳ではなく、\begingruop宣言以降の数式はすべて1つのグループ内であると解釈されています。記事の最初の数式中に\begingroupして最後の数式で\endgroupを行えば、少なくとも記事に最初にコメントする人に対してはクリーンな状態でMathJaxを渡すことができますね。
参照
color
\color{color}{math}で数式の色を変えられます。
ˋˋˋmath
\mathcal{L}[f(\color{red}{t})] =
\int_{-\infty}^{\infty} e^{-\color{blue}{s}\color{red}{t}} f(\color{red}{t}) \ d\color{red}{t} \\
\mathcal{L}^{-1}[F(\color{#0000FF}{s})] =
\frac{1}{2\pi i} \lim_{T\to\infty} \int_{c-iT}^{c+iT} e^{\color{#0000FF}{s}\color{#FF0000}{t}} F(\color{#0000FF}{s}) \ d\color{#0000FF}{s}
ˋˋˋ
\mathcal{L}[f(\color{red}{t})] = \int_{-\infty}^{\infty} e^{-\color{blue}{s}\color{red}{t}} f(\color{red}{t}) \ d\color{red}{t} \\
\mathcal{L}^{-1}[F(\color{#0000FF}{s})] = \frac{1}{2\pi i} \lim_{T\to\infty} \int_{c-iT}^{c+iT} e^{\color{#0000FF}{s}\color{#FF0000}{t}} F(\color{#0000FF}{s}) \ d\color{#0000FF}{s}
cancel
数式に打ち消し線を引けます。AMScdと同様に**\require{}宣言が必要です。**
線の色を変えたいこともあります。$\rmlatex$パッケージ版で簡単に打ち消し線の色を変更できる\renewcommand{\CancelColor}{color_command}はMathJaxでは使用できないみたいなので、colorと組み合わせることで実現します。
ˋˋˋmath
\require{cancel}
\cancel{\tan\frac{\pi}{2}=\infty} \\
\bcancel{\pi = 3.14} \\
7\times8 = \color{red}{\xcancel{\color{black}{54}}} \color{red}{56}\\
{}_6\mathrm{C}_3 = \frac{\cancelto{\cancelto{1}{2}}{6}\cdot 5\cdot \cancelto{2}{4}}{\cancelto{1}{3}\cdot \cancelto{1}{2}\cdot 1} = 20
ˋˋˋ
\require{cancel}
\cancel{\tan\frac{\pi}{2}=\infty} \\
\bcancel{\pi = 3.14} \\
7\times8 = \color{red}{\xcancel{\color{black}{54}}} \color{red}{56}\\
{}_6\mathrm{C}_3 = \frac{\cancelto{\cancelto{1}{2}}{6}\cdot 5\cdot 4}{\cancelto{1}{3}\cdot \cancelto{1}{2}\cdot 1} = 20
参照
bbox
MathJaxの独自機能みたいです。\bbox[backgroundcolor,margin,style]{math}で数式の周りを四角形の枠で囲えます。余白を自然な感じにするのは困難です。ただ、styleはCSSのように設定できて強いです。
ˋˋˋmath
\bbox[#a9a9a9,1px]{\text{オイラーの公式}} \\
\bbox[12px,border: 3px dotted]{e^{\mathrm{i}\theta} = \cos\theta + \mathrm{i}\sin\theta} \\
\bbox[dimgray,15px,border: 7px outset gray]{\text{ボタン風}}
ˋˋˋ
\bbox[#a9a9a9,1px]{\text{ オイラーの公式}} \\
\bbox[10px,border: 3px dotted black]{e^{\mathrm{i}\theta} = \cos\theta + \mathrm{i}\sin\theta} \\
\bbox[dimgray,13px,border: 7px outset gray]{\text{ボタン風}}
参照
enclose
数式の装飾を行えるMathMLの<menclose>にあたる機能を\enclose{notation}[attributes]{math}としてMathJaxに実装しています。外枠がbox以外も選べるbboxという感じです。文字と枠の間隔はbboxと比べてかなりいい感じ。ただし、Qiitaのバージョンのencloseでは[attributes]で設定できるのは線(とその中の数式)の色を変更するmathcolor、背景色を設定するmathbackgroundのみで、bboxのようにCSS式で[attributes]を設定できません。これが原因でbboxの上位互換にはなれていません。\require{enclose}が必要です。
ˋˋˋmath
\require{enclose}
% mathcolorは中身の色も変えてしまうため数式の色をcolorで黒に変更
\frac{G(s)}{\enclose{roundedbox}[mathcolor="red"]{\color{black}{1+G(s)H(s)}}} \\
\enclose{roundedbox}[mathcolor="red"]{\color{white}{█}}=0 \quad \text{をフィードバック制御系の特性方程式という}
ˋˋˋ
\require{enclose}
% mathcolorは中身の色も変えてしまうため数式の色をcolorで黒に変更
\frac{G(s)}{\enclose{roundedbox}[mathcolor="red"]{\color{black}{1+G(s)H(s)}}} \\
\enclose{roundedbox}[mathcolor="red"]{\color{white}{█}}=0 \quad \text{をフィードバック制御系の特性方程式という}
{notation}を変えるとcancelと全く同じ事ができます。
ˋˋˋmath
1+1 = \enclose{updiagonalstrike downdiagonalstrike}[mathcolor="red"]{\color{black}{3}} \color{red}{2}
ˋˋˋ
1+1 = \enclose{updiagonalstrike downdiagonalstrike}[mathcolor="red"]{\color{black}{3}} \color{red}{2}
参照
HTML
bboxでCSS風の記法ができる点について触れましたが、HTMLという拡張機能ではなんと数式に直接CSS装飾が行える\style{css}{math}マクロが存在します。
ˋˋˋmath
(x+1)^2 = \style{color: #228B22;
background-color: whitesmoke;
cursor: help;
font-weight: bold;
font-style: italic;
outline: 3px gray dashed;}{(x+1)(x+1)}
ˋˋˋ
(x+1)^2 = \style{color: #228B22;
background-color: whitesmoke;
cursor: help;
font-weight: bold;
font-style: italic;
outline: 3px gray dashed;}{(x+1)(x+1)}
私が試した限りでは上記のCSSプロパティがカスタマイズ可能でした。outlineが設定可能と分かったときは**bbox要る？**と思いましたが、どうも上下の部分は数式が表示されるエリアからはみ出てしまってoutlineはあまり使えないオプションのようです。
bboxとencloseと\styleを使いこなせれば、よりQiita映えする数式を実現できるかもしれません。
HTML拡張にある他の機能としては、かつてはQiitaでも\href{url}{math}マクロが使えたらしいのですが、亡き者となりました。今ではこのコマンドを打っても無視されて出力されます。
\cssId{ID}{math}、\class{name}{math}マクロは、JavaScriptと組み合わせることで例えばボタンを押すと数式が見えるようになるといった動的な制御が可能になるものですが、これらもどうやらQiitaでは機能しないようです。まぁこのコマンドだけ生きててもユーザーには活用法がないですが。
参照
action
Web上ならではの表現を可能とする拡張機能としてはactionもその一つでしょう。MathMLの<maction>にアクセスできるようになります。使えるマクロは\mathtip{math}{tip}、\texttip{math}{tip}、\toggle{math1}{math2}...{mathn}\endtoggleの3つ。\require{action}が必要です。
ˋˋˋmath
\require{action}
\mathtip{\triangle ABC \sim \triangle DEF}{\because \angle A=\angle D \text{かつ} \angle B=\angle E \text{かつ} \angle C=\angle F} \\
\texttip{E = mc^2}{3.5ピコグラムのエネルギーで1キログラムのお湯が沸く!!!} \\
\toggle{A=B}{B=C}{\therefore A=C}\endtoggle
ˋˋˋ
\require{action}
\mathtip{\triangle \mathrm{ABC} \sim \triangle \mathrm{DEF}}{\because \angle A=\angle D \text{かつ} \angle B=\angle E \text{かつ} \angle C=\angle F} \\
\texttip{E = mc^2}{3.5ピコグラムのエネルギーで1キログラムのお湯が沸く!!!} \\
\toggle{A=B}{B=C}{\therefore A=C}\endtoggle
\mathtipと\texttipは数式にマウスカーソルを合わせるとその名の通りtipが表示されます。tipとして使えるのが数式かテキストかが異なります。\toggleと\endtoggleで囲まれた数式はクリックするとその順番に表示が切り替えられます。最後の数式をクリックすると最初に戻り以降ループ。
ちなみにスマートフォン上では\toggleはタップで問題なく動作し、\mathtipもタップするとtipが表示されますが\texttipはtipを表示させる方法がなさそうです。私のスマホでのみの確認ですが。
参照
= TeX and LaTeX extensions - action
unicode
\unicode[height,depth][font]{char_ref}でUnicode文字を直接指定することが出来ます。これの面白いのは、[font]を指定できるところです。全員が全員に意図した表示がされる保証はありませんが…。
ˋˋˋmath
AC \unicode[0.5,0.05]{8735} BC \Longrightarrow AB^2 = AC^2 + BC^2
ˋˋˋ
AC \unicode[0.5,0.05]{8735} BC \Longrightarrow AB^2 = AC^2 + BC^2
関連する拙稿
extpfeil
矢印の上下に文字を入れたい時があります。smathにxleftarrow[bottom]{top}、xrightarrowがありますが、矢印の種類が少ないので不便を感じる方もいらっしゃるでしょう。extpfeilでは\xtwoheadrightarrow、\xtwoheadleftarrow、\xmapsto、\xlongequal、\xtofromの5種類を提供します。
が、これでも欲しい矢印がない場合もあります(extarrowsのが使いたいんだよ！ とか)。そのようなときのために、新しく延伸可能な矢印を定義するコマンド\Newextarrow{\name}{lspace,rspace}{unicode-char}が実装されています。しかしMathJaxが原因で伸ばせる文字は限られています。\require{extpfeil}が必要です。
ˋˋˋmath
\require{extpfeil}
\square \xlongequal{\text{定義!!}} \frac{1}{c^2}\frac{\partial ^2}{\partial t^2} - \Delta \\
\Newextarrow{\xLongleftrightarrow}{5,10}{8660} a \xLongleftrightarrow[\text{as you like}]{\text{extensible}} b \\
\Newextarrow{\xlrarrow}{5,10}{8703} a \xlrarrow[\text{ちゃんと伸ばせない}]{} b
ˋˋˋ
\require{extpfeil}
\square \xlongequal{\text{定義!!}} \frac{1}{c^2}\frac{\partial ^2}{\partial t^2} - \Delta \\
\Newextarrow{\xLongleftrightarrow}{5,10}{8660} a \xLongleftrightarrow[\text{as you like}]{\text{extensible}} b \\
\Newextarrow{\xlrarrow}{5,10}{8703} a \xlrarrow[\text{ちゃんと伸ばせない}]{} b
参照
verb
入力したテキストをそのまま出力できる\verb|text|が使えます。空白文字もそのまま出力。ˋ...ˋとˋˋˋ...(複数行)...ˋˋˋがあるQiitaでは不要かな。
ˋˋˋmath
\Game \verb|は\Gameと入力すれば出ます。| \\
\verb*text中で|を使いたいときは他の記号で囲む*
ˋˋˋ
\Game \verb|は\Gameと入力すれば出ます。| \\
\verb*text中で|を使いたいときは他の記号で囲む*
mhchem
実は使えます。このことに気づいて記事を書いたと言っても過言ではありません。\require{mhchem}宣言が必要です。
mhchemは化学表記法をより平易に$\rmlatex$の数式環境で記述出来る強力なパッケージです。MathJaxのみならず最近はKaTeXにもサードパーティの拡張機能として対応しました。mhchemによって表現できる化学式の例を下に示します。
ˋˋˋmath
\require{mhchem}
\ce{Na + H2O ->[{Explosively react}] NaOH + 1/2 H2 ^}
\ce{HF(aq) <<=> H3O+.F-}
ˋˋˋ
\require{mhchem}
\ce{Na + H2O ->T[Explosively react] NaOH + 1/2 H2 ^} \\
\ce{HF(aq) <<=> H3O+.F-}
ここのmhchem for MathJaxはv2.6.0で、最新のv3.xと比べると機能面で劣ります。例えば、v3以降は本家$\rmlatex$版でさえ存在しない最新機能として「Kröger-Vinkの表記法」という私には何を表しているのか分からない表現を簡単に記述出来る(例:\ce{Li^x_{Li,1-2x}}$\fallingdotseq \ce{Li^{$\times$}_{Li,$1-2x$}}$)のですが、Qiitaで左記を実現するには\ce{}中に^{$\times$}を入れるといった工夫が必要です。しかし軽い用途ならこのバージョンでも十分でしょう。
化学反応式を書いている記事がQiitaにもあったので需要はなくはないはず。Qiitaをケミカルに染めたい方は今日から使いましょう。
参照(v3前提の内容なので注意)
おまけ: Qiitaでも使いたかった拡張機能
MathJaxは対応してるけどバージョンの関係からかQiitaでは使えない物
physics
カッコの大きさを自動で調整する機能があったり、常・変微分が楽に書けて、かつちゃんと$\mathrm{d}$を立体にしてくれたり、ブラケット記法が超簡単だったりといろいろ嬉しいことがあります。理論面を解説する数式バリバリな記事もQiitaには多いのでぜひ使えるようになってほしい。使えるようになった場合、既存の数式コマンドを再定義してしまうことから書く前に\require{physics}が必要になるはずです。
こんな風に書けます。
\Re(1+i) = 1 \\ % ℜとはおさらば!
\Delta f = \laplacian f = \pdv[2]{f}{x} + \pdv[2]{f}{y} + \pdv[2]{f}{z} \\
\braket{\vb{r}}{\psi} % 内積(inner product)なので \ip{\vb{r}}{\psi} でもOK。
physics – Macros supporting the Mathematics of Physics
まとめ
いかがでしたか？意外とMathJaxって機能豊富ですね。この記事で少しでも新しい発見があって表現の幅を広げていただけたら幸いです。
よりよいQiita執筆ライフを！
MathJaxの拡張機能に関するドキュメントはこちら
- MathJax TeX and LaTeX Support — MathJax 2.6 documentation
- The TeX/LaTeX Extension List — MathJax 3.0 documentation
-
\require{}自体も拡張機能の一つです。 ↩