はじめに
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は拡張機能が豊富であるため、ここで紹介しなかった、もっとリッチなビューワーなど、まだまだ拡張性があります。いずれそんな内容もまとめてみたいと思います。