【お知らせ】プログラミング記事の投稿はQiitaに移行しました。

Visual Studio CodeとMarkdown+Mathの紹介

数式混じりの文章を書くのには Visual Studio Code に Markown+Math という拡張機能を入れると便利です。それについて紹介します。

【注意】Markdown の中に TeX で数式を書く環境です。LaTeX の入力支援環境ではありません。

目次

特徴

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

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

mdmath editing

バージョン

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

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

インストール

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

code.visualstudio.com

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

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

f:id:n7shi:20180730193732p:plain

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

f:id:n7shi:20180730211125p:plain

配色テーマ

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

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

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

f:id:n7shi:20180730221714p:plain

使い方

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

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

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

f:id:n7shi:20180730202002p:plain

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

  • 行内の数式は $$ で囲みます。(inline モード)
  • 独立した数式は $$$$ で囲みます。(display モード)

f:id:n7shi:20180730203539p:plain

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

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 を修正してプルリクエストを作成しました。

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

設定方法

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

  1. メニューから「ファイル → 基本設定 → 設定」を選択します。
  2. 「次のプレビューを試す: 新しい設定エディター」の下線部をクリックします。
    f:id:n7shi:20180730212553p:plain
    【注意】執筆時点での Visual Studio Code 1.25.1 での説明です。将来のバージョンではプレビューではなくなると思われます。
  3. 拡張機能の項目から mdmath をクリックして、設定項目の dollarsbrackets または gitlab に書き換えます。
    f:id:n7shi:20180730212944p:plain
    【注意】入力できるのは dollars, brackets, gitlab の3種類だけです。
  4. Visual Studio Code をいったん終了して、再度起動すると設定が有効になります。
    【注意】再起動するのは Visual Studio Code だけです。パソコン自体を再起動する必要はありません。

HTMLとして保存

右側のプレビューに表示されている内容は、クリップボードを経由してHTMLファイルに書き出すことができます。

拡張機能のコマンドでクリップボードにコピーします。

  1. メニューから「表示 → コマンドパレット」を選択します。
  2. テキスト欄の > に続いて math と入力します。
  3. Markdown: Clip Markdown+Math to HTML」をクリックします。

f:id:n7shi:20180730204819p:plain

これでクリップボードにコピーされます。新規にHTMLファイルを作成して貼り付けます。

  1. メニューから「ファイル → 新規ファイル」を選択します。
  2. [Ctrl]+[V] またはメニューから「編集 → 貼り付け」で貼り付けます。
  3. 「ファイル→名前を付けて保存」でファイルの種類を HTML にして適当な場所に保存します。

はてなブログ

はてなブログとはデリミタが異なるため、記事の下書きに使うと手直しが必要になります。現状、私は手動で修正してからブログに上げています。

はてなブログでの数式については以下の記事を参照してください。

Visual Studio Code拡張機能では Ionide-fsharp もお勧めです。