【Visual Studio Code】Markdownに目次を自動で挿入する方法
VSCode
Markdown
2021/08/16
前提
前提条件として、Visual Studio Code で「Markdown Preview Enhanced」を使用します。 その他のエディタなどでは機能しないことがありますのであらかじめご了承ください。
「Markdown Preview Enhanced」の基本的な使い方についてはこちらを参照してください。
目次の挿入
コマンドパレットを開き、「Markdown Preview Enhanced:Create TOC」を選択します。
実行すると以下のコードが挿入されます。
Markdown
<!-- @import "[TOC]" {cmd="toc" depthFrom=1 depthTo=6 orderedList=false} -->この状態で見出しを作成します。
Markdown
# マークダウンチートシート
## 目次
<!-- @import "[TOC]" {cmd="toc" depthFrom=1 depthTo=6 orderedList=false} -->
## 基本的な構文
### 見出し
### リスト
#### 順序なし
#### 順序あり
## 特殊な構文
### テーブルの結合
### 数式の挿入保存すると、以下のコードが自動で挿入されます。
目次
<!-- code_chunk_output -->
- [マークダウンチートシート](#マークダウンチートシート)
- [目次](#目次)
- [基本的な構文](#基本的な構文)
- [見出し](#見出し)
- [リスト](#リスト)
- [順序なし](#順序なし)
- [順序あり](#順序あり)
- [特殊な構文](#特殊な構文)
- [テーブルの結合](#テーブルの結合)
- [数式の挿入](#数式の挿入)
<!-- /code_chunk_output -->設定
上記だけでは、余分な項目も目次に含まれてしまいます。 これらを除外するために以下の設定を行います。
目次範囲
デフォルトでは<h1>〜<h6>のすべての見出しが目次となります。
この範囲はdepthFrom、depthToで設定できます。
以下は<h2>〜<h3>を目次とします。
Markdown
<!-- @import "[TOC]" {cmd="toc" depthFrom=2 depthTo=3 orderedList=false} -->目次
<!-- code_chunk_output -->
- [目次](#目次)
- [基本的な構文](#基本的な構文)
- [見出し](#見出し)
- [リスト](#リスト)
- [特殊な構文](#特殊な構文)
- [テーブルの結合](#テーブルの結合)
- [数式の挿入](#数式の挿入)
<!-- /code_chunk_output -->対象外指定
上記の結果から「目次」を除外したいとします。
この場合、見出しに{ignore=true}を設定します。
Markdown
## 目次 {ignore=true}目次
<!-- code_chunk_output -->
- [基本的な構文](#基本的な構文)
- [見出し](#見出し)
- [リスト](#リスト)
- [特殊な構文](#特殊な構文)
- [テーブルの結合](#テーブルの結合)
- [数式の挿入](#数式の挿入)
<!-- /code_chunk_output -->項番
上記は順序なしのリストですが、順序ありリストにする場合は、orderdListをtrueに設定します。
Markdown
!-- @import "[TOC]" {cmd="toc" depthFrom=2 depthTo=3 orderedList=true} -->目次
<!-- code_chunk_output -->
1. [基本的な構文](#基本的な構文)
1. [見出し](#見出し)
2. [リスト](#リスト)
1. [特殊な構文](#特殊な構文)
1. [テーブルの結合](#テーブルの結合)
2. [数式の挿入](#数式の挿入)
<!-- /code_chunk_output -->