この記事は公開されてから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内に対処法が書いていますので、その通りに実施します。
改行コードを変更する
設定画面を開きます。
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タグ)の目次は不要だと思ってるので、消してます。