Ultra Math Previewとは？

Ultra Math Preview （Umath）はVSCodeの数式プレビュー拡張機能です。LaTeX や Markdown のファイルを開いているときに使えます。こんな感じで表示してくれます。

Ultra Math Preview を使うと打っている数式のプレビューをリアルタイムに見られます。

他の方法でもプレビューできるよという方もいるかもしれません。例えばLaTeX-Workshop は LaTeX を打つ多くの人が使っていると思います。そこにも数式のプレビュー機能自体はついていて Math Preview Panel や Hover Preview があります。しかし

数式を打つと Hover が勝手に出てくる
LaTeX と Markdown で同じマクロがプレビューに使える
ホバーが透過できる
ホバーの上からその下にある文字をクリックすることができる

ことは、Ultra Preview Math 特有のメリットです。この辺では LaTeX-Workshop のものと差別化できていると思います。

Ultra Math Preview の設定

Ultra Math Preview はカスタマイズ性が高いです。settings.jsonで以下の項目を設定することができます。

umath.preview.renderer レンダリング（変換）に MathJax を使うか KaTeX を使うか
umath.preview.macros LaTeX のマクロ
umath.preview.position ホバーを出す位置
umath.preview.customCSS ホバーの見た目を変えるCSS

突然 MathJax と KaTeX というのが出てきて「？？？」となった方もいらっしゃるかもしれません。これらは普段 HTML で LaTeX 形式で書かれた数式をウェブサイト上に表示するために使われているものです。Ultra Math Preview ではこれらを使って数式をレンダリング（変換）しています。だから LaTeX ではコンパイルに数秒かかる数式でも一瞬にして表示されるのです。ちなみに LaTeX-Workshop の方の数式プレビューでも MathJax が使われています。

なお MathJax も KaTeX も数式の中で使われるコマンド（制御綴）に関しては LaTeX とほぼ同じです。そのことで心配する必要はありません。

自分はこういう設定をしています。なおsettings.json内のためバックスラッシュを2つ書いて escape しています。

settings.json


"umath.preview.renderer": "mathjax",
"umath.preview.macros": [
		"\\require{physics}",
		"\\require{HTML}",
		"\\require{mathtools}",
		"\\require{mhchem}",
		"\\require{empheq}",
		"\\def\\l{\\left}",
		"\\def\\r{\\right}",
		"\\newcommand{\\drac}[2]{\\mathchoice{\\displaystyle\\frac{\\, #1\\, }{\\, #2 \\,}}{\\displaystyle\\frac{\\, #1\\, }{\\, #2 \\, }}{\\scriptstyle\\frac{#1}{#2}}{\\scriptscriptstyle\\frac{#1}{#2}}}",
		"\\newcommand{\\tdv}[3][]{\\drac{\\Delta^{#1} {#2}}{\\Delta {#3}^{#1}}}",
		"\\newcommand{\\bm}[1]{\\boldsymbol{#1}}",
		"\\newcommand{\\divisionsymbol}{÷}",
		"\\def\\div{\\vnabla\\vdot}",
		"\\newcommand{\\divi}{\\divisionsymbol}",
		"\\newcommand{\\si}[1]{\\mathrm{#1}}",
		"\\newcommand{\\e}{e}",
        "\\scriptsize{}",
	],
	"umath.preview.position": "top",
	"umath.preview.customCSS": [
		"background-color: rgba(0, 0, 0, 0.5);",
	],

以下、それぞれの項目を説明していきます。

`umath.preview.renderer`

MathJax と KaTeX のどちらを使うかを選べます。自分は MathJax にしています。

`umath.preview.macros`

簡単なものなら LaTeX でマクロを使うのと同じように数式のマクロを設定できます。拡張機能の動画を見る限り\newcommand等で自分で定義したコマンド（制御綴）をプレビューできることが想定されているようです。一つ一つ説明します。

`\l`と`\r`

"\\def\\l{\\left}",
"\\def\\r{\\right}",

