Markdownエディタとして活用
Markdownは、軽量なマークアップ言語の一つです。Markdown形式のファイルは、Qiitaにおける記事作成や、GitHubのREADMEの記述にも用いられており、簡単に書けて表現力もあるフォーマットとして広く使われています。VSCodeでも、拡張子が.mdであるファイルをMarkdown形式として扱い、シンタックスハイライトなどの基本的な機能を提供しています。
プレビューを表示する
Markdownに慣れないうちは、独特のマークアップ（記号）と見た目の対応がなかなかイメージできないので、プレビューを見ながら書けたら便利でしょう。VSCodeでは、Markdownファイルの編集中に、プレビューを表示させることができます。同一のエディタグループとするか、あるいは新たなエディターグループとして横に表示するか、2通りの操作があります（図8）。
同一エディターグループ内にタブを開いて表示
- Markdownファイルのタブで右クリックして［プレビューを開く］を選択
- タブバー右のプレビューアイコンを［Option］／［Alt］キーを押しながらクリック
- ［Command］＋［Shift］＋［V］／［Ctrl］＋［Shift］＋［V］
新たにエディターグループを開いて横にプレビューを表示
- タブバー右のプレビューアイコンをそのままクリック
- ［Command」＋［K］［V］／［Ctrl］＋［K］［V］
プレビュー側には、現在のカーソル位置に応じて、左端に縦線が表示されます。プレビューからは、タブバー右に現れる［ソースの表示］アイコンのクリックで、元のMarkdownファイルに切り替えることもできます。
プレビューを閉じるにはタブの［×］をクリックします。エディターグループとして表示されている場合には、右端の［…］をクリックして［すべて閉じる］を選択しても閉じることができます。
さまざまな便利機能を備える「Markdown All in One」
Yu Zhangによる拡張機能「Markdown All in One」を使うと、基本となる補完機能の他にキーボードショートカットが拡張され、目次の作成機能やナンバリング機能、HTMLへのエクスポート、数式編集機能など「All in One」の名にふさわしい多くの便利機能を利用できるようになります。
その一つ、目次作成機能を見てみます。目次を挿入したい箇所にカーソルを移動し、コマンドパレットから「Markdown All in One: Create Table of Contents」を実行します。すると、目次が作成されて挿入されます（図9）。
見出しを修正した場合でも、保存時に自動的に反映されるので便利です。
もう一つ、ナンバリング機能も見てみます。ナンバリング機能を使うと、見出しに連番を自動的に振ることができます。コマンドパレットから、「Markdown All in One: Add/Update section numbers」を実行します。すると、見出しに「x.y.z」形式で自動的にレベルに応じた連番が振られます（図10）。
見出しを追加してナンバリングをし直すときにも同様の操作です。ナンバリングを解除するには、コマンドパレットから「Markdown All in One: Remove section numbers」を実行します。
テーブルの編集を楽にする「Markdown Table」
Markdown形式によるテーブルの作成は、罫線文字が必要になったり作成や修正は意外と面倒なものです。また、入力中の見た目と実際の表のイメージを一致させようとすると、空白をたくさん入れて位置合わせることになりがちです。
Takumi Ishiiによる拡張機能「Markdown Table」を使うと、テーブルのオートフォーマットやCSV（Comma Separated Value）／TSV（Tab Separated Value）のフォーマット、セル間のカーソル移動などの機能が使えるようになり、見た目の調整や罫線文字の自動挿入など、テーブルの作成をアシストしてくれます。セル間のカーソル移動は、［Tab］キー、［Shift］＋［Tab］キーで、移動に伴うオートフォーマットも実行してくれます。
オートフォーマット機能の利用方法を説明します。テーブルを作成するとき、まずはヘッダ行とアラインメント行の一部を入力しておきます（図11①）。ここで［Tab］キーを押すと、アラインメント行が自動的に補完されて、データ行が1行追加されます。
必要であれば、この時点でアラインメント行に「:」を追加して桁揃え方法を指定しておきます（図11②）。データ行に入力していきましょう。［Tab］キーによってカーソルをセル間で移動すると、自動的にフォーマットし直されるのが分かります（図11③）。プレビューを表示させてみると、きちんとテーブルとして処理されているのが分かります（図11④）。
TSVのフォーマットも試してみます。Excelで入力、あるいはテキストエディタでタブ区切りでテーブルの原型を作成します。これをコピー・アンド・ペーストでVSCodeのエディター画面に貼り付けます。テーブルの範囲を選択し（図12①）、右クリックで表示されるコンテキストメニューから［Markdown Table: Convert TSV to table］を選択します（図12②）。コマンドパレットからも呼び出せます。
プレビューを表示させてみると、こちらもきちんとテーブルとして処理されているのが分かります（図12③）。
オートフォーマットなしのセル間移動、全テーブルのフォーマット、カラムの挿入、揃え方向の指定、カラムの移動などの機能も備えているので、拡張機能の［詳細］を参照してください。
Markdown構文をチェックできる「markdownlint」
Markdownに慣れないうちはプレビューで確認しながら入力してもよいですが、誤りを随時指摘してくれると効率がアップするでしょう。David Ansonによる拡張機能「markdownlint」を使うと、Markdown書式のルールに違反している箇所を黄色の波線で指摘してくれるようになります。また、一覧を「問題」パネルで確認できます（図13）。
指摘を見ながら手作業で修正してもよいですが、クイックフィックスがある場合はそれを利用すると、修正をスピーディに実施できます。波線の位置にマウスカーソルをホバーさせると、指摘内容がポップアップします（図14）。［クイックフィックス...］をクリックすると処理方法がメニュー表示されるので（ショートカット［Command」＋［.］／［Ctrl］＋［.］）、［Fix this violation of ...］をクリックすると、波線の位置の問題が修正されます。
MarkdownをPDF化する「Markdown PDF」
Markdownを直接PDFに変換できれば、簡単なワードプロセッサのように活用できるでしょう。yzaneによる拡張機能「Markdown PDF」を使うと、編集中のMarkdownファイルから直接PDFやHTML、画像形式のファイルを作成できます。Markdown PDFでは、変換にChroniumを使います（拡張機能のインストール後に自動的にインストールされます）。
PDFの作成は、開いたMarkdownファイルのエディター画面で右クリックします。コンテキストメニューが表示されるので、［Markdown PDF: Export (xxxxx)］のいずれかをクリックします。xxxxxの部分は出力する形式で、settings.jsonによる既定、pdf、html、png、jpeg、allから選択できます（図15）。
図16は、PDFで出力してみた例です。
PDFを見ると、上部にヘッダが書き出されています。ヘッダが出力されないようにするなど、Markdown PDFではいくつかの設定が可能です。［設定］－［拡張機能］－［Markdown PDF］から変更できます。以下は、主な設定項目です（カッコ内は既定値）。
- markdown-pdf.outputDirectoryRelativePathFile：出力先の相対パス（なし）
- markdown-pdf.convertOnSave：ファイル保存時に作成（しない）
- markdown-pdf.displayHeaderFooter：ヘッダとフッタの表示（あり）
- markdown-pdf.format：PDF出力時の用紙サイズ（A4）
- markdown-pdf.type：既定の出力形式（PDF）
この他にも、クリッピング、上下左右の空き、用紙の向き、ヘッダとフッタの書式なども指定できるので、設定項目を確認してみてください。
この他、VSCodeのプレビュー機能では表示できないMarkdownの拡張構文などを取り扱えるようにするYiyi Wangによる「Markdown Preview Enhanced」などの拡張機能もあります。
今回登場のショートカットキー
| 機能 | macOS | Windows |
|---|---|---|
| 設定 | ［Command］＋［,］ | ［Ctrl］＋［,］ |
| コマンドパレット | ［Command］＋［Shift］＋［P］ | ［Ctrl］＋［Shift］＋［P］ |
| 禅モードの切り替え | ［Command］＋［K］［Z］ | ［Ctrl］＋［K］［Z］ |
| エディターグループ内にプレビューを表示 | ［Command］＋［Shift］＋［V］ | ［Ctrl］＋［Shift］＋［V］ |
| 新しいエディターグループにプレビューを表示 | ［Command］＋［K］［V］ | ［Ctrl］＋［K］［V］ |
| クイックフィックス | ［Command］＋［.］ | ［Ctrl］＋［.］ |
まとめ
今回は、VSCodeを一般的なテキストエディタ、Markdownエディタ作成ツールとして使う方法を紹介しました。役立ちそうなものがあったら、ぜひ導入してVSCodeの活用領域を拡げてください。
次回は、UML図やフローチャートなどのダイアグラムをVSCodeで作成する方法を紹介します。
