7
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Markdownのプレビューを見ながら編集できる──VS Code 1.131 新機能を試す

7
Posted at

VS Code 1.131 で、Markdown をレンダリングした見た目のまま編集できる Experimental 機能 Hybrid Markdown editor が追加されました。

公式リリースノートでは、Agents window 内で Markdown を表示・インプレース編集し、エージェントが対応できるコメントも残せるエディターとして紹介されています。

2026年8月時点で Experimental の機能です。画面や細部の挙動は今後変わる可能性があります。

VS Code公式の投稿でも、実際の操作感が紹介されています。

これまで困っていたこと

最近は、AIを使った仕様駆動や設計・実装の中で Markdown ファイルを見る機会がかなり増えました。

仕様書や設計メモを .md で出させたり、AIが生成した Markdown を確認・修正したりと、以前より明らかに Markdown を開いている時間が長くなっています。

これまでは Markdown を編集するとき、

  • Markdown のソース
  • Markdown Preview

を左右に並べて使っていました。

ただ、VS Code では Explorer や Copilot も開いているので、そこからさらに Preview 用にもう1ペイン取ると、本文を読むにも編集するにもかなり窮屈です。

さらに、画面の半分で Chrome を開きながら、もう半分で VS Code を使って作業することもよくあります。

その状態で VS Code 側をさらに Markdown 本文と Preview に分割すると、さすがに見づらく、操作もしにくくなります。

AIに書かせた内容の差分を見ながら Preview を確認するなど、Markdown Preview を使う場面が増えていたこともあり、この2ペイン運用は結構ストレスになっていました。

今回の Hybrid Markdown editor では、レンダリングされた Markdown を見ながら、その場所を直接編集できます。

個人的には「Markdown Editor という新機能が増えた」というより、Markdown を確認するためだけにもう1ペイン使わなくてよくなったのが一番大きいです。

Markdown Editor の開き方

Markdown ファイルを開いた状態で、エディター右上の ... から Reopen Editor With... を選び、Markdown Editor - Built-in を指定します。

公式には、この切り替えは Agents window と通常の editor window のどちらでも利用できると案内されています。

この方法は確実ですが、毎回メニューを操作するのは少し面倒です。

Ctrl + Shift + V では新しい Markdown Editor は開かない

最初に試したのが Ctrl + Shift + V でした。

Markdown の Preview を開くショートカットなので、そのまま新しい Markdown Editor が開くのでは?と思ったのですが、実際に開くのは従来の Markdown Preview です。

VS Code のデフォルトでは Ctrl + Shift + Vmarkdown.togglePreview が割り当てられています。

つまり、何も設定していない状態では、

Ctrl + Shift + V
    ↓
従来の Markdown Preview

です。

新しい Markdown Editor 用のデフォルトショートカットは、2026年8月時点では確認できませんでした。

ショートカットで Markdown Editor を開く

調べてみると、VS Code 本体の reopenActiveEditorWith に Editor ID を渡すことで、Markdown Editor を直接開くショートカットを作れます。

Keyboard Shortcuts JSON は、

Ctrl + K → Ctrl + S

で Keyboard Shortcuts を開き、右上の Open Keyboard Shortcuts (JSON) から開けます。

例えば、Ctrl + Shift + V を Markdown Editor 用に上書きするなら次のように設定します。

{
  "key": "ctrl+shift+v",
  "command": "reopenActiveEditorWith",
  "args": "vscode.markdown.editor",
  "when": "resourceLangId == markdown && activeCustomEditorId != 'vscode.markdown.editor'"
}

今回は覚えやすさを優先して、もともと Markdown Preview に割り当てられている Ctrl + Shift + V を上書きしています。

従来の Preview も頻繁に使う場合は、別のキーを割り当ててもよいと思います。

なお、従来の「Preview を横に開く」操作は Ctrl + KV で引き続き使えます。

同じキーで Text Editor と Markdown Editor を往復する

Markdown Editor は便利ですが、Markdown のソースをそのまま触りたい場面もあります。

そこで、同じ Ctrl + Shift + V で Text Editor と Markdown Editor を往復できるようにしました。

keybindings.json に次の2つを設定します。

{
  "key": "ctrl+shift+v",
  "command": "reopenActiveEditorWith",
  "args": "vscode.markdown.editor",
  "when": "resourceLangId == markdown && activeCustomEditorId != 'vscode.markdown.editor'"
},
{
  "key": "ctrl+shift+v",
  "command": "reopenActiveEditorWith",
  "args": "default",
  "when": "activeCustomEditorId == 'vscode.markdown.editor'"
}

when 条件によって、現在どのエディターで Markdown を開いているかに応じて実行するコマンドを切り替えています。

Text Editor
    ↓ Ctrl + Shift + V
Markdown Editor
    ↓ Ctrl + Shift + V
Text Editor

手元の環境では、この設定で往復できることを確認できました。

