Markdown 目次ジェネレーター

Markdown見出しからクリック可能な目次を生成。GitHub / GitLab / Jekyll / Bitbucket のアンカー形式に対応、<!-- toc --> マーカーで既存目次を原位置置換。ブラウザ内で処理。

  • ブラウザ内で処理
  • データはブラウザ外に出ません
  • 無料 · 登録不要
対象の GitHub / Hugo、GitLab、Jekyll(GFM)、kramdown、Bitbucket Cloud に合うアンカー規則を選びます。生成リンクを対象のレンダラーで確認してください。
完全な Markdown を表示し、<!-- toc --> と <!-- /toc --> の間の目次を置換します。マーカーがなければ最初の # 見出しの前に挿入し、閉じていなければ原文を保ちます。
書式と見出しレベル
ハイフン、アスタリスク、番号付きリストを選べます。番号付きの各項目は 1. で始まり、表示番号は Markdown レンダラーが付けます。
見出しの階層ごとに半角スペース 2 個、4 個、またはタブで字下げします。含まれる最も浅い階層は字下げしません。
このレベル以上の見出しを含めます。範囲は 1〜6 です。最小値が最大値を超える場合、両値を小さい順に読み取ります。
このレベル以下の見出しを含めます。範囲は 1〜6 です。重複アンカー ID の割り当てには範囲外の見出しも数えます。
テンプレートが文書タイトルを表示する場合は「H1 を含む」をオフにできます。残りの見出しのアンカー ID は変わりません。
生成した Markdown 目次を全文コピーします。選択範囲に見出しがない場合、このボタンは無効です。
マーカーモードが生成した Markdown を全文コピーします。目次が空、または開始マーカーが閉じていない場合はコピーできません。
Markdown を入力または貼り付けると、見出しや設定の変更が即座に目次へ反映されます。ATX(#)と setext 見出しを読み、フェンスドコードと既存の目次マーカーブロックは除外します。

生成した目次がここに表示されます。

詳しいガイドを読む Markdown 目次ジェネレーター:1 ファイル、4 つのアンカー方言
例・詳しい説明・よくある質問 実際の出力つきの例、ほかのツールとの違い、よくある質問。

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 が入れ子にはなりません。