--- > [!NOTE] 目次 ```table-of-contents title: minLevel: 0 maxLevel: 0 includeLinks: true ``` --- > [!NOTE] リスト掲載用文字列 - [「VS Code」でMarkdownの編集とプレビューの行き来を減らす「Markdown Live Editor」／エディターとプレビューを融合させたWYSIWYGスタイルの編集を実現【レビュー】](https://forest.watch.impress.co.jp/docs/review/2098651.html)【窓の杜】(2026年04月02日) --- > [!NOTE] この記事の要約（箇条書き） - 「VS Code」向け拡張機能「Markdown Live Editor」のレビュー記事である。 - 本拡張機能は、Markdownドキュメントの編集とプレビュー間の行き来を減らし、WYSIWYGスタイルでの編集を可能にする。 - 「GitHub Flavored Markdown（GFM）」、Mermaidダイアグラム、KaTeX数式、シンタックスハイライトに対応している。 - スラッシュコマンド、選択ツールバー、リンクツールチップ、アウトラインパネル、行数・単語数カウントなど、豊富な編集補助機能を提供する。 > [!NOTE] 要約おわり --- レビュー ## 「VS Code」でMarkdownの編集とプレビューの行き来を減らす「Markdown Live Editor」 エディターとプレビューを融合させたWYSIWYGスタイルの編集を実現 [](https://forest.watch.impress.co.jp/img/wf/docs/2098/651/html/image2.png.html) - [窓の杜から ダウンロード](https://forest.watch.impress.co.jp/library/software/vscode/) 　Markdownはそのままでも読めることが重視されており、わざわざHTMLでプレビューしなくても内容がわかる。しかし、画像がふんだんに用いられたリッチな文書を書くときは、やはりプレビュー画面と行き来しなければならないことが多くなる。これが「GitHub」に掲載するMarkdownドキュメントともなるとなおさらだ。 　「GitHub」ではテーブルデータ、構文色分け（シンタックスハイライト）されたプログラムコード、「Mermaid」のダイアグラム、「KaTeX」の数式表現なども埋め込めるが、できればHTMLレンダリングされた様子をプレビューしたままで編集、つまりWYSIWYG編集がしたくなる。 　今回紹介する「Markdown Live Editor」は、そうしたニーズに応えてくれる「Visual Studio Code」拡張機能だ。「GitHub」でホストされているオープンソースプロジェクトで、ライセンスは「MIT」。 [「Visual Studio Marketplace」](https://marketplace.visualstudio.com/items?itemName=jishii1204.markdown-live-editor) などから無償でダウンロードできる。 [](https://forest.watch.impress.co.jp/img/wf/docs/2098/651/html/image1.png.html) [](https://forest.watch.impress.co.jp/img/wf/docs/2098/651/html/image3.png.html) 　本拡張機能を利用するには、「コマンド パレット」やMarkdownファイルの右クリックメニューから［Open with Markdown Live Editor］コマンドを選択する。本拡張機能が対応する表現は、おもに以下の通りだ。 - 「Milkdown」ライブラリでレンダリングした状態で編集できる - ソースファイルとビジュアルエディターの内容が **双方向同期** される - **「GitHub Flavored Markdown」（GFM）に対応** 。表（テーブル）、タスクリスト、取り消し線、脚注といった、「GitHub」でお馴染みの表現が使える - 「GitHub」スタイルのアラートに対応 - 絵文字ショートコードをサポート（「:smile:」ならば「😄」、「:rocket:」ならば「🚀」など） - **「Mermaid」記法のダイアグラムに対応** 。さまざまな図をライブプレビューできる - **「KaTeX」数式のサポート** 。インライン、ブロックともに対応する - シンタックスハイライト：「highlight.js」ベースでプログラム言語の自動認識も可能 　「Visual Studio Code」ビルトインのプレビューペインよりも充実しており、リッチなドキュメントであってもプレビューペインと行き来することなく執筆できるだろう。 [](https://forest.watch.impress.co.jp/img/wf/docs/2098/651/html/image4.png.html) 　また、若干の編集補助機能も備えている。 - **スラッシュコマンド** ：「/」を入力すると、見出し、リスト、表、コードブロック、数式、「Mermaid」図などをすばやく挿入できる [](https://forest.watch.impress.co.jp/img/wf/docs/2098/651/html/image5.png.html) - **選択ツールバー** ：テキストを選択すると、太字、斜体、取り消し線、コード、リンクといったテキスト修飾ボタンを表示 [](https://forest.watch.impress.co.jp/img/wf/docs/2098/651/html/image6.png.html) - **リンクのツールチップ** ：リンクにカーソルを合わせると、URLをプレビュー。編集や削除も可能 [](https://forest.watch.impress.co.jp/img/wf/docs/2098/651/html/image7.png.html) - **アウトラインパネル** ：［エクスプローラー］ビューに見出しの階層を表示。クリックでナビゲーションできる [](https://forest.watch.impress.co.jp/img/wf/docs/2098/651/html/image8.png.html) - **見出しの折りたたみ** ：見出しごとにセクションを折りたたんだり展開したりできる - **エディター内検索** ：一致箇所をハイライト表示して、キーボード操作で移動 - **行数と単語数のカウント** ：ステータスバーに表示 [](https://forest.watch.impress.co.jp/img/wf/docs/2098/651/html/image9.png.html) 　そのほかにも、相対パスで参照されたローカル画像を表示したり、レンダリング時に独自のスタイルを適用するカスタムCSSなどに対応する。 ### ソフトウェア情報 「Markdown Live Editor」 【著作権者】 Jun Ishii　氏 【対応OS】 （編集部にてWindows 11で動作確認） 【ソフト種別】 フリーソフト 【バージョン】 0.5.1（26/3/30）