vscode-markdown-editor-shortcut-toggle.gif

今のところ私は、.md をすべて Markdown Editor で開くのではなく、必要なときだけ Ctrl + Shift + V で切り替える運用にしています。

デフォルトエディターとして設定することもできる

毎回 Markdown Editor を使いたい場合は、settings.json に次の設定を追加できます。

"workbench.editorAssociations": {
  "*.md": "vscode.markdown.editor"
}

これで .md を Markdown Editor で開くようにできます。

ただ、Markdown Editor はまだ Experimental ですし、ソースを直接編集したい場面もあります。

そのため私は今のところこの設定は入れず、先ほどのトグルショートカットで様子を見ることにしました。

気に入って常用するようになったら、デフォルトエディターに切り替えてもよさそうです。

Editing / Locked

Hybrid Markdown editor には EditingLocked の2つのモードがあります。

Editing では、レンダリングされた Markdown をその場で編集できます。

一方の Locked は読み取り専用の表示です。

この切り替えにもショートカットがあるのではと思って調べましたが、2026年8月時点では専用の公開コマンドやデフォルトショートカットは確認できませんでした。

一見使えそうなコマンドとして、

markdown.preview.toggleLock

があります。

そこで実際に keybindings.json に割り当てて試してみましたが、新しい Markdown Editor の Editing / Locked は切り替わりませんでした。

VS Code のソースを確認すると、このコマンドは従来の Markdown Preview 側の MarkdownPreviewManager.toggleLock() を呼び出すもので、新しい Markdown Editor の Locked とは別物でした。

ここは正直、Editing / Locked を切り替えるショートカットも欲しいところです。

Agent のレビューでは Locked、文章をそのまま直すときは Editing と行き来するので、Markdown Editor 自体の切り替えと同じようにキー操作で往復できるとかなり便利そうです。

Experimental の機能なので、このあたりは今後追加される可能性もありそうです。

Agent へのフィードバックにも使える

Hybrid Markdown editor の Locked mode は、Agents window で Agent に修正指示を返すときにも使えます。

通常の VS Code で Markdown を開いて範囲選択しても何も起きませんが、Agents window の Agent セッションに紐づいた Markdown を開き、Locked mode で範囲を選択すると Add Feedback が表示されます。

実際にこの記事の Markdown を Agent に編集させて試してみました。

Agents window で Agent セッションを開く
    ↓
Markdown ファイルを開く
    ↓
Locked mode に切り替える
    ↓
修正してほしい範囲を選択
    ↓
Add Feedback
    ↓
修正指示を入力して Submit Feedback
    ↓
Agent が修正

vscode-agent-feedback-demo-large.gif

これが結構便利でした。
たとえば文章を読んでいて、

  • この見出しはもう少し短くしたい
  • この説明は分かりにくい
  • この段落は削ってほしい

と思ったときに、チャット側で「○○という文章があるところを〜」と対象箇所まで説明し直す必要がありません。

レンダリングされた記事をそのまま読みながら、直してほしい箇所を選択して指示を付けられます。

感覚としては、Agent に対して Markdown 上でそのまま赤入れしているのに近いです。

また、Agent が変更したファイルを確認したい場合は Changes から開けば Diff も確認できます。ただし、Add Feedback を使うために必ず Changes 経由で開く必要があるわけではなく、Agents window のセッションに紐づいた Markdown であれば利用できました。

今回の記事自体もこの方法で修正してみましたが、文章のように「見た目を確認しながら細かく直したいもの」とは特に相性がよさそうです。

実際に使ってみて

文章を読みながら少し直す、という使い方はかなり相性がいいと感じました。

見出しや箇条書きの見え方を確認しながら、その場で文章を直せるので、Preview を閉じてソースに戻るという切り替えがありません。

一方で、Markdown の記法そのものをまとめて触りたいときは、やはり Text Editor の方が扱いやすいです。

たとえば、

  • Markdown 記法をまとめて修正したい
  • リンクやコードブロックを細かく編集したい
  • ソース全体を見ながら置換したい

といった場面では、Text Editor に戻したくなります。

そのため、今のところは Markdown Editor に完全移行するのではなく、

文章を書いたり読み返したりするときは Markdown Editor、ソースを直接触りたいときは Text Editor

という使い分けがちょうどよさそうです。

まとめ

Hybrid Markdown editor を使ってみて、個人的にはかなり好感触でした。

特に Markdown を読む・直す作業では、Preview と Text Editor を行き来しなくてよくなるのが便利です。

一方で、Markdown のソースを直接触りたい場面もあるので、今のところ .md のデフォルト Editor にはせず、

Ctrl + Shift + V

で Text Editor と Markdown Editor を切り替える運用にしています。

まだ Experimental なので今後変わる部分もありそうですが、Markdown をよく触る人なら一度試してみてもよさそうです。

参考

7
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?