Markdownの見出し階層とは？

Markdown の見出しは # 記号を使用して定義されます — H1 には 1 つの #、H2 には 2 つ、最大 6 つまで H6 に対応します。これらは目次に似た、ドキュメントの構造的な基盤を形成します。適切に構造化されたドキュメントは、論理的でネストされた順序で見出しを使用します：H1 をトップレベルのタイトル、H2 をメインセクション、H3 をサブセクションなど。

見出しが順序外で使用されている場合（例えば、H2 から直接 H4 にジャンプする場合）、セマンティックアウトラインが破損し、アクセシビリティ（スクリーンリーダーは見出しの順序に依存）と SEO（検索エンジンは見出しを使用してコンテンツ階層を理解）に悪影響を与える可能性があります。階層を視覚化すると、公開前にこれらの問題を簡単に特定できます。

ツールの説明

このツールは Markdown テキストを解析し、すべての # ベースの見出しをインタラクティブで折りたたみ可能なツリーとして表示します。ドキュメントの構造を一目で確認でき、スキップされた見出しレベルを特定し、各タイプの見出しの数をカウントできます。

フェンスで囲まれたコードブロック（``` または ~~~）内の見出しは無視されるため、出力は実際のドキュメント構造のみを反映します。

例

入力：

# Getting Started

## Installation

### Prerequisites

### Steps

## Configuration

# Advanced Usage

## Plugins

出力ツリー：

H1  Getting Started
├── H2  Installation
│   ├── H3  Prerequisites
│   └── H3  Steps
└── H2  Configuration
H1  Advanced Usage
└── H2  Plugins

機能

  • Markdown テキストからすべての H1～H6 見出しを解析
  • 見出しをインタラクティブで折りたたみ可能なツリーとして展開/折りたたみコントロール付きでレンダリング
  • フェンスで囲まれたコードブロック（``` および ~~~）内の見出しをスキップ
  • レベルごとの見出し数（H1～H6）と総見出し数を表示
  • 設定可能な初期展開深度をサポート

ユースケース

  • ドキュメントレビュー — 長い README またはドキュメントページが、公開前に一貫性のある適切に順序付けられた見出し構造を持っているかを確認します。
  • SEO 監査 — Web 用のコンテンツが、検索エンジンクローラーがページ構造を理解するのに役立つ単一の H1 と論理的な H2/H3 ネストを使用しているかを確認します。
  • アクセシビリティチェック — 見出しレベルがスキップされていないことを確認します。これは WCAG ガイドラインでフラグが立てられる一般的なアクセシビリティの問題です。

仕組み

このツールは Markdown ソースを 1 行ずつスキャンします。1～6 個の # 文字の後にスペースが続く行は見出しとして扱われます。2 パスアルゴリズムは最初にすべての見出しを順序通りに収集し、次にオープンな親ノードのスタックを追跡してツリーを構築します — 各新しい見出しは、その直前の最も近い低レベルの見出しの下にネストされます。

ヒント

  • フロントマターを含む完全な Markdown ファイルを貼り付けます — このツールは見出し以外の行を無視するため、YAML フロントマターと本文は出力に影響しません。
  • 初期展開深度設定を使用して、深いネストレベルを自動的に折りたたみ、まず高レベルの概要を取得します。
  • 大きなドキュメントを探索する前にすべて展開のチェックを外して、折りたたまれた状態で開始し、特定のセクションにドリルダウンします。