Visual Studio CodeでMarkdownを書く環境を整える

# はじめに
Visual Studio Codeの環境を整える記事をいくつか書いていますが、Markdownについてもまとめてみようと思います。

## 前提となる環境の情報
- Windows 10 ver.20H2
- Visual Studio COde 1.63.2

## 実現したい機能
Markdownで気持ちよく開発や文書作成を行えるようにするために、次の機能をセットアップします。

- プレビュー
    - 標準機能
- ファイルエクスプローラー
    - 標準機能
- ショートカット
    - 拡張機能を活用
- エクスポート
    - HTMLとPDFを出力したい。拡張機能を活用
- Marpでプレゼンテーション資料を作りたい
    - 拡張機能を活用
- 正しい文法でMarkdownを記述したい
    - 拡張機能を活用
    - ※Markdownで「正しい文法」というのはなかなか難しいですが、他者と共同作業をするときに、同じルールの下で文章を作成できるようになることを目指します。

# 1. セットアップ
拡張機能として下記をマーケットプレースから導入します。

|拡張機能|名前とリンク|用途|
|:-------|:--------|:-------|
| ![image](https://yzhang.gallerycdn.vsassets.io/extensions/yzhang/markdown-all-in-one/3.4.0/1605323530575/Microsoft.VisualStudio.Services.Icons.Default)|[Markdown All in One](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one) | キーボードショートカット、オートコンプリート、目次作成、箇条書きの編集支援、数式サポート、HTMLエクスポートなど標準機能で対応していない機能をAll in Oneで備えています。|
|![image](https://yzane.gallerycdn.vsassets.io/extensions/yzane/markdown-pdf/1.4.4/1584550540797/Microsoft.VisualStudio.Services.Icons.Default) | [Markdown PDF](https://marketplace.visualstudio.com/items?itemName=yzane.markdown-pdf)| PDFでエクスポートする拡張機能です。PDF以外にもHTMLやPNGなどにも対応しています。|
| ![iamge](https://marp-team.gallerycdn.vsassets.io/extensions/marp-team/marp-vscode/1.0.2/1623060265601/Microsoft.VisualStudio.Services.Icons.Default)|[Marp for VS Code](https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode) |Markdownでプレゼン資料を作成することができるMarpのVSCode用の拡張機能です。 |
|![image](https://davidanson.gallerycdn.vsassets.io/extensions/davidanson/vscode-markdownlint/0.45.0/1635486276371/Microsoft.VisualStudio.Services.Icons.Default)|[markdownlint](https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint)|Markdownの文法や記述スタイルを、静的に解析し、違反した書き方を通知してくれる拡張機能です。|

# 2. 利用イメージ
## Markdown All in Oneで目次機能を利用してみる
この拡張機能はいろいろなサポート機能を提供していますが、そのうちの目次機能を利用してみます。下記のように、Table of Contentsと記載されているエリアに目次が自動生成されます。編集して保存するたびにここが更新されるわけです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34410/d8487eed-b33a-6063-9ed1-23bfb8db63d6.png)

その他、Markdown All in Oneの使用イメージについては、[Markdown All in One/Features](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one#features)を見てもらうとGIF
で解説されており分かりやすいです。

## Marpでスライドを作成する
Marp for VS Codeをインストールすることによって、Markdownで記述した文書をスライド化することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34410/1b0eeca9-734a-f8d0-7b4f-6b6f87dd4663.png)
PDFやHTMLにスライドとしてExportすることができます。特にHTMLにエクスポートすると、プレゼンテーションモードがついてくるため、使いやすさにも配慮されています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34410/38a1f3b2-1aaa-baec-f657-63f1f4ef9341.png)

## markdownlintで自動的に構文チェックをしてもらう
markdownlintを利用すれば、Markdownの標準的な記述方法を支援してくれます。一人で文書を作成している場合には「ふむふむ」というくらいですが、他者とMarkdownファイルの共同編集をするときには効果てきめんです。Markdownの記述方法に自由度があるところに制限をかけてくれるので、「書き方の考え方の相違」で無駄なコミュニケーションをすることが激減します。おすすめ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34410/b91b2308-09e0-e998-e582-d5974c336ca0.png)



# セットアップの補足
## Makrdown PDFのエクスポートが失敗する場合
PDFエクスポートを行う「Markdown PDF」のセットアップの補足です。まれに内部で利用するChromiumのインストールが失敗することがあるようです。うまくPDF出力ができない場合は、下記の設定を確認するのが良さそうです。
> ダウンロードが上手くいかない場合や、Markdown PDF のバージョンアップの度にダウンロードするのを避けたい場合、markdown-pdf.executablePath オプションでインストール済みの Chrome か Chromium を指定してください。

https://github.com/yzane/vscode-markdown-pdf/blob/master/README.ja.md#markdown-pdfexecutablepath


# 3. おわりに
Markdownでシンプルなテキストを書くことにより、いろいろな拡張の恩恵を受けられそうです。Visual Studio Codeは拡張機能が豊富であるため、ここで紹介しなかった、もっとリッチなビューワーなど、まだまだ拡張性があります。いずれそんな内容もまとめてみたいと思います。