Visual Studio Codeを活用するためのテクニックや、ベンリな拡張機能などを紹介する新連載がスタート! 今回はMarkdownのプレビューの方法を紹介。
Visual Studio Code(以下、VS Code)はデフォルトでMarkdown記法を使って記述されたドキュメントをサポートしている。Markdownドキュメントをプレビューする方法を説明する。
操作 | Windows/Linux | macOS |
---|---|---|
サイドバイサイドにプレビューを表示 | [Ctrl]+[K]→[V] | [Command]+[K]→[V] |
同一エディタに別タブとしてプレビューを表示 | [Ctrl]+[Shift]+[V] | [Shift]+[Command]+[V] |
プレビューを特定ファイルにロック | コマンドパレットで[Markdown: Toggle Preview Locking]を選択 | |
Markdownのプレビューに関連するキー操作やコマンド |
VS Codeが標準で提供する機能を使えば、現在編集中のMarkdownをプレビューできる。一般的には次の方法を使うとよいだろう。
「プレビューをサイドバイサイド(隣り合わせ)に表示」するには、プレビューしたいMarkdownを開いているエディタ(のタブ)をアクティブにして、上に示したコマンドパレットのコマンドやキー操作を行えばよい。すると、Markdownを編集しているエディタ*1とは別のエディタが隣に開き、そこにプレビューが表示される。
編集しているMarkdownとそのプレビューは基本的には同期して表示される。内容を変更すれば、それがリアルタイムにプレビューにも反映されるし、一方をスクロールすれば、それに合わせてもう一方もスクロールされる。
*1 VS Codeでは実際にファイルを開いて編集する部分を「エディタ」と呼び、そこには複数のファイルをタブ形式で表示できる。エディタは最大で3つまで並べて表示できる。個々のエディタ(とそこに開かれたファイル群)を「エディタグループ」と呼ぶこともある。
なお、コマンドパレットやキーボードを使わずに、GUIベースで操作をするなら、Markdownファイルを開いているエディタ(タブ)の右側にある[プレビューを横に表示]ボタンをクリックしてもよい。
[Ctrl]+[Shift]+[V]キー(macOSでは[Command]+[Shift]+[V]キー)を押せば、同じエディタ内に別のタブとしてプレビューを表示することもできる。
先ほどとは異なり、エディタが同じなので、隣り合わせで表示されない。ソースとなるMarkdownに移るには、コマンドパレットから[Markdown: ソースの表示]([Markdown: Show Source])コマンドを選択する。あるいは、以下のように、プレビューしているエディタ(タブ)の右端にある[ソースの表示]ボタンを利用してもよい。
複数のMarkdownを編集している場合、デフォルトでは、プレビュー用のエディタ(タブ)には、現在編集しているファイルの内容が表示される(別のファイルに切り替えれば、そのプレビューが表示される)。これを特定のファイルにロックすることもできる。これには、コマンドパレットで[Markdown: プレビュー ロックの切り替え]([Markdown: Toggle Preview Locking])コマンドを実行する。これにより、プレビューには特定のファイルの内容が常に表示されるようになる。
以下のように、プレビューをしているエディタ(タブ)の右側にある[…]ボタンをクリックして、ポップアップメニューから[プレビュー ロックの切り替え]を選択してもよい。
なお、このポップアップメニューにあるMarkdownのプレビュー関連の操作としては以下のものがある。
コマンドパレットには、これらのボタンに対応するコマンドも用意されているので、興味のある方は調べてみよう。
Copyright© Digital Advantage Corp. All Rights Reserved.