MRが楽しい

MRやVRについて学習したことを書き残す

VSCodeでMarkdownテキストを編集中にプレビューを表示する

本日は VSCode の小ネタ枠です。
VSCodeMarkdownテキストを編集中にプレビューを表示する方法を記事にします。
f:id:bluebirdofoz:20201120210946j:plain

Markdownテキストのプレビュー

.md形式のファイルを VSCode で開き、Markdown 形式でテキストを記述します。
f:id:bluebirdofoz:20201120210955j:plain

右上の[Open Preview...]ボタンをクリックします。
f:id:bluebirdofoz:20201120211004j:plain

これで同一ページのサイドバイサイドで、プレビューを確認しながら編集を行うことができます。
f:id:bluebirdofoz:20201120211013j:plain

Markdownテキストのソースの表示

逆に Markdown のプレビューから、テキスト形式でファイルを開く場合についてです。
Markdown のプレビューの右上には[Show Source]ボタンが表示されるので、これをクリックします。
f:id:bluebirdofoz:20201120211022j:plain

実行するとタブが追加され、ソースのテキストを確認できます。
f:id:bluebirdofoz:20201120211031j:plain

プレビュー表示のショートカット

これらの Markdown のプレビューは以下のショートカットキーでも開くことができます。

ショートカットキー 説明
[Ctrl]+[K]→[V] 同一ページ内にプレビューを表示する
[Ctrl]+[Shift]+[V] 別タブにプレビューを表示する

参考ページ

www.atmarkit.co.jp
qiita.com