Visual Studio CodeをMarkdownエディターとして使用する

2019年1月22日

Visual Studio CodeをMarkdownエディターとして使用するために必要な設定についてまとめておきます。そもそもMarkdownが何か分からない方は、以前記事にした事があるのでそちらをご覧ください。

思考したり情報整理したい時はMarkdown記法で文章を書き出そう!!Webデザイナーの情...

何か企画の情報をまとめたり、アイデアを出して行くときに僕はMarkdown記法という記述方法で情報の整理を行う場合がよくあります情報整理を行う際にメモ帳等で手書きという場合もありますが、箇条書きでどんどん情報の深掘りをしていく際はPCの方が自分には合っているからです。そんな時にただただプレーンなテキストで文字を入力するのではなく、Markdown記法と言って文字列をHTMLに変換するための記述方法を利用する事で、見出しやリストを素早く表現して文章をまとめる事で、より綺麗に情報整理ができます。もちろん自分の中で目印...

プレビューの表示方法

Visual Studio Codeでは、デフォルトでMarkdownをサポートしていて、プレビュー機能まであります。

まずはVisual Studio Codeに「自分がいまMarkdownを書こう（あるいは見よう）としている」ことを教えてあげる必要があります。
ウインドウ右下の［プレーンテキスト］をクリックして「Markdown」を検索して言語設定をMarkdownに切り替えましょう。

ちなみに、拡張子がmdのファイルを開くと自動的にMarkdownだと識別してくれます。

言語設定を切り替えたら、右上にある「虫眼鏡がウインドウに乗っかっているアイコン」をクリックするとプレビューが開きます。
この画面で、書いたMarkdownをプレビューしてくれます。

プレビュー表示のショートカットキーは少々ややこしいですが、command + Kを押した後にVを押します。

あとはMarkdownを書けばいい感じにプレビューしてくれます。

<!-- 見出し -->
# 見出し1
## 見出し2
### 見出し3

<!-- リスト -->
* リスト
* リスト
- リスト
- リスト
1. リスト
2. リスト
<!-- リンク -->
[Google](https://www.google.com)
<!-- 装飾 -->
**強調表示** *イタリック* `コード`
> 引用文
```
.codeblock {
  color: #333;
}
```
<!-- テーブル -->
|テーブル|テーブル|
|:------|:-----|
|テーブルの内容 | テーブルの内容 |