ZeroTool Workbench

Markdown 目次ジェネレーター

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

100% クライアントサイド データはブラウザ外に出ません 無料 · 登録不要

<!-- toc --> ... <!-- /toc --> マーカー間の目次を置換

目次

関連ツール

Markdown Linter Markdownのスタイル・フォーマットエラーをリアルタイム検出。ルールID・行番号付きでクリックジャンプ対応。ブラウザ完結。 Markdown テーブルジェネレーター Markdownテーブルをビジュアルに構築。CSV・JSONインポート、フォーマット済みテーブルをコピー。 スラグ生成 テキストをURLフレンドリーなスラグに変換。Unicode処理・カスタム区切り文字対応。 Markdown プレビュー リアルタイムHTMLプレビュー付きMarkdownエディタ。GFMテーブル・タスクリスト・コードブロック対応。 テキストケース変換 大文字・小文字・タイトルケース・キャメルケース・スネークケースなどに変換。 Markdown → Word 変換 MarkdownをWord（.docx）ファイルに即座に変換。見出し・太字/斜体・リスト・表・コードブロック対応。ブラウザ完結でドキュメントをアップロードしません。

使い方

  1. 左側の入力エリアに Markdown を貼り付けます。
  2. アンカー形式 でターゲット — GitHub / Hugo、GitLab、Jekyll、Bitbucket — を選択。
  3. 最小見出しレベル と 最大見出しレベル で目次に含める階層を絞り込みます。
  4. ドキュメントタイトルがテンプレートで別途レンダリングされる場合は、H1 を含む をオフにしてください。
  5. 生成された目次をコピーするか、マーカーモード をオンにして <!— toc —> マーカー入りの完全な Markdown を取得します。

4 つのアンカー形式

  • GitHub / Hugo — 小文字化、句読点除去、空白をハイフンに、Unicode は保持。Hugo は v0.62 以降 goldmark で GitHub と同じ規則を採用。
  • GitLab — GitHub と同じ規則に加え、連続するハイフンを 1 つに圧縮。GitLab Flavored Markdown のレンダリングと一致。
  • Jekyll（kramdown classic） — 非 ASCII を先に除去してから slug 化。Unicode 対応の slugger に切り替えていない Jekyll サイト向け。
  • Bitbucket — 全てのアンカーが markdown- プレフィックス付き、重複は -N ではなく _N。

マーカーモード

マーカーモードは目次を常に最新に保ちつつ、本文の他の部分には触れません。 目次を置きたい場所に 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 では #markdown-例 と #markdown-例_1 になります。

H1 を除外する

静的サイトが H1 を frontmatter から描画している場合は H1 を含む をオフにします。TOC は最初の H2 から始まり、インデントが 1 段階浅くなります。

FAQ

なぜアンカー形式を選ぶ必要があるのですか？

プラットフォームごとに見出しからアンカー（slug）への変換ルールが異なります。GitHub はUnicodeを保持し空白をハイフンに置換、GitLab はそれに加えて連続ハイフンを 1 つに圧縮、Jekyll / kramdown classic は非 ASCII を全て除去、Bitbucket は全てのアンカーに markdown- プレフィックスを付与します。間違った形式で生成した目次は、リンクを踏んでも目的地に飛びません。

中国語・日本語・韓国語の見出しに対応していますか？

GitHub、GitLab、Bitbucket の 3 形式は Unicode 文字をそのままアンカーに保持するため、中国語 / 日本語 / 한글 の見出しもそのまま動作します。Jekyll classic は既定で非 ASCII を剥ぎ落とすので、ターゲットが Jekyll の場合は GitHub 形式に切り替えて見出しの原文を URL に残すことを推奨します。

マーカーモードはどのように既存の目次を更新しますか？

マーカーモードを有効にすると、ツールは文書内の <!-- toc --> ... <!-- /toc --> を探し、その間の内容を新しく生成した TOC で丸ごと置換します。マーカー外の本文は一切変更されません。マーカーが未設定の場合は最初の見出しの直前に新しいマーカー付き TOC ブロックを挿入するので、コピーして元ファイルに戻すだけで完了です。

重複した見出しがあるとどうなりますか？

重複アンカーは自動的にユニーク化されます。GitHub / GitLab / Jekyll では -1、-2、-3 … が末尾に追加され、Bitbucket ではそのレンダラーに合わせて _1、_2、_3 … が使われます。生成された目次のリンクは常に一意の目的地を指します。

コードブロック内の # は見出しとして扱われますか？

扱われません。フェンスドコードブロック（``` または ~~~）で囲まれた行は全てコードとして処理され、行頭の # は見出しになりません。既存の <!-- toc --> ... <!-- /toc --> ブロックも同様にスキップされるため、ジェネレーターを繰り返し実行しても旧 TOC が入れ子にはなりません。