📑 Markdown目次(TOC)生成

Markdownを貼り付けると、見出し(#######)を抽出して、アンカーリンク付きの目次(Table of Contents)を生成します。GitHub式のスラッグ化、含める見出しレベルの指定、箇条書き/番号付きの切り替え、コードブロック内の # の無視に対応。すべてブラウザ内で処理し、入力内容は送信されません。

入力とオプション

見出し行(行頭の # と半角スペース)から目次を作ります。

目次のスタイル

生成された目次(Markdown)

アンカーの作り方(GitHub式)

1見出しテキストを小文字化する
2記号(! " # $ % & ( ) など)を削除する
3半角スペースをハイフン(-)に置き換える
4日本語・アンダースコア・ハイフンはそのまま残す
5同じアンカーが重複したら -1, -2 … を付けて区別する

例: 「Section A」→ #section-a。GitHub / GitLab などのMarkdownレンダラーが自動で付ける見出しアンカーに合わせています(環境により細部は異なる場合があります)。

解説

Markdown目次(TOC)生成は、Markdown本文の見出し(ATX形式の # 〜 ######)を読み取り、ネストした箇条書きの目次(Table of Contents)を自動で組み立てるツールです。各見出しには「#アンカー」付きのリンクを添えるため、GitHubのREADMEやIssue、ブログ記事、ドキュメントの冒頭にそのまま貼り付ければ、クリックで該当セクションへ飛べる目次になります。入力・変換・出力はすべてブラウザ内で完結し、本文はどこにも送信されません。

アンカーはGitHub(github-slugger)系の一般的な規則でスラッグ化します。具体的には、見出しテキストを小文字化し、記号(! " # $ % & ( ) * + , . / : ; < = > ? @ [ ] ^ ` { | } ~ など)を削除し、半角スペースをハイフンに置き換えます。アンダースコアとハイフンはそのまま残り、日本語などの文字も原則そのまま使われます。例えば「Section A」は #section-a、「使い方 (基本)」は #使い方-基本 になります。同じ見出しが複数あるときは、2つ目以降に -1, -2 … を付けて重複を避けます。

見出しの装飾は表示テキストへ簡約してからアンカー化します。リンク [表示](url) は「表示」、画像 ![alt](url) は「alt」、インラインコード `code` は「code」、**強調** や *斜体* は装飾記号を外したテキストとして扱います。これにより、見出しにリンクや書式が含まれていても、実際のレンダリング結果に近いアンカーとラベルが得られます。含める見出しのレベル範囲(例: H2〜H3のみ)を指定でき、範囲内で最も浅いレベルを基準に相対的な深さでインデントします。

コードフェンス(``` または ~~~ で囲まれたブロック)の内側にある # 行は、既定では見出しとして扱いません。シェルのコメントやプログラムの # を目次に拾わないための配慮で、必要に応じてオフにもできます。対象はATX見出しで、行頭の # と本文の間に半角スペースが必要です(GitHub互換)。なお見出しアンカーの細かな仕様はレンダラー(GitHub / GitLab / 各種静的サイトジェネレーター)ごとに差があるため、最終的な表示先で一度リンクの動作を確認することをおすすめします。

よくある質問

対応している見出しの書き方は?

行頭に # を1〜6個置き、その後ろに半角スペースを入れるATX見出し(例: ## 見出し)に対応します。GitHubと同じく、# と本文の間に半角スペースが無い行(例: ##見出し)は見出しとして扱いません。=== や --- を下線に使うSetext見出しには未対応です。

アンカーはどんな規則で作られますか?

GitHub系の一般規則です。小文字化し、記号を削除し、半角スペースをハイフンに置換します。アンダースコアとハイフンは保持し、日本語などの文字はそのまま残します。例: 「Section A」→ #section-a、「My_Notes」→ #my_notes。

同じ見出しが複数あるとアンカーは重複しませんか?

重複しません。2つ目以降の同名見出しには -1, -2 … を自動で付けて区別します。GitHubのレンダリングと同じ挙動です。

特定のレベルだけ目次に載せたいです。

「含める最小レベル」「含める最大レベル」で範囲を指定してください。例えばH2〜H3にすると、# のタイトルや細かいH4以下を除いた、章・節だけの目次になります。

コードブロック内の # が見出しとして拾われてしまいます。

「コードブロック内の # を無視する」をオンにしてください(既定でオン)。``` または ~~~ で囲まれた範囲の # 行は見出しから除外されます。

見出しにリンクや太字が含まれる場合はどうなりますか?

表示テキストへ簡約してから処理します。[表示](url) は「表示」、`code` は「code」、**強調** は「強調」として扱い、その文字列でラベルとアンカーを作ります。

番号付き目次にできますか?

できます。スタイルで「番号付き(1.)」を選ぶと、各項目が 1. で始まるMarkdownの順序付きリストになります。ネストした階層もそのまま入れ子の番号付きリストになります。

入力したMarkdownはサーバーに送られますか?

送られません。抽出・スラッグ化・目次生成はすべてブラウザ内で行われ、本文はどこにも送信されません。オフラインでも利用できます。