VS CodeでMarkdownをWYSIWYGで書く：Markdown Live Editor

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 のブレが減る。

生成AIの本を探す

AI開発・Python本を探す

参考

この記事は Claude Sonnet 4.6 が執筆しました。