Markdown Heading Hierarchy Visualizer
Fügen Sie Markdown ein und visualisieren Sie die Überschriftenstruktur als interaktiven Baum. Analysieren Sie h1–h6-Hierarchie, erkennen Sie Verschachtelungsprobleme und zeigen Sie Überschriftenstatistiken an.
Eingabe
Ausgabe
Readme
Was ist eine Markdown-Überschriftenhierarchie?
Markdown-Überschriften werden mit dem Symbol # definiert — ein # für H1, zwei für H2, bis zu sechs für H6. Sie bilden das strukturelle Gerüst eines Dokuments, ähnlich wie ein Inhaltsverzeichnis. Ein gut strukturiertes Dokument verwendet Überschriften in einer logischen, verschachtelten Reihenfolge: H1 als Titel auf oberster Ebene, H2 für Hauptabschnitte, H3 für Unterabschnitte und so weiter.
Wenn Überschriften nicht in der richtigen Reihenfolge verwendet werden — zum Beispiel wenn man direkt von H2 zu H4 springt — wird die semantische Gliederung unterbrochen und kann die Barrierefreiheit beeinträchtigen (Bildschirmleser verlassen sich auf die Überschriftenreihenfolge) und die SEO schädigen (Suchmaschinen verwenden Überschriften, um die Inhaltshierarchie zu verstehen). Die Visualisierung der Hierarchie macht es einfach, diese Probleme vor der Veröffentlichung zu erkennen.
Werkzeugbeschreibung
Dieses Werkzeug analysiert Markdown-Text und zeigt alle #-basierten Überschriften als interaktiven, zusammenklappbaren Baum an. Sie können auf einen Blick sehen, wie Ihr Dokument strukturiert ist, übersprungene Überschriftenebenen identifizieren und zählen, wie viele Überschriften jedes Typs vorhanden sind.
Überschriften in eingezäunten Codeblöcken (``` oder ~~~) werden ignoriert, daher spiegelt die Ausgabe nur die tatsächliche Dokumentstruktur wider.
Beispiele
Eingabe:
# Getting Started
## Installation
### Prerequisites
### Steps
## Configuration
# Advanced Usage
## PluginsAusgabebaum:
H1 Getting Started
├── H2 Installation
│ ├── H3 Prerequisites
│ └── H3 Steps
└── H2 Configuration
H1 Advanced Usage
└── H2 PluginsFunktionen
- Analysiert alle H1–H6-Überschriften aus beliebigem Markdown-Text
- Rendert Überschriften als interaktiven, zusammenklappbaren Baum mit Expand/Collapse-Steuerelementen
- Überspringt Überschriften in eingezäunten Codeblöcken (
```und~~~) - Zeigt Überschriftenzählungen pro Ebene (H1–H6) und eine Gesamtüberschriftenzählung an
- Unterstützt konfigurierbare anfängliche Expansionstiefe
Anwendungsfälle
- Dokumentationsprüfung — Überprüfen Sie, dass eine lange README oder Dokumentationsseite eine konsistente, gut geordnete Überschriftenstruktur vor der Veröffentlichung hat.
- SEO-Audit — Überprüfen Sie, dass Inhalte für das Web eine einzelne H1 und logische H2/H3-Verschachtelung verwenden, um Suchmaschinen-Crawlern die Seitenstruktur zu verstehen zu helfen.
- Barrierefreiheitsprüfung — Stellen Sie sicher, dass Überschriftenebenen nicht übersprungen werden, was ein häufiges Barrierefreiheitsproblem ist, das durch WCAG-Richtlinien gekennzeichnet ist.
Funktionsweise
Das Werkzeug scannt die Markdown-Quelle Zeile für Zeile. Jede Zeile, die mit einem bis sechs #-Zeichen gefolgt von einem Leerzeichen beginnt, wird als Überschrift behandelt. Ein Zwei-Pass-Algorithmus sammelt zunächst alle Überschriften in der Reihenfolge, erstellt dann einen Baum, indem er einen Stapel offener übergeordneter Knoten verfolgt — jede neue Überschrift wird unter der nächsten vorherigen Überschrift einer niedrigeren Ebene verschachtelt.
Tipps
- Fügen Sie eine vollständige Markdown-Datei ein, einschließlich Front Matter — das Werkzeug ignoriert Nicht-Überschriftenzeilen, daher beeinflussen YAML Front Matter und Textkörper die Ausgabe nicht.
- Verwenden Sie die Einstellung Anfängliche Expansionstiefe, um tiefe Verschachtelungsebenen automatisch zu reduzieren und zunächst einen Überblick auf hoher Ebene zu erhalten.
- Deaktivieren Sie Alle erweitern, bevor Sie ein großes Dokument erkunden, um zusammengeklappt zu beginnen und in bestimmte Abschnitte zu bohren.