📐

Visual Studio CodeでKaTeXを使ってPhysicsライクな数式を書く設定

に公開
VS Code
Markdown
math
katex
LaTeX
tech

VSCode (とか、そこから派生したいろんなIDE) でMarkdownを書く際、書いたものを綺麗にプレビューしたい場合は Markdown Preview Enhanced という拡張機能が非常に便利です。デフォルトのプレビューよりも拡張性が高く、見た目も好きにいじることができます。さらにブラウザプレビューを開いて印刷を選べばPDF化するという使い方もできるので、書いたノートを人に見せたいときとかにも便利です。

alt text
ここからChromeとか開けるので、ブラウザプレビューで印刷してPDF化できる

で、私は職業柄数式を大量にいじるノートを書くことが多いので、そういうときにはLaTeXを使ってめちゃめちゃにマクロを設定しまくっています。ただLaTeXは往々にしてコンパイルが遅いという問題があります。コンパイル設定をうまく設定すれば爆速にできるのですが、そうするとコンパイラの制限から見た目をうまく変更できなくなるし、パッケージを盛り盛りにしていくと結局遅くなる。できれば、Markdown上でKaTeXとかMathJaxなどのWeb向けのレンダラを使って、リアルタイムプレビューをしながら書きたいわけです。

そこで、この記事では、Markdown Preview Enhancedの設定をカスタマイズして、LaTeXの physics パッケージのような書き心地（\ab や \pdv っぽい記法）を実現する方法を紹介します。

1. 拡張機能のインストール

まずはVSCodeの拡張機能マーケットプレイスから Markdown Preview Enhanced をインストールします。

2. 設定ファイルの場所

Markdown Preview Enhancedのグローバル設定は、ユーザーディレクトリ配下の .crossnote フォルダにある config.js (または config.json) で行います。

VSCode上でコマンドパレット (Cmd+Shift+P) を開き、Markdown Preview Enhanced: Open Global Config を実行すると、設定ファイル (config.js) が開きます。

この設定ファイルは、多くの場合は以下のパスに作成されます。ただここじゃないところに生成されるかもしれないので、コマンドパレットから開いたほうが楽です。

  • Mac: ~/crossnote/config.js or ~/.local/state/crossnote
  • Windows: C:\Users\<User>\.crossnote\config.js

3. KaTeXマクロの設定

config.js を開き、katexConfig 内の macros に独自マクロを定義します。

以下は、微分記号 (\dv, \pdv) やブラケット (\pab = \left( \right) のような自動サイズ調整括弧) を使えるようにする設定例です。https://zenn.dev/artakase/articles/3d32a132fed178 を参考にしています。

module.exports = {
  katexConfig: {
    macros: {
      // 演算子
      "\\extr": "{\\operatorname*{ extr }}",
      "\\cal": "{\\mathcal{ #1 }}",
      "\\E": "{\\mathbb{E}}",
      "\\bold": "{\\boldsymbol{ #1 }}",

      // 括弧の自動サイズ調整 (Physicsパッケージライクな挙動)
      "\\ab@common": "\\mathopen{}\\mathclose{\\left#1 #2 \\right#3}",
      "\\pab": "\\ab@common\\lparen{#1}\\rparen", // ( )
      "\\bab": "\\ab@common\\lbrack{#1}\\rbrack", // [ ]
      "\\Bab": "\\ab@common\\lbrace{#1}\\rbrace", // { }
      "\\aab": "\\ab@common\\langle{#1}\\rangle", // < >
      "\\vab": "\\ab@common\\lvert{#1}\\rvert",   // | |
      "\\Vab": "\\ab@common\\lVert{#1}\\rVert",   // || ||
      "\\eval": "\\ab@common.{#1}\\rvert",         // | (evaluation)

      // 添字・プレスクリプト
      "\\prescript": "\\hphantom{\\vphantom{#3}^{#1}_{#2}} \\mathllap{\\vphantom{#3}^{#1}_{\\vphantom{#1}}} \\mathllap{\\vphantom{#3}^{\\vphantom{#1}}_{#2}} {#3}",
      "\\leftidx": "\\vphantom{#2}#1 {#2}",

      // 微分 (Derivative)
      "\\dv": "\\@ifnextchar{[}{\\dv@option{#1}}{\\dv@nooption{#1}}",
      "\\dv@option": "{\\@firstoftwo{}{#2#4} \\frac{{#1}^{#3} {#5}}{{#1} {#6}^{#3}}}",
      "\\dv@nooption": "{\\frac{#1 #2}{#1 #3}}",
      "\\pdv": "\\dv{\\partial}",
      "\\odv": "\\dv{\\mathrm{d}}",
      "\\idv": "\\dv{d}",
      "\\mdv": "\\dv{\\mathrm{D}}",
      "\\fdv": "\\dv{\\delta}",
      "\\adv": "\\dv{\\Delta}",
      "\\jdv": "{\\frac{\\partial \\pab{#1}}{\\partial \\pab{#2}}}", // Jacobian derivative

      // その他
      "\\dd": "{\\mathrm{d}}",
      "\\micro": "{\\char\"3bc}"
    },
  },

  // MathJaxを使う場合の設定（今回はKaTeXメインなので空でもOK）
  mathjaxConfig: {
    tex: {},
    options: {},
    loader: {}
  },

  // Mermaidの設定
  mermaidConfig: {
    startOnLoad: false
  },
}

Note: config.js を変更した後は、プレビューをリロードするか、VSCodeを再起動すると反映されます。

4. 使い方と表示例

設定が完了すると、以下のように簡潔に数式を書けるようになります。

微分

$$
\pdv{f}{x}, \quad \pdv[2]{f}{x}
$$

括弧 (自動サイズ調整)

\left( ... \right) と書かなくても、\pab{...} で中身に合わせて括弧のサイズが自動調整されます。

$$
\pab{ \frac{1}{2} }
$$

期待値など

$$
\E \bab{ X }
$$

まとめ

katexConfig を活用することで、VSCode上でも快適な数式入力環境が整います。特に physics パッケージに慣れている人にとっては、これらのマクロを定義しておくと執筆効率が格段に上がります。

ぜひ試してみてください。

Discussion