--- title: "Markdown Live Editorの使い方と注意点｜VS Code組み込みエディタとの違い【2026年10月】" url: "https://www.issoh.co.jp/tech/details/11645/" published: 2026-04-03 updated: 2026-10-13 categories: ["開発"] publisher: "株式会社一創" --- # Markdown Live Editorの使い方と注意点｜VS Code組み込みエディタとの違い【2026年10月】 「Markdown Live Editor」は、Visual Studio Marketplaceで配布されているVS Code拡張機能の名前です。Markdownを整形後の見た目のまま編集できる道具で、窓の杜も2026年4月2日にレビューで取り上げています。書きながら表示を確かめられるエディタ全般を指す言葉としても使われます。ただし2026年7月29日公開のVS Code 1.131で、本体に「Markdown Editor」という同じ方向の機能が実験的に入り、選び方の前提が変わっています。この記事では拡張の最新版0.6.4を実際に取得して中身を調べた結果をもとに、入れ方と開き方、編集時にファイルがどう書き換わるか、組み込みエディタとの違いを整理します。ブラウザで使うライブプレビュー型ツールと、Markdown Preview Enhancedの安全な版も扱います。 ## まとめ：Markdown Live Editorを使う前の結論 見た目のまま書けることを優先するなら同名拡張は有力です。ただし、Gitで差分を見る文書や書式を揃えた文書では、編集のたびに文書全体が書き出し直される仕様を理解してから使ってください。VS Code 1.131以降なら、拡張を入れずに組み込みのMarkdown Editorを試す選択肢もあります。 | やりたいこと | 選ぶもの | 根拠 | | ------------- | ----------------------------- | ---------------- | | 記法を隠して書く | 拡張 Markdown Live Editor 0.6.4 | Milkdown製・MIT・無料 | | 拡張を増やさず見たまま編集 | VS Code組み込みMarkdown Editor | 1.131で実験的に追加 | | 記法を見ながら確認 | 標準プレビュー | Ctrl+K Vで横並び | | ブラウザで手早く確認 | Markdown Live Preview | 登録不要・最後の1文書を保存 | | チームで同時編集 | HackMD／HedgeDoc | HackMD無料枠は招待3名 | Markdown Preview Enhancedを入れている場合は、版が0.8.39以上かを先に確認してください。2026年6月と9月に公開された脆弱性の修正が、この版までに分かれて入っています。 ## VS Code拡張「Markdown Live Editor」の入れ方と開き方 拡張IDは`jishii1204.markdown-live-editor`、作者はJun Ishii氏です。初回公開は2026年2月21日、最新版の0.6.4は2026年7月2日に公開され、10月13日時点のインストール数は15,849件です（[Visual Studio Marketplaceの拡張ページ](https://marketplace.visualstudio.com/items?itemName=jishii1204.markdown-live-editor)）。ソースは[GitHubのishiij-dev/vscode-markdown-live-editor](https://github.com/ishiij-dev/vscode-markdown-live-editor)で公開されています。 ### インストールとエディタを開く3つの方法 VS Codeで`Ctrl+P`を押し、次の1行を貼り付けてEnterで入ります。 ``` ext install jishii1204.markdown-live-editor ``` 開き方は、`.md`を編集中に`Ctrl+Shift+Alt+M`（macOSは`⌘⇧⌥M`）を押すか、エクスプローラーでファイルを右クリックして「Open with Markdown Live Editor」を選びます。エディタタブの右クリックにも同じ項目があります。 ダブルクリックで開いても通常のテキストエディタになるのは不具合ではありません。0.6.4の`package.json`では、このエディタの優先度が`"priority": "option"`になっており、既定では選んだときだけ使われる設計です。いつもこのエディタで開きたい場合は、settings.jsonの既存の波括弧の中に次の設定を統合します。`workbench.editorAssociations`が既にある場合は、その中に1行を追加します。 ``` { "workbench.editorAssociations": { "*.md": "markdownLiveEditor.editor" } } ``` この指定はすべての.mdに効くため、READMEやCHANGELOGまで見たまま編集で開くようになります。特定のリポジトリだけで使うなら、ワークスペースの`.vscode/settings.json`に書くほうが扱いやすくなります。 ### 0.6.4で使える機能と設定項目 表・タスクリスト・取り消し線・脚注のGFM記法、KaTeX数式、Mermaid図、GitHubのアラート記法（`[!NOTE]`など）、絵文字ショートコードを描画したまま編集できます。`/`を打つと見出しや表を挿入するメニューが出て、文字を選択すると太字・斜体・リンクのボタンが出ます。エクスプローラーには見出しの一覧（Markdown Outline）が追加され、クリックで該当箇所へ移動できます。 エディタはWebviewの中で動くため、検索は`Ctrl+F`で開く独自の検索パネルを使います。表示中の文書は「Markdown Live Editor: Export Styled HTML」でスタイル付きHTMLとして書き出せます。0.6.4のコマンドにPDFの書き出しはありません。 | 設定キー | 既定値 | 用途 | | ------------------------------------ | ----- | ----------- | | markdownLiveEditor.customCss | “” | 表示用のCSSを追加 | | markdownLiveEditor.visualLineNumbers | false | ブロックごとの行番号 | | markdownLiveEditor.syncDebugLogs | false | 同期の不具合調査用ログ | 設定項目は上の3つだけで、フォントサイズや本文の幅を変える設定はまだありません（Issueで要望として登録されています）。見た目の調整は`customCss`で行います。 ### CursorなどVS Code互換エディタで使う手順 CursorやVSCodiumが拡張の取得元にしているOpen VSX Registryには、2026年10月13日時点でこの拡張は登録されていません（APIで`jishii1204`の名前空間を引くと「Namespace not found」が返ります）。互換エディタで使う場合は、Marketplaceから0.6.4のVSIXを取得し、コマンドパレットの「Extensions: Install from VSIX…」で入れます。 ``` curl -L --compressed -o markdown-live-editor-0.6.4.vsix \ https://marketplace.visualstudio.com/_apis/public/gallery/publishers/jishii1204/vsextensions/markdown-live-editor/0.6.4/vspackage ``` `--compressed`は、圧縮された応答を自動で展開する指定です。2026年10月13日の取得では、付けないとgzipのまま保存され、VSIXとして開けないファイルになりました。対応エンジンは`^1.75.0`と古めに設定されており、互換エディタ側の版が古くても入る作りです。READMEはブラウザ版のVS Code for the Webにも対応すると書いています。 ## 同名拡張で編集したときにファイルが書き換わる範囲 見たまま編集する道具は、画面上の文書をMarkdownへ書き戻す処理を必ず持っています。この拡張で注意したいのは、その書き戻しの単位です。0.6.4の`dist/extension.js`は、Webviewから届いた本文で文書の先頭から末尾までを`WorkspaceEdit.replace`により置き換えています。1文字直しただけでも、ファイル全体がMilkdownの書き出し結果に入れ替わるということです。 ### Milkdownの書き出しで変わる書式の実測 拡張が依存するMilkdown 7.21.2（commonmarkとgfmのプリセット、書き出し設定は既定のまま）で、同じ見本を読み込んで書き出し、元のファイルと比べました。拡張内部の追加プラグインは含めていないため、結果は「Milkdownの既定の書き出し」に限った実測です。 ``` 見出しA ======= __太字__ と _斜体_ 行末2スペースの改行 次の行 | 左 | 中央 | 右 | |:---|:---:|---:| | a | b | c | [参照リンク][ref] [ref]: https://example.com インデントのコードブロック ~~~js const a = 1; ~~~ ``` これを読み込んで書き出すと、次のようになりました。 ```` # 見出しA __太字__ と _斜体_ 行末2スペースの改行\ 次の行 | 左 | 中央 | 右 | | :- | :-: | -: | | a | b | c | [参照リンク](https://example.com) ``` インデントのコードブロック ``` ```js const a = 1; ``` ```` 変わったのは6か所です。下線形式の見出しは`#`形式に、行末2スペースの改行はバックスラッシュ改行に、表は区切り行と余白が組み直され、参照リンクはインラインリンクになって定義行が消えました。インデントのコードブロックと`~~~`のコードブロックは、どちらもバッククォート3つの囲みに統一されています。一方で`__太字__`や`_斜体_`、HTMLコメントは元の書き方のまま残りました。 チーム内で記法の流儀をlinterやformatterで揃えているリポジトリでは、この拡張で1行直すとPull Requestに無関係な行の差分が混ざります。formatterの規則とMilkdownの書き出しが違えば、両者を通すたびに書式が行き来する差分が出続けます。導入を決める前に、代表的な文書1本をこの拡張で1文字だけ直して差分を確認し、formatterの結果と一致しなければ、その文書群では標準のテキスト編集を使ってください。参照リンクを多用する文書は、定義行が消える点を許容できるかで判断してください。 ### 0.6.4のエディタ内Undo・Redoの未実装 0.6.4のWebview側のコード（`media/view.js`）には、Milkdownが使うProseMirrorの履歴機能（history）と`Mod-z`のキー割り当てが入っていません。2026年8月18日には「`Cmd+Z`で元に戻そうとしたところ利用できなかった」として、Undo・Redoの追加を求める[Issue #225](https://github.com/ishiij-dev/vscode-markdown-live-editor/issues/225)が立ち、実装案も添えられていますが、10月13日時点で未解決です。大きく書き換える作業の前には、保存してGitにコミットしておくのが安全です。 開発の動きも見ておきます。最後のリリースは7月2日の0.6.4で、9月23日には依存ライブラリ（mermaid・dompurify・nanoid）の監査指摘に対応する更新が[Pull Request #231](https://github.com/ishiij-dev/vscode-markdown-live-editor/pull/231)としてmainブランチに入りましたが、Marketplaceの版にはまだ反映されていません。 ## VS Code組み込みのMarkdown Editorと標準プレビュー 拡張を入れる前に、VS Code本体でどこまでできるかを確認しておくと選択を誤りません。2026年10月時点の最新版1.141.0では、Markdown向けに2種類の画面が組み込まれています。 ### 1.131で追加された組み込みMarkdown Editorの開き方 [VS Code 1.131のリリースノート](https://code.visualstudio.com/updates/v1%5F131)は、整形後の表示のまま編集でき、エージェントが対応できるコメントを付けられる「hybrid Markdown editor」を実験的機能として紹介しています。.mdファイルを開いた状態でコマンドパレットから「View: Reopen Editor With…」を実行し、「Markdown Editor」を選ぶと切り替わります。常にこの画面で開く場合は、拡張と同じ`workbench.editorAssociations`に`"*.md": "vscode.markdown.editor"`を指定します。 その後も機能が足されています。[1.132](https://code.visualstudio.com/updates/v1%5F132)ではMarkdownの差分をこの画面で開けるようになり、追加・変更・削除がガターに表示されます。[1.137](https://code.visualstudio.com/updates/v1%5F137)では、GitHubのIssueやPull Requestへのリンクに現在のタイトルと状態が表示されるようになりました（設定`markdown.experimental.richLinks.enabled`）。 ### 同名拡張と組み込みMarkdown Editorの違い 1.141.0に同梱されている組み込みMarkdown拡張（markdown-language-features）の`package.json`とエディタのソースを、拡張0.6.4と並べました。 | 項目 | 拡張 0.6.4 | 組み込み（1.141.0） | | ------------- | ---------------------- | ------------------- | | 位置づけ | Marketplaceの0.x版 | 実験的機能 | | 開き方 | Ctrl+Shift+Alt+M・右クリック | Reopen Editor With | | ファイルへの反映 | 文書全体を置換 | 変更箇所の差分を送信 | | Undo・Redo | 未実装（#225） | Ctrl+Z／Ctrl+Shift+Z | | Mermaid・KaTeX | 対応 | 対応 | | 固有の機能 | スラッシュメニュー・HTML書き出し | エージェント向けコメント・差分表示 | 組み込み版は、編集前後の本文を比べて差分（`computeTextEdit`）だけをVS Codeへ送り、Undo・RedoもVS Code側の履歴に任せる作りです。見たまま編集の基本は組み込み版にしてください。拡張を選ぶのは、スラッシュメニューやスタイル付きHTMLの書き出しが要る場合と、組み込み版の無いVS Code 1.131未満や互換エディタで使う場合に限るのが安全です。 ### 標準プレビューのショートカットと同期スクロール 記法を見ながら結果を確認するだけなら、従来の標準プレビューで足ります。`Ctrl+K V`（macOSは`⌘K V`）で横並び、`Ctrl+Shift+V`（macOSは`⇧⌘V`）で切り替え表示です。[公式ドキュメント](https://code.visualstudio.com/docs/languages/markdown)のとおりKaTeXの数式に対応し、Mermaidの図も1.121から組み込み拡張「Mermaid Markdown Features」で描画されます。旧拡張`bierner.markdown-mermaid`を残していると描画が競合するため、図が出ないときはまずこれを外します。図の表示トラブルは[VSCodeでシーケンス図・フローチャート自動生成｜Mermaidが表示されない対処](/tech/details/2334/)で、VS CodeでのMermaidの書き方と画像出力は[VSCodeでMermaidを使う方法｜標準プレビュー・拡張機能の選び方・PNG/SVG出力【2026年9月】](/tech/details/6583/)で扱っています。 スクロールが追従しない場合は、2方向の設定がどちらも`true`か確認します。 ``` { "markdown.preview.scrollPreviewWithEditor": true, "markdown.preview.scrollEditorWithPreview": true } ``` 目次の自動生成や表の整形といった編集支援はVS Code標準にないため、Markdown All in Oneで補います。設定例は[Markdown All in Oneの使い方：目次・表整形の設定とVS Code標準との差分](/tech/details/18018/)にまとめました。PDFで配布する場合は、MarkdownからPDFやdocxを作る[Pandocの使い方｜Markdownからdocx・PDF変換の手順と日本語出力の詰まり方](/tech/details/17688/)が使えます。 ## Markdown拡張の脆弱性と安全な版の確認 プレビュー系の拡張は、受け取ったMarkdownを解釈して描画するため、細工したファイルを開いただけで処理が実行される経路を持ちえます。2026年はMarkdown Preview Enhanced（MPE）でこれが続けて見つかりました。 ### Markdown Preview Enhancedの修正版と更新の目安 MPEの修正は1回では終わっていません。6月5日の0.8.28で4件のCVEが修正され、6月16日にはGitHubのセキュリティアドバイザリが別に5件公開されました。5件のうち1件は0.8.28で修正済みで、残る4件は0.8.29と0.8.30で修正されています。9月27日には、WaveDrom図の修正をすり抜けるXSSが見つかっています。 | 修正版 | 公開日 | 主な内容 | | ------ | ---------- | ---------------------------- | | 0.8.28 | 2026-06-05 | WaveDrom・Bitfieldのコード実行など4件 | | 0.8.29 | 2026-06-06 | .crossnote/config.jsの実行を隔離 | | 0.8.30 | 2026-06-08 | Webviewからの命令実行・head.htmlのXSS | | 0.8.39 | 2026-09-27 | WaveDromラベル経由のXSS | 0.8.28の4件は[CVE-2026-50733](https://nvd.nist.gov/vuln/detail/CVE-2026-50733)・CVE-2026-49492・CVE-2026-49493（NVDに登録されたVulnCheckの評価で、いずれもCVSS 3.1の8.8）とCVE-2026-11422（同7.1）です。0.8.29と0.8.30の修正内容は、[MPEリポジトリのアドバイザリ一覧](https://github.com/shd101wyy/vscode-markdown-preview-enhanced/security/advisories)にある設定ファイル経由のコード実行、Webviewからの無検証な命令実行、任意ファイルへの書き込み、head.htmlのXSSと対応しています。9月の件は[crossnoteのアドバイザリGHSA-xgfr-fvr6-h5qv](https://github.com/shd101wyy/crossnote/security/advisories/GHSA-xgfr-fvr6-h5qv)で、6月のCVE-2026-11422の修正が不完全だったとされ、[MPE 0.8.39](https://github.com/shd101wyy/vscode-markdown-preview-enhanced/releases/tag/0.8.39)で修正されました。最新版は10月9日公開の0.8.40です。 Mermaidと数式だけが目的なら、MPEを外して標準プレビューに寄せるのが最も確実な対策です。WaveDromやPlantUML、コードチャンクの実行を使う場合だけMPEを残し、版を追い続けてください。 ### 導入済み拡張の版を一括で確認するコマンド ``` # macOS・Linux code --list-extensions --show-versions | grep -i markdown # Windows（PowerShell） code --list-extensions --show-versions | Select-String markdown ``` `shd101wyy.markdown-preview-enhanced@0.8.38`のように0.8.39より小さい版が出たら更新対象です。Markdown All in One（`yzhang.markdown-all-in-one`）は、2026年10月13日時点で公式リポジトリのSecurityページに公開されたアドバイザリが0件です。依存ライブラリまで含めて脆弱性が無いことを示すものではありません。ただし最終リリースは2025年3月9日の3.6.3で、1年半以上新しい版が出ていない点は把握しておきます。 ## ブラウザで使うMarkdown Live Previewと保存先の違い インストールできない端末や、受け取ったMarkdownを一度だけ確認したい場面ではブラウザ型を使います。選ぶ基準は、原稿がどこに保存されるかです。 ### Markdown Live PreviewとDillingerの保存先 [Markdown Live Preview](https://markdownlivepreview.com/)は登録不要で、左に書くと右に表示されます。[ソース](https://github.com/tanabe/markdown-live-preview)を読むと、最後に書いた1文書をブラウザのlocalStorageに保存し、次に開いたとき復元します。2026年9月13日には手元の.mdファイルを開く機能が加わりました。「Export PDF」はブラウザの印刷機能を呼ぶ仕組みなので、PDFとして保存する操作は印刷ダイアログで行います。 [Dillinger](https://dillinger.io/)も下書きをブラウザのlocalStorageに自動保存し、GitHub・Dropbox・Google Drive・OneDrive・Bitbucketと同期できます。書き出しはMarkdown・スタイル付きHTML・PDFの3形式です。Markdown Live Previewの原稿と、Dillingerで同期先に保存していない下書きは、そのブラウザのlocalStorageにしかありません。ブラウザのデータを消すと失われ、別の端末からは開けません。逆に共有PCでは次の利用者に原稿が見えるため、作業後に内容を消しておく運用が要ります。 ### StackEditとEditor.mdの更新状況 比較記事で定番のStackEditは、GitHubリポジトリの最終更新が2023年7月4日で、最新リリースは2019年7月のv5.14.0です。Editor.mdの最新リリースは2015年6月9日のv1.5.0です。動いている既存環境を急いで置き換える必要はありませんが、新しく原稿を預ける先としては選びません。 ## HackMDとHedgeDocの共同編集の制限と運用負担 複数人で同じ文書を同時に編集するなら、SaaSのHackMDか、自社サーバーで動かすHedgeDocです。 [HackMDの料金ページ](https://hackmd.io/pricing)によると、無料プランは招待3名、版履歴は直近10版、画像は1枚1MBまで、GitHubへのプッシュは月20回、APIは月400回、ゴミ箱の保持は3日です。有料のPrimeは年払いで1シートあたり月5ドルです。仕様書のレビューで版を遡る運用では、履歴10版の制限に早く当たります。 HedgeDocは[1.12.0が2026年8月21日](https://github.com/hedgedoc/hedgedoc/releases/tag/1.12.0)に公開されています。6月と7月には権限値の検証漏れやYAMLの展開によるサービス停止など5件の脆弱性が1.11.0〜1.11.1で修正されました。公式のセキュリティ方針はサポート対象を最新リリースだけとしているため、セルフホストする場合は1.12.0を使い、その後も最新版へ更新してください。バックアップと更新を継続して回せる担当がいない場合は、HackMDの有料プランのほうが運用の負担は軽くなります。社内の手順書や設計書をMarkdownで一元管理する仕組みを業務システムとして整えたい場合は、[文書管理システム開発](https://www.issoh.co.jp/service/business%5Fsystem/document-management/)の支援も行っています。 ## よくある質問 ### Markdown Live Editorは無料で使えますか？ 無料です。VS Code拡張のMarkdown Live EditorはMITライセンスで公開されており、VS Code本体の組み込みMarkdown Editorと標準プレビューも追加費用はかかりません。ブラウザ型のMarkdown Live PreviewとDillinger、HackMDの無料プランも費用なしで使えます。 ### Markdown Live EditorをCursorで使えますか？ 使えますが、手順が1つ増えます。Cursorが参照するOpen VSX Registryには2026年10月13日時点で登録がないため、MarketplaceからVSIXを取得し、「Extensions: Install from VSIX…」で入れます。 ### VS CodeでMarkdownのライブプレビューを出すショートカットは何ですか？ 編集画面と横並びで開くのは`Ctrl+K V`（macOSは`⌘K V`）、プレビューとの切り替えは`Ctrl+Shift+V`（macOSは`⇧⌘V`）です。見たまま編集したい場合は、Markdown Live Editorの`Ctrl+Shift+Alt+M`か、組み込みMarkdown Editorを使います。 ### Markdown Preview Enhancedは使っても安全ですか？ 0.8.39以上なら、この記事で挙げた2026年6月と9月公開の脆弱性はすべて修正済みです。0.8.28で6月5日公開の4件、0.8.29と0.8.30で6月16日公開のアドバイザリの残り4件、0.8.39で9月のWaveDrom経由のXSSが修正されました。0.8.28へ上げただけの端末は、さらに更新が必要です。 ### Markdown All in Oneに脆弱性はありますか？ 2026年10月13日時点で、公式リポジトリのSecurityページに公開されたアドバイザリはありません。ただし最終リリースは2025年3月9日の3.6.3です。目次の自動更新や表の整形を使わないなら、外して標準機能だけで運用する選択もあります。 ## 関連記事 - [Markdown All in Oneの使い方：目次・表整形の設定とVS Code標準との差分](/tech/details/18018/) - [VSCodeでMermaidを使う方法｜標準プレビュー・拡張機能の選び方・PNG/SVG出力【2026年9月】](/tech/details/6583/) - [Pandocの使い方｜Markdownからdocx・PDF変換の手順と日本語出力の詰まり方](/tech/details/17688/) - [MarkdownでWebサイトを作る3つの方法【2026年版】](/column/details/2566/) - [MarkItDown（マークイットダウン）とは｜各種ファイルをMarkdownに変換するMicrosoft製Pythonツール](/tech/details/4810/) --- 出典: [Markdown Live Editorの使い方と注意点｜VS Code組み込みエディタとの違い【2026年10月】]()（株式会社一創）