【VSCode】.mdファイルをプレビューする

このページにはプロモーションが含まれています

このページでは、.md ファイルのプレビュー方法について解説します。

.md ファイルとは「マークダウンファイル」のことです。マークダウンファイルの中身は一見意味不明なように感じるかもしれませんが、プレビューすることで、ウェブページのような見た目の整ったページを表示することができるようになります。

ということで、.md ファイルはプレビューして閲覧することをオススメします。

で、この .md ファイルは VSCode で簡単にプレビューすることが可能ですので、その VSCode でのプレビュー方法について解説していきたいと思います。

Contents

「プレビューを開く」を選択するだけで OK
テキストとプレビューの同時表示
まとめ

「プレビューを開く」を選択するだけで OK

VSCode で通常の手順で .md ファイルを開いた場合、「単なるテキスト」として開かれることになります。違う言い方をすれば、.md ファイルが編集モードで開かれることになります。

ですが、エクスプローラーから .md ファイルを右クリックし、さらに右クリックメニューの プレビューを開く (Open Preview) を選択すれば、その .md ファイルがプレビューモードで開かれることになってプレビューが表示されることになります。

また、既に編集モードで .md ファイルを開いている場合は、そのファイルの表示タブを右クリックし、プレビューを開く を選択することで、プレビューを表示することができます。

とりあえず、.md ファイルをプレビューしたいのであれば、上記のように右クリックメニューから プレビューを開く を選択してやれば良いだけになります。

テキストとプレビューの同時表示

ただし、上記の手順のみではテキストとプレビューの一方しか同時に確認することができません。自身で .md ファイルを作成する場合はテキストとプレビューを同時に並べて表示できた方が便利で、これにより、編集の効果をプレビューで確認しながら編集作業を進めることが可能となります。次は、テキストとプレビューを並べて表示する手順を説明していきます。

分割 (`Split`) 機能を利用する

VSCode では、テキストやプレビューを表示するウィンドウを分割することができるようになっています。なので、そのウィンドウを２つに分割し、それぞれでテキストとプレビューを表示すれば、プレビューを確認しながらの .md ファイルの編集を実現することができます。

具体的には、まず前述の手順でプレビューを表示し、プレビューのタブを右クリックします。そして、その右クリックメニュー内の 右に分割 (Split Right) を選択します。

これにより、右側に新たなウィンドウが作成されます。そのウィンドウにプレビューを表示しているタブをドラッグ＆ドロップします。

これにより、右側のウィンドウにプレビューが表示されることになりますので、あとは左側のウィンドウで .md ファイルをテキストで開けば、テキストとプレビューが同時に並べられた状態で確認することができるようになります。

もちろん、テキスト側を編集すると、その編集結果がリアルタイムにプレビューに反映されることになるため、編集の効果・結果を確認しながらテキストを編集することが可能となり、.md ファイルが作成しやすくなります。

このウィンドウを分割して横に並べる手順は .md ファイルの編集・プレビュー以外でも様々な場面で活用できますので、是非この手順は覚えておきましょう！

コマンドパレットを利用する

また、同様のことはコマンドパレットを利用することでも実現できます。

コマンドパレットを利用する場合は、まず VSCode で .md ファイルを開きます（テキストで）。続いて、VSCode のウィンドウの 歯車 マークをクリックし、さらに コマンドパレット (Command Palette) メニューを選択します。

これによりコマンドパレットが表示されますので、検索フィールドに mark と入力します。それにより、Markdown: プレビューを横に表示 (Markdown: Open Preview to the Side) メニューがコマンドパレット内に表示されるようになるはずなので、これをクリックします。