はじめに

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

前提となる環境の情報

Windows 10 ver.20H2
Visual Studio COde 1.63.2

実現したい機能

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

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

1. セットアップ

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

拡張機能	名前とリンク	用途
	Markdown All in One	キーボードショートカット、オートコンプリート、目次作成、箇条書きの編集支援、数式サポート、HTMLエクスポートなど標準機能で対応していない機能をAll in Oneで備えています。
	Markdown PDF	PDFでエクスポートする拡張機能です。PDF以外にもHTMLやPNGなどにも対応しています。
	Marp for VS Code	Markdownでプレゼン資料を作成することができるMarpのVSCode用の拡張機能です。
	markdownlint	Markdownの文法や記述スタイルを、静的に解析し、違反した書き方を通知してくれる拡張機能です。

2. 利用イメージ

Markdown All in Oneで目次機能を利用してみる

この拡張機能はいろいろなサポート機能を提供していますが、そのうちの目次機能を利用してみます。下記のように、Table of Contentsと記載されているエリアに目次が自動生成されます。編集して保存するたびにここが更新されるわけです。

その他、Markdown All in Oneの使用イメージについては、Markdown All in One/Featuresを見てもらうとGIF
で解説されており分かりやすいです。

Marpでスライドを作成する

Marp for VS Codeをインストールすることによって、Markdownで記述した文書をスライド化することができます。

PDFやHTMLにスライドとしてExportすることができます。特にHTMLにエクスポートすると、プレゼンテーションモードがついてくるため、使いやすさにも配慮されています。

markdownlintで自動的に構文チェックをしてもらう

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

セットアップの補足

Makrdown PDFのエクスポートが失敗する場合

PDFエクスポートを行う「Markdown PDF」のセットアップの補足です。まれに内部で利用するChromiumのインストールが失敗することがあるようです。うまくPDF出力ができない場合は、下記の設定を確認するのが良さそうです。

ダウンロードが上手くいかない場合や、Markdown PDF のバージョンアップの度にダウンロードするのを避けたい場合、markdown-pdf.executablePath オプションでインストール済みの Chrome か Chromium を指定してください。

3. おわりに

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