hide10#AI #VSCode #Markdown
https://hide10.com/post/vscode-markdown-live-editor-2026/
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件を超えた。\n議事録をその場で整形しながら取る、技術ブログの見た目を確認しながら書く、といった使い方でそのメリットが出やすい。VS Codeを使い慣れた人が環境を変えずにWYSIWYG編集を手に入れられる点が、Typoraや Obsidian のような専用エディタとの一番の違いだ。\nプレビューのまま直接編集する Markdown Live Editorは、Milkdown（ProseMirrorベースのWYSIWYGエディタフレームワーク）をVS Codeのwebviewに組み込んだ拡張機能だ。\nMilkdownはプラグイン駆動型の設計で、GFMや数式・図表といった拡張をモジュール単位で追加できる。それをVS Codeのエディターに載せることで「プレビューされた状態のまま打ち込める」体験を実現している。ソースとビジュアルエディターは双方向に同期されており、どちらで編集しても即座に反映される。\n対応している記法 GitHub Flavored Markdown（GFM）をベースに、以下に対応している。\nテーブル、タスクリスト、取り消し線、脚注 Mermaidによる図表（フローチャート・シーケンス図など） KaTeXによる数式 シンタックスハイライト GitHubアラート（> [!NOTE] 記法） スラッシュコマンド（/）で見出しやテーブルなどのブロックを素早く挿入できる。テキストを選択するとツールバーが出て、太字・斜体などの装飾をワンクリックで適用できる。\nかゆいところに手が届く機能 アウトラインパネルと見出しの折りたたみが実装されているため、ドキュメントが長くなってもナビゲーションが楽だ。\nエディター内検索は独自実装になっている。VS Code標準の検索はWebView内では動かない制約があるため、作者が別途実装したものだ。行数・単語数のカウント表示もある。\nインストール VS Code の拡張機能パネルで Markdown Live Editor と検索するか、拡張機能IDを直接指定する。\njishii1204.markdown-live-editor 無償・MITライセンス。インストール後、.mdファイルを開いてコマンドパレット（Ctrl+Shift+P）から Markdown Live Editor: Open を実行するか、右クリックメニューから起動する。\nなぜ作られたか 作者のZenn記事によると、AI駆動開発でMarkdownファイルを触る頻度が上がる中、既存ツールでは「プレビューのまま直接編集する」要件を満たすものがなく自作に至ったとのこと。\nWYSIWYGエディターで起きがちなUndo/Redoの反映ループ問題には、更新元を識別するガード機構で対処している。「ファイルを壊さない」ことと「ソースとの透明な同期」を設計の軸に置いているため、既存のMarkdownファイルにそのまま使いやすい。\nドキュメント執筆にVS Codeを使いたいが、素のMarkdown編集体験に不満がある人には試す価値がある。\n参考 Markdown Live Editor — VS Code Marketplace VS CodeでMarkdownプレビューのまま編集したくて拡張機能を作った（Zenn） Markdown Live Editor レビュー（窓の杜） GitHub — ishiij-dev/vscode-markdown-live-editor この記事は Claude Sonnet 4.6 が執筆しました。\n
Thomas Frans 🇺🇦
Arda Kılıçdağı
Frontend Dogma
Techino
Zenn Trends
Erik C. Thauvin
Nemeski