VS Code でMarkdownを書くとき、編集画面とプレビューを行き来するのが面倒だと感じたことはないか。日本人開発者 Jun Ishii 氏が作ったVS Code拡張機能「Markdown Live Editor」は、そのループを断ち切る。2026年3月末にv0.5.1が公開され、4月時点でインストール数は3,000件を超えた。
議事録をその場で整形しながら取る、技術ブログの見た目を確認しながら書く、といった使い方でそのメリットが出やすい。VS Codeを使い慣れた人が環境を変えずにWYSIWYG編集を手に入れられる点が、Typoraや Obsidian のような専用エディタとの一番の違いだ。
プレビューのまま直接編集する
Markdown Live Editorは、Milkdown（ProseMirrorベースのWYSIWYGエディタフレームワーク）をVS Codeのwebviewに組み込んだ拡張機能だ。
Milkdownはプラグイン駆動型の設計で、GFMや数式・図表といった拡張をモジュール単位で追加できる。それをVS Codeのエディターに載せることで「プレビューされた状態のまま打ち込める」体験を実現している。ソースとビジュアルエディターは双方向に同期されており、どちらで編集しても即座に反映される。
対応している記法
GitHub Flavored Markdown（GFM）をベースに、以下に対応している。
- テーブル、タスクリスト、取り消し線、脚注
- Mermaidによる図表（フローチャート・シーケンス図など）
- KaTeXによる数式
- シンタックスハイライト
- GitHubアラート（
> [!NOTE]記法）
スラッシュコマンド（/）で見出しやテーブルなどのブロックを素早く挿入できる。テキストを選択するとツールバーが出て、太字・斜体などの装飾をワンクリックで適用できる。
かゆいところに手が届く機能
アウトラインパネルと見出しの折りたたみが実装されているため、ドキュメントが長くなってもナビゲーションが楽だ。
エディター内検索は独自実装になっている。VS Code標準の検索はWebView内では動かない制約があるため、作者が別途実装したものだ。行数・単語数のカウント表示もある。
インストール
VS Code の拡張機能パネルで Markdown Live Editor と検索するか、拡張機能IDを直接指定する。
jishii1204.markdown-live-editor
無償・MITライセンス。インストール後、.mdファイルを開いてコマンドパレット（Ctrl+Shift+P）から Markdown Live Editor: Open を実行するか、右クリックメニューから起動する。
なぜ作られたか
作者のZenn記事によると、AI駆動開発でMarkdownファイルを触る頻度が上がる中、既存ツールでは「プレビューのまま直接編集する」要件を満たすものがなく自作に至ったとのこと。
WYSIWYGエディターで起きがちなUndo/Redoの反映ループ問題には、更新元を識別するガード機構で対処している。「ファイルを壊さない」ことと「ソースとの透明な同期」を設計の軸に置いているため、既存のMarkdownファイルにそのまま使いやすい。
ドキュメント執筆にVS Codeを使いたいが、素のMarkdown編集体験に不満がある人には試す価値がある。
続けて読む
- DESIGN.md：AIにデザインを一度だけ伝えれば、あとは毎回読んでくれる。Markdown を書く手が速くなったあとに効いてくるのが、AI にどんな見た目で出させるかの固定だ。
- MicrosoftのMarkItDown、PDFも音声もExcelも全部Markdownにしてくれる。書く環境を整えたら、次は既存の PDF や Office 文書を Markdown 側へ寄せると流れがつながる。
- Claude Codeの
/feature-devは、いきなり実装しないための公式プラグインだった。文章まわりでも実装でも、最初に考える手順を固定すると AI のブレが減る。
参考
- Markdown Live Editor — VS Code Marketplace
- VS CodeでMarkdownプレビューのまま編集したくて拡張機能を作った（Zenn）
- Markdown Live Editor レビュー（窓の杜）
- GitHub — ishiij-dev/vscode-markdown-live-editor
この記事は Claude Sonnet 4.6 が執筆しました。