VSCodeでMarkdown(マークダウン)ファイルをプレビュー表示する方法【簡単２ステップ】

2023.02.012023.11.25

VSCode(Visual Studio Code)には拡張機能なしでMarkdown(マークダウン)ファイルをプレビュー表示する機能が備わっています。

普段メモなどをマークダウンで記述し、管理している方や、職場での仕様書がマークダウンで記載されているという場合などでVSCodeを使用すれば、簡単にプレビュー表示することが可能です。

VSCodeでマークダウンファイルをプレビュー表示するには2通りの方法がありますが、どちらの方法でも、簡単な2ステップで表示することが可能ですので、ぜひ試してみてください！

VSCode(Visual Studio Code)とは

VSCode(Visual Studio Code)とは、Microsoftが提供する開発用エディタです。

近年では開発用エディタとして定番のツールとなっており、さまざまな拡張機能も提供されています。

シェア率も高く、使いやすいので普段使いのテキストエディタとして使っている方も多いのではないでしょうか。

使用者が多いため検索すれば、色々な情報も簡単に手に入るのもメリットの一つですね。

今回はそのVSCodeでマークダウンファイルをプレビュー表示する方法を解説していきます。

Markdown（マークダウン）とは「見出し」や「太字」、「ハイパーリンク」などの表示を行うことができる軽量なマークアップ言語です。マークダウンでの記載方法を「マークダウン記法」といったりもします。

シンプルな記述で文書構造を明示することができ、HTMLドキュメントに変換できるフォーマットとして開発されました。

マークダウン形式のファイルとして保存する場合は拡張子を「.md」として保存します。

VSCodeでマークダウンファイルのプレビュー表示する方法を解説します。

マークダウンをプレビュー表示するには

の2通りがあります。

最初にコマンドパレットから実行していく手順となります。

まずは以下のどちらかのキーを押下してコマンドパレットを表示しましょう。

コマンドパレットが表示されたら、「Markdown」と入力すると、Markdown関連のコマンドが表示されるので、以下を選択してください。

Markdown: プレビューを横に表示
Markdown: Open Preview to the Side

対象のマークダウンファイルのプレビューが横に表示されます。

次にショートカットキーを使用したプレビュー方法です。

慣れてきたら、ショットカットキーでの実行の方が簡単なので、こちらの方法を覚えておくと良いでしょう！

手順は以下の通りです。

これだけでOKです！簡単ですね。