Markdown 目次ジェネレーター
Markdown見出しからクリック可能な目次を生成。GitHub / GitLab / Jekyll / Bitbucket のアンカー形式に対応、<!-- toc --> マーカーで既存目次を原位置置換。ブラウザ内で処理。
- ブラウザ内で処理
- データはブラウザ外に出ません
- 無料 · 登録不要
WeChat でスキャンしてシェア
例・詳しい説明・よくある質問 実際の出力つきの例、ほかのツールとの違い、よくある質問。
5 つのアンカー形式
アンカー形式は 5 種類あります。使うレンダラーに合わせて選んでください。
- GitHub / Hugo:小文字化し、文字・結合記号・数字・
_・-・空白を残して、空白 1 つを-1 つに変えます。連続した空白は連続したハイフンになり、先頭や末尾のハイフンも残ります。github-slugger 2.0.0 と同じ規則で、ツールはこれと照合してテストしています。Hugo の Goldmark レンダラーは既定でautoHeadingIDType: githubです。 - GitLab:同じ規則です(GitLab の見出しアンカーの説明、GitLab 17.0 以降)。連続したハイフンはまとめません。
a --- bはa-----bになります。 - Jekyll(kramdown GFM):Jekyll の既定は
input: GFMで、kramdown-parser-gfm を使います。GitHub と同じく Unicode を残し、タブもハイフンにします。重複は基本名ごとに数えます。 - kramdown(input: kramdown):kramdown 独自のパーサー(basic_generate_id)です。最初の ASCII 英字より前の文字を削除し、
a-z・0-9・空白・ハイフンだけを残します。何も残らなければsectionになります。 - Bitbucket Cloud:すべてのアンカーが
markdown-header-で始まり(Atlassian の課題 BCLOUD-8276)、重複は_Nです。それ以外の規則は公開されていないため、プレフィックスの後は GitHub の規則を使います。Bitbucket Data Center は見出しに id を付けません。
マーカーモード
マーカーモードは目次を常に最新に保ちつつ、本文の他の部分には触れません。 目次を置きたい場所に 2 つの HTML コメントを書いておきます:
<!— toc —>
<!— /toc —>
あとはジェネレーターを実行するたび、2 つのコメント間の内容が新しい TOC に置換されます。 マーカーがまだ無い場合は、最初の見出しの直前に新しいマーカー付きブロックが挿入されるので、 コピーして commit するだけで運用に乗ります。
実例
シンプルな目次(GitHub 形式)
入力:
# API リファレンス
## 認証
### OAuth フロー
## エンドポイント
### GET /users
### POST /users
出力(GitHub アンカー、インデント半角スペース 2):
- [API リファレンス](#api-リファレンス)
- [認証](#認証)
- [OAuth フロー](#oauth-フロー)
- [エンドポイント](#エンドポイント)
- [GET /users](#get-users)
- [POST /users](#post-users)
重複した見出し
2 つの ## 例 は GitHub / GitLab / Jekyll では #例 と #例-1、Bitbucket Cloud では #markdown-header-例 と #markdown-header-例_1 になります。kramdown 形式では日本語が削除され、#section と #section-1 になります。
H1 を除外する
静的サイトが H1 を frontmatter から描画している場合は H1 を含む をオフにします。TOC は最初の H2 から始まり、インデントが 1 段階浅くなります。
同じ文書をプラットフォームごとに
この文書には重複した ### Examples、記号、日本語の見出しがあります。最小レベル 2、最大レベル 3 のとき:
# Install Guide
## Requirements
### Examples
## Usage
### Examples
## Q&A: what's new?
## インストール (Install)
GitHub・GitLab・Jekyll(GFM)では同じ目次になります。
- [Requirements](#requirements)
- [Examples](#examples)
- [Usage](#usage)
- [Examples](#examples-1)
- [Q&A: what's new?](#qa-whats-new)
- [インストール (Install)](#インストール-install)
kramdown 形式では インストール が削除され、install だけが残ります。
- [Requirements](#requirements)
- [Examples](#examples)
- [Usage](#usage)
- [Examples](#examples-1)
- [Q&A: what's new?](#qa-whats-new)
- [インストール (Install)](#install)
Bitbucket Cloud は GitHub と同じ id の前に markdown-header- を付け、2 つ目の Examples は #markdown-header-examples_1 になります。
制限
- 読み取るのは ATX(
#)と setext(===、---)の見出しで、HTML で書いた見出し(<h2>)は読みません。インラインの Markdown は単純な規則で取り除くため、強調の中のリンクのような珍しい書き方では目次の文字に余分な記号が残ることがあります。 - 独自 id(kramdown と Hugo の
## 見出し {#custom-id})は読みません。ツールは自動生成される id を計算します。 - ここにないレンダラー(VS Code など)は規則が違うことがあります。長い目次をコミットする前に、生成したリンクを 1 つ開いて確かめてください。
FAQ
なぜアンカー形式を選ぶ必要があるのですか?
見出しをアンカーに変える規則はプラットフォームごとに違います。GitHub と GitLab は Unicode の文字とアンダースコアを残し、記号を削除して、空白 1 つをハイフン 1 つに変えます。Jekyll の既定の GFM パーサーも同じです。kramdown 独自のパーサーは ASCII だけを残します。Bitbucket Cloud はすべてのアンカーに markdown-header- を付けます。違う規則で作った目次はリンクが切れます。
中国語・日本語・韓国語の見出しに対応していますか?
GitHub、GitLab、Jekyll(GFM)、Bitbucket Cloud は対応しています。日本語・中国語・韓国語の文字はアンカーに残ります。kramdown 形式(input: kramdown の Jekyll や kramdown サイト)は ASCII 以外をすべて削除し、何も残らない見出しには section、section-1 のような id を付けます。
マーカーモードはどのように既存の目次を更新しますか?
マーカーモードを有効にすると、ツールは文書内の <!-- toc --> ... <!-- /toc --> を探し、その間の内容を新しく生成した TOC で丸ごと置換します。マーカー外の本文は一切変更されません。マーカーが未設定の場合は最初の見出しの直前に新しいマーカー付き TOC ブロックを挿入するので、コピーして元ファイルに戻すだけで完了です。
重複した見出しがあるとどうなりますか?
文書内のすべての見出しに一意の id が付きます。レンダラーはすべての見出しを数えるため、最小 / 最大レベルの範囲外の見出しも含めます。GitHub と GitLab は -1、-2 を付け、すでに使われている番号は飛ばします。Jekyll と kramdown は基本名ごとに数えて -1、-2 を付け、Bitbucket Cloud は _1、_2 を使います。
コードブロック内の # は見出しとして扱われますか?
扱われません。フェンスドコードブロック(``` または ~~~)で囲まれた行は全てコードとして処理され、行頭の # は見出しになりません。既存の <!-- toc --> ... <!-- /toc --> ブロックも同様にスキップされるため、ジェネレーターを繰り返し実行しても旧 TOC が入れ子にはなりません。