【VSCode】Markdownで書いたブログに目次を付ける！（Markdown TOC）
サーバーレス開発部あらため、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内に対処法が書いていますので、その通りに実施します。
改行コードを変更する
設定画面を開きます。
eolで検索します。
Files: Eolの設定を下記に変更します。
| OS | 設定値 |
|---|---|
| Windows | \r\n |
| macOS | \n |
基本は上記でOKですが、ファイルで異なる場合は、下記のように個別対応してください。
（もしくは必要に応じて、Files: Eolの設定を変更してください。）
設定変更：HTMLのアンカータグを付ける
デフォルトだとHTMLのアンカータグ（下記のやつ）が付かないため、ブラウザで目次を押してもジャンプできません。
<a id="any-name" name="any-name"></a>
そこで、設定を変更して、アンカータグが付くようにします。
さきほど開いた設定画面の右上にある{}を選択し、設定画面（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タグ）の目次は不要だと思ってるので、消してます。
![[VSCode] URL 貼付時に Markdown リンクが自動挿入されるようになっていました](https://images.ctfassets.net/ct0aopd36mqt/wp-thumbnail-a8d25e3ba6e1f6354699184439e24d5f/6b55406271ae17038b9234c4cbd8babc/vscode-2020-eyecatch-1200x630-1.png)
