特徴

数式を TeX で入力しながら、その結果をリアルタイムで見ることができます。

本家リポジトリより使用イメージを引用します。

mdmath editing

バージョン

執筆時点のバージョンは以下の通りです。

Visual Studio Code 1.25.1
Markdown+Math 2.2.1

記事中で言及している仕様などは変更される可能性があります。

インストール

Visual Studio Code を公式サイトよりダウンロードしてインストールします。

code.visualstudio.com

Visual Studio Code を起動して、拡張機能をインストールします。

画面左の拡張機能のアイコンをクリックします。
テキストボックスに math と入力します。
Markdown+Math の [インストール] をクリックします。似た名前の拡張機能がありますが、プラス記号「+」が付いている方を選びます。

f:id:n7shi:20180730193732p:plain

インストールが完了したら [再読み込み] をクリックします。Visual Studio Code の画面の中身が消えますが、しばらくして元の画面に戻れば完了です。

f:id:n7shi:20180730211125p:plain

配色テーマ

デフォルトでは黒を基調とした配色となっています。

個人的に数式は背景が白い方が見やすい気がします。変更方法は以下の通りです。

メニューから「ファイル → 基本設定 → 配色テーマ」を選択します。
「Light+ (default light)」をクリックします。

f:id:n7shi:20180730221714p:plain

使い方

Markdownファイルを新規作成します。

メニューから「ファイル → 新規ファイル」を選択します。
「ファイル → 名前を付けて保存」でファイルの種類を Markdown にして適当な場所に保存します。

画面右上の「プレビューを横に表示」アイコンをクリックします。

f:id:n7shi:20180730202002p:plain

Markdown に加えて数式の機能が使えます。数式は TeX で記述します。

行内の数式は $ ～ $ で囲みます。（inline モード）
独立した数式は $$ ～ $$ で囲みます。（display モード）

f:id:n7shi:20180730203539p:plain

TeX が初めての場合、Wikipedia から適当な式を探してコピーすることをお勧めします。

WikipediaからTeX情報を取得

Markdown の書き方については以下を参照してください。

KaTeX

数式表示には KaTeX を使っています。

ブログなどで広く使われている MathJax とはサポートされている機能が若干異なります。代表的な違いを挙げます。

\begin{align} ～ \end{align} は使えません。サポートされているのは \begin{aligned} ～ \end{aligned} です。
日本語の文字（漢字や仮名）は \text{ ～ \} で囲む必要があります。

エラー表示は MathJax より親切な気がします。

デリミタの変更

Markdown+Math の説明にはデリミタ（数式に切り替える記号）の変更について記載されています。dollars, brackets, gitlab の3種類から選びます。任意のデリミタを指定することはできませんが、将来のバージョンではサポートする予定があるようです。

Due to markdown-it-texmath's support of different formula delimiters, these are also available and user configurable with mdmath:

dollars (default)

inline $...$

display $$...$$

brackets

inline $...$

display \[...\]

gitlab

inline $`...`$

display ```math ... ```

inline は行内の数式、display は独立した数式です。

【注意】執筆時点での Markdown+Math 2.2.1 では brackets は事実上使い物になりません。\[ ～ \] の内部で改行すると数式として認識されなくなり、長い数式も一行に収めないといけないためです。

【追記:2018.08.01】brackets を修正してプルリクエストを作成しました。

multiline support for brackets #8

【追記:2018.08.15】プルリクエストがマージされました。次のリリースでは問題が解決すると思われます。

設定方法

設定方法について説明します。ただし前述のように brackets は使い勝手に問題があるため、gitlab 方式を必要とするのでなければ、特に設定をせずにデフォルトのままで使うことをお勧めします。

メニューから「ファイル → 基本設定 → 設定」を選択します。
「次のプレビューを試す: 新しい設定エディター」の下線部をクリックします。

【注意】執筆時点での Visual Studio Code 1.25.1 での説明です。将来のバージョンではプレビューではなくなると思われます。
拡張機能の項目から mdmath をクリックして、設定項目の dollars を brackets または gitlab に書き換えます。

【注意】入力できるのは dollars, brackets, gitlab の3種類だけです。
Visual Studio Code をいったん終了して、再度起動すると設定が有効になります。
【注意】再起動するのは Visual Studio Code だけです。パソコン自体を再起動する必要はありません。