【VSCode】Markdownで書いたブログに目次を付ける!(Markdown TOC)

Markdownで書いたブログに、イイカンジで目次を作成する拡張機能(VSCode)があったので、試してみました!
2019.07.04

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

サーバーレス開発部あらため、CX事業本部の藤井元貴です。

ブログが長くなると、目次を表示したいです。

そこで、Markdownでイイカンジに目次を作ってくれるVSCodeの拡張機能があったので、試してみました!

※ 本ブログ(Developers.IO)を想定しています。

目次

環境

項目 バージョン
macOS Mojave 10.14.5
Visual Studio Code 1.35.1

やってみた

VSCodeに拡張機能を導入

下記の拡張機能を導入します。

設定変更:改行コードを変更する

現状は「auto」が挿入されてしまう

そのまま使うと、下記のようにautoが挿入されてしまい、うまくできません。

<!-- TOC -->autoauto- [タイトル](#タイトル)auto    - [あいうえお](#あいうえお)auto        - [aaa](#aaa)auto        - [bbb](#bbb)auto    - [かきくけこ](#かきくけこ)auto        - [いろはにほへと](#いろはにほへと)auto        - [ちりぬるを](#ちりぬるを)auto    - [さしすせそ](#さしすせそ)auto        - [寿限無寿限無](#寿限無寿限無)auto        - [五劫の擦り切れ](#五劫の擦り切れ)auto        - [海砂利水魚](#海砂利水魚)auto    - [たちつてと](#たちつてと)autoauto<!-- /TOC -->

Issuesとして報告されていますが、まだ未解決です。

上記のIssues内に対処法が書いていますので、その通りに実施します。

改行コードを変更する

設定画面を開きます。

VSCodeの設定画面を開く

eolで検索します。

「eol」で検索し、「Files: Eol」の設定値を変更する

Files: Eolの設定を下記に変更します。

OS 設定値
Windows \r\n
macOS \n

基本は上記でOKですが、ファイルで異なる場合は、下記のように個別対応してください。 (もしくは必要に応じて、Files: Eolの設定を変更してください。)

ファイル毎に改行コードを変更する

設定変更:HTMLのアンカータグを付ける

デフォルトだとHTMLのアンカータグ(下記のやつ)が付かないため、ブラウザで目次を押してもジャンプできません。

<a id="any-name" name="any-name"></a>

そこで、設定を変更して、アンカータグが付くようにします。

さきほど開いた設定画面の右上にある{}を選択し、設定画面(JSON)を開きます。

設定画面(JSON)を開く

続いて、JSONに下記の項目を追加し、保存します。

"markdown-toc.insertAnchor": true

目次をつける!!

実験的に、適当なMarkdownを書きました。

# タイトル

## あいうえお

### aaa

### bbb

## かきくけこ

### いろはにほへと

### ちりぬるを

## さしすせそ

### 寿限無寿限無

### 五劫の擦り切れ

### 海砂利水魚

## たちつてと

VSCodeで目次を挿入したい位置にカーソルを移動し、右クリックしてMarkdown TOC: Insert/Updateを選択します。

コマンドパレットで>markdown toc insert/updateを探して実行してもOKです。

目次をつける

目次ができました!!!

<a id="markdown-タイトル" name="タイトル"></a>
# タイトル

<!-- TOC -->

- [タイトル](#タイトル)
    - [あいうえお](#あいうえお)
        - [aaa](#aaa)
        - [bbb](#bbb)
    - [かきくけこ](#かきくけこ)
        - [いろはにほへと](#いろはにほへと)
        - [ちりぬるを](#ちりぬるを)
    - [さしすせそ](#さしすせそ)
        - [寿限無寿限無](#寿限無寿限無)
        - [五劫の擦り切れ](#五劫の擦り切れ)
        - [海砂利水魚](#海砂利水魚)
    - [たちつてと](#たちつてと)

<!-- /TOC -->

<a id="markdown-あいうえお" name="あいうえお"></a>
## あいうえお

<a id="markdown-aaa" name="aaa"></a>
### aaa

<a id="markdown-bbb" name="bbb"></a>
### bbb


<a id="markdown-かきくけこ" name="かきくけこ"></a>
## かきくけこ

<a id="markdown-いろはにほへと" name="いろはにほへと"></a>
### いろはにほへと

<a id="markdown-ちりぬるを" name="ちりぬるを"></a>
### ちりぬるを


<a id="markdown-さしすせそ" name="さしすせそ"></a>
## さしすせそ

<a id="markdown-寿限無寿限無" name="寿限無寿限無"></a>
### 寿限無寿限無

<a id="markdown-五劫の擦り切れ" name="五劫の擦り切れ"></a>
### 五劫の擦り切れ

<a id="markdown-海砂利水魚" name="海砂利水魚"></a>
### 海砂利水魚


<a id="markdown-たちつてと" name="たちつてと"></a>
## たちつてと

実際の画面がこちらです。目次をクリックすると、ジャンプできます!

実際に目次がついてる様子

さいごに

自分で作ろうかと思ってましたが、イイカンジの拡張機能があって良かったです!

個人的には、一番上の「タイトル」(h1タグ)の目次は不要だと思ってるので、消してます。

参考