自分は\leftと\rightが長いのでいつも\l、\rと略しています。\left(にも\left\{にも\left|にも\left[にも使えて（right も同様）後述する physics の\qty||と異なり MathJax でもエラーを起こさないで使える等一貫性が高いので使っています。

`\drac`

"\\newcommand{\\drac}[2]{\\mathchoice{\\displaystyle\\frac{\\, #1\\, }{\\, #2 \\,}}{\\displaystyle\\frac{\\, #1\\, }{\\, #2 \\, }}{\\scriptstyle\\frac{#1}{#2}}{\\scriptscriptstyle\\frac{#1}{#2}}}",

LaTeX で分数をカスタマイズしていて\dracという（謎の）オレオレ分数を使っていますがそこでは

inline 数式でも displaystyle になるようにする
間の横棒を長くする
逆に scriptstyle 以下のサイズに関しては変えない

ということをしているのでそれに合わせて MathJax でも変更しています。

LaTeXでは\raiseboxとか使って上下の感覚も調整しています。しかしプレビューでは削りました。 MathJax が認識してくれないのとそもそも自分しか見ないプレビューなのだからまあいいだろうと思ったからです。もし自分が作った複雑なコマンドをプレビューしたくなったときは、本当に完全再現する必要があるのか、というところも考えましょう。やり方次第でだいぶ楽になります。

なお\dracの由来は「ある程度の大きさ以上の分数を displaystyle にするfrac」です。\drac¹というコマンドを google 検索しても誰も使ってなさそうだったので採用しました。

`\require`

"\\require{physics}",
"\\require{HTML}",
"\\require{mathtools}",
"\\require{mhchem}",
"\\require{empheq}",

\requireは LaTeX にはない MathJax 固有のコマンドであり

\require{extension名}

という使い方をします。extension は LaTeX の「パッケージ」を MathJax でも使える仕様にしたものです。MathJaX のドキュメントにも extensions の説明があります。

なおこの\require、「Ultra Math Preview でも使える」というより「試してみたら使えちゃった」という方が正しい代物です。一種の裏技だと考えてお使いください。

さて、\requireすれば extensions の中のコマンドもプレビュー可能です。

例えばphysicsやmathtools（LaTeX の physics や mathtools パッケージに相当）を\requireすれば中のコマンドをプレビューします。mhchemも使えるようです。\(\)や$$等数式環境の中に入れると化学式もプレビューしてくれます（mhchem の使い方として推奨されるのかはわかりませんが...）。MathJax の The TeX/LaTeX Extension List にはこの他にも使える extensions が載っています。

ちなみに physics については定義しているコマンドが高性能すぎる故か時々プレビューできないものがあります。（\qty||など、なお\qty{}と\qty()はちゃんと使えます。この仕様はどうやら LaTeX-Workshop の方の数式プレビューでも同じようなので Umath というより MathJaxの問題のようです。）

なお extensions を使うのに特別なもの等を自分でインストールする必要ははありません。

`\divi`と`si`

"\\newcommand{\\divi}{\\divisionsymbol}",
"\\newcommand{\\si}[1]{\\mathrm{#1}}",

siunitxの\siコマンドを「立体にする」ものとして無理やりプレビューさせています。また割り算記号「÷」についてはphysicsでどう定義したら表示されるのか悩んだのですが、結局 unicode 文字の÷をそのまま表示させればいいじゃないかと気づいてそうしています（これらは自分的ライフハックです）。

`\tdv`、`bm`、`\e`

"\\newcommand{\\tdv}[3][]{\\drac{\\Delta^{#1} {#2}}{\\Delta {#3}^{#1}}}",
"\\newcommand{\\bm}[1]{\\boldsymbol{#1}}",
"\\newcommand{\\e}{e}",
],

MathJax では（なぜか）\bmが使えないので代わりにboldsymbolとして定義しています。tdv²は physics の\pdvや\dvをもじって自分で作ったものです。\eは自然対数の底としてのeです。何かの拍子にローマン体にしたくなることがあるかもしれないので自分はわざわざ定義しています。

`\scriptsize`

"\\scriptsize{}",

これまた裏技的な方法なのですが末尾の行に\scriptsize{}を入れています。こうすると常に LaTeX における\scriptsizeが適用されている状態になります。つまりプレビューされる数式が小さくなるということです。\scriptsizeだとプレビューで表示される幅と pdf で数式が表示可能な幅が同じくらいになります。数式がプレビューからはみ出て見えなくならないように入れました。{}は命令の区切りを明示するためです。

文字の大きさを変える命令には、他にも以下のものがあります（大きい順です）。
\Huge,\huge,\LARGE,\Large,\large,\normalsize,\small,\scriptsize,\tiny

\Hugeにするととっても大きくなって楽しいです。

なお\footnotesizeだけは footnote（脚注）を書く機会が MathJaxにないためか、例外的に使えないようです。

`umath.preview.position`

ホバーを出す位置です。top（上）とbottom（下）があります。お好みで。自分は上から下に tex ファイルを書いていくのに邪魔にならないようにtopにしています。

`umath.preview.customCSS`

CSS で表示内容を決められます。

"background-color: rgba(0, 0, 0, 0.5);",

背景色を設定します。とりあえず r=0,g=0,b=0 で黒にして、4つ目の透過度合いのみ0.5に設定しています。透過するとこんな感じで後ろの文字が見えるので便利です。0から1の範囲で選べます。0に近いほど透明です。

ちなみに透過したいと思って最初は"opacity: 0.5;"としましたが、文字まで半透明になってしまうのでこちらを採用しています。

ちなみに背景がダークモードではなくライトモードを使う人であれば0.5では透明すぎるので

"background-color: rgba(255, 255, 255, 0.8);",

くらいにすると見やすくなるかと思います。

その他の設定

数式ホバーは使っているうちに一旦消したくなってくることもあるでしょう。また tex ファイル内で新しくマクロを作る場合もあるでしょう。Ultra Math Preview ではそのためのコマンドが用意されています。キーボードショートカットをつけることも可能です。

umath.preview.closeAllPreview
- そのとき表示されている数式ホバーをなくします。
- デフォルトではescapeが設定されています。
umath.preview.toggleMathPreview
- ホバーを出し入れします。
- 一度toggleするともう一度手動で出すまで出ません。
umath.preview.reloadMacros
- 開いているファイルの中で\newcommand等で定義したマクロを、プレビューできるようになります。
- あえて手動で読み込む設定になっているようです。

参考文献

Ultra Math Preview

LaTeX-Workshop

MathJax の extensions

MathJax の extensions のリスト

これを使い始めてから\dracの響きに慣れすぎて逆に\fracがしっくりこなくなっています。なんか\fracより\dracの方が力が入るんですよね。 ↩
triangle derivativeの略です。 physics にはなぜか入ってなさそうだったので作ってみました。 ↩