【LaTeX】Ultra Math Previewで数式プレビューを超強化



# Ultra Math Previewとは？

[Ultra Math Preview](https://marketplace.visualstudio.com/items?itemName=yfzhao.ultra-math-preview) （Umath）はVSCodeの数式プレビュー拡張機能です。LaTeX や Markdown のファイルを開いているときに使えます。こんな感じで表示してくれます。


![umath_sample.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823185/17f8015d-3755-bb08-f3d4-49068a393572.gif)



<!--LaTeX-Workshopにも同様のプレビュー機能がありますが、Umathが差別化している点はパネルではなくホバーである点だと思います。すなわち勝手にプレビューを表示してくれてなおかつ画面を圧迫することがないのです。--->
Ultra Math Preview を使うと打っている数式のプレビューを**リアルタイムに**見られます。

他の方法でもプレビューできるよという方もいるかもしれません。例えば[LaTeX-Workshop](https://marketplace.visualstudio.com/items?itemName=James-Yu.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`

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

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

### `\drac`

```latex
"\\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`の由来は「ある程度の大きさ以上の分数を **d**isplaystyle にするf**rac**」です。`\drac`[^1]というコマンドを google 検索しても誰も使ってなさそうだったので採用しました。

[^1]:これを使い始めてから`\drac`の響きに慣れすぎて逆に`\frac`がしっくりこなくなっています。なんか`\frac`より`\drac`の方が力が入るんですよね。

### `\require`
```latex
"\\require{physics}",
"\\require{HTML}",
"\\require{mathtools}",
"\\require{mhchem}",
"\\require{empheq}",
```


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


```latex
\require{extension名}
```
という使い方をします。extension は LaTeX の「パッケージ」を MathJax でも使える仕様にしたものです。MathJaX のドキュメントにも [extensions の説明](https://docs.mathjax.org/en/latest/input/tex/extensions.html)があります。

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

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

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

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



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

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

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


MathJax では（なぜか）`\bm`が使えないので代わりに`boldsymbol`として定義しています。`tdv`[^2]は physics の`\pdv`や`\dv`をもじって自分で作ったものです。`\e`は自然対数の底としての`e`です。何かの拍子にローマン体にしたくなることがあるかもしれないので自分はわざわざ定義しています。
[^2]:**t**riangle **d**eri**v**ativeの略です。 physics にはなぜか入ってなさそうだったので作ってみました。
### `\scriptsize`
```latex
"\\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`に近いほど透明です。

![SS_59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823185/e58a1c0f-7213-f88e-c660-a625fd179430.png)

ちなみに透過したいと思って最初は`"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

https://marketplace.visualstudio.com/items?itemName=yfzhao.ultra-math-preview

LaTeX-Workshop

https://marketplace.visualstudio.com/items?itemName=James-Yu.latex-workshop

MathJax の extensions

https://docs.mathjax.org/en/latest/input/tex/extensions.html

MathJax の extensions のリスト

https://docs.mathjax.org/en/latest/input/tex/extensions/index.html