このブログの記事など、Markdown形式でドキュメントを書く機会はそこそこある。 どのように表示されるかを確認しながら編集できると便利なため、普段使っているVisual Studio Codeでプレビューを表示させながら編集ができないか調べてみた。
プレビューを表示させながら編集する
プレビューを表示させながら編集するためには画面右上の「Open Preview to the Side」 *1を押下する。
Windows であれば [Control] + [k] → [v]、Mac であれば [command ⌘] + [k] → [v] のショートカットキーでも同じことができる。
インラインコードの部分は黄色で表示されるようになる。見出しの大きさは、4段階目を利用しているためもあって地の文と少々違いが分かりにくい印象。
全画面でプレビューを表示させる
Windows では [Alt] 、Mac では[option ⌥] を押しながらだと同じボタンが「Open Preview」 *2に変化し、新しいタブを全画面で開きながらプレビューを表示させることができる。
Windows であれば [Shift] + [Control] + [v]、Mac であれば [shift ⇧] + [command ⌘] + [v] のショートカットキーでも同じことができる。
Markdownと判別されていない場合
プレビューを表示したい場合には、Markdown で編集していることを VSCodeに認識させる必要がある。 基本的には Markdown の記法を使っていると自動判別されるが、判別してくれない場合には以下の方法で「Select Language Mode」を表示させ、Markdown を指定する。
- 画面右下の言語選択箇所を押下する
- Windows であれば
[Control] + [k] → [m]、Mac であれば[command ⌘] + [k] → [m]のショートカットキーを使う - Windows であれば
[Shift] + [Control] + [p]、Mac であれば[shift ⇧] + [command ⌘] + [p]でコマンドパレットを表示させ、「Select language Mode」を選択する
今回は Markdown でプレビューを表示したが、HTML など他のマークアップ言語でも同じように利用することができる機能かと思うので、機会があれば試していきたい。
