【VSCode】Markdownで目次を自動挿入する便利な方法を紹介!

ツール

前提

Markdown Preview Enhancedという拡張機能を用います。

基本的な使い方はこちらの記事を参考にしてください。

【Visual Studio Code】Markdownの導入と基本的な使用方法
Visual Studio CodeでMarkdownを使うためにMarkdown Preview Enhancedという拡張機能を追加します。ここではMarkdown Preview Enhancedの基本的な使い方について説明していきます。

目次(TOC)の挿入方法

コマンドパレット(F1 または Ctrl + Shift + P)を開き、「Markdown Preview Enhanced: Create TOC」を実行します。

実行すると次のようなコードが追加されます。

<!-- @import "[TOC]" {cmd="toc" depthFrom=1 depthTo=6 orderedList=false} -->

準備はこれだけです!

では試しに次のようなMarkdownを作ってみましょう。

# マークダウンチートシート

## 目次 {ignore=true}

<!-- @import "[TOC]" {cmd="toc" depthFrom=2 depthTo=3 orderedList=false} -->

## 基本的な構文

### 見出し

### リスト

#### 順序なし

#### 順序有り

## 特殊な構文

### テーブルの結合

### 数式の挿入

これを保存する際に、次のコードが自動で生成されます。

<!-- code_chunk_output -->

- [基本的な構文](#基本的な構文)
  - [見出し](#見出し)
  - [リスト](#リスト)
- [特殊な構文](#特殊な構文)
  - [テーブルの結合](#テーブルの結合)
  - [数式の挿入](#数式の挿入)

<!-- /code_chunk_output -->

最終的に全体のコードは次のようになります。

# マークダウンチートシート

## 目次 {ignore=true}

<!-- @import "[TOC]" {cmd="toc" depthFrom=2 depthTo=3 orderedList=false} -->

<!-- code_chunk_output -->

- [基本的な構文](#基本的な構文)
  - [見出し](#見出し)
  - [リスト](#リスト)
- [特殊な構文](#特殊な構文)
  - [テーブルの結合](#テーブルの結合)
  - [数式の挿入](#数式の挿入)

<!-- /code_chunk_output -->

## 基本的な構文

### 見出し

### リスト

#### 順序なし

#### 順序有り

## 特殊な構文

### テーブルの結合

### 数式の挿入

では少し補足していきます。

対象外の設定

目次に追加したくない項目は次のように {ignore=true} を設定します。

## 目次 {ignore=true}

上のサンプルで目次という項目は追加されていません。

目次範囲の設定

目次に追加するタグの範囲は、Markdown Preview Enhanced: Create TOC によって追加されたコードのdepthFrom、depthToで設定します。

上のサンプルでは、h2タグとh3タグを目次に追加するように設定しています。

<!-- @import "[TOC]" {cmd="toc" depthFrom=2 depthTo=3 orderedList=false} -->

項番の設定

上のサンプルではただリストですが、項番(順序あり)リストに変更することが可能です。

Markdown Preview Enhanced: Create TOC によって追加されたコードのorderdListをtrue設定します。

<!-- @import "[TOC]" {cmd="toc" depthFrom=2 depthTo=3 orderedList=true} -->

設定すると挿入されるコードが次のように変更されます。

1. [基本的な構文](#基本的な構文)
    1. [見出し](#見出し)
    2. [リスト](#リスト)
2. [特殊な構文](#特殊な構文)
    1. [テーブルの結合](#テーブルの結合)
    2. [数式の挿入](#数式の挿入)

 

- Visual Studio Codeのおすすめ書籍はコチラ -

コメント

タイトルとURLをコピーしました