「VS Code」でMarkdownの編集とプレビューの行き来を減らす「Markdown Live Editor」

Markdownドキュメントがリッチになればなるほど、プレビューとの行き来が増えて生産性が落ちてしまう

　Markdownはそのままでも読めることが重視されており、わざわざHTMLでプレビューしなくても内容がわかる。しかし、画像がふんだんに用いられたリッチな文書を書くときは、やはりプレビュー画面と行き来しなければならないことが多くなる。これが「GitHub」に掲載するMarkdownドキュメントともなるとなおさらだ。

　「GitHub」ではテーブルデータ、構文色分け（シンタックスハイライト）されたプログラムコード、「Mermaid」のダイアグラム、「KaTeX」の数式表現なども埋め込めるが、できればHTMLレンダリングされた様子をプレビューしたままで編集、つまりWYSIWYG編集がしたくなる。

　今回紹介する「Markdown Live Editor」は、そうしたニーズに応えてくれる「Visual Studio Code」拡張機能だ。「GitHub」でホストされているオープンソースプロジェクトで、ライセンスは「MIT」。「Visual Studio Marketplace」などから無償でダウンロードできる。

「Markdown Live Editor」拡張機能

エディターとプレビューを融合させたWYSIWYGスタイルの編集を実現

　本拡張機能を利用するには、「コマンド パレット」やMarkdownファイルの右クリックメニューから［Open with Markdown Live Editor］コマンドを選択する。本拡張機能が対応する表現は、おもに以下の通りだ。

• 「Milkdown」ライブラリでレンダリングした状態で編集できる
• ソースファイルとビジュアルエディターの内容が双方向同期される
• 「GitHub Flavored Markdown」（GFM）に対応。表（テーブル）、タスクリスト、取り消し線、脚注といった、「GitHub」でお馴染みの表現が使える
• 「GitHub」スタイルのアラートに対応
• 絵文字ショートコードをサポート（「:smile:」ならば「😄」、「:rocket:」ならば「🚀」など）
• 「Mermaid」記法のダイアグラムに対応。さまざまな図をライブプレビューできる
• 「KaTeX」数式のサポート。インライン、ブロックともに対応する
• シンタックスハイライト：「highlight.js」ベースでプログラム言語の自動認識も可能

　「Visual Studio Code」ビルトインのプレビューペインよりも充実しており、リッチなドキュメントであってもプレビューペインと行き来することなく執筆できるだろう。

「Visual Studio Code」ビルトインのプレビューペインよりも充実した表現が可能。双方向編集が可能なので、標準のプレビューの代わりに利用してもよいかもしれない

　また、若干の編集補助機能も備えている。

• スラッシュコマンド：「/」を入力すると、見出し、リスト、表、コードブロック、数式、「Mermaid」図などをすばやく挿入できる
  
  

  スラッシュコマンド
• 選択ツールバー：テキストを選択すると、太字、斜体、取り消し線、コード、リンクといったテキスト修飾ボタンを表示
  
  

  選択ツールバー
• リンクのツールチップ：リンクにカーソルを合わせると、URLをプレビュー。編集や削除も可能
  
  

  リンクのツールチップ
• アウトラインパネル：［エクスプローラー］ビューに見出しの階層を表示。クリックでナビゲーションできる
  
  

  アウトラインパネル
• 見出しの折りたたみ：見出しごとにセクションを折りたたんだり展開したりできる
• エディター内検索：一致箇所をハイライト表示して、キーボード操作で移動
• 行数と単語数のカウント：ステータスバーに表示
  
  

  行数と単語数のカウント

　そのほかにも、相対パスで参照されたローカル画像を表示したり、レンダリング時に独自のスタイルを適用するカスタムCSSなどに対応する。