Co to jest hierarchia nagłówków Markdown?

Nagłówki Markdown są definiowane za pomocą symbolu # — jeden # dla H1, dwa dla H2, aż do sześciu dla H6. Tworzą one strukturalny szkielet dokumentu, podobnie jak spis treści. Dobrze ustrukturyzowany dokument używa nagłówków w logicznym, zagnieżdżonym porządku: H1 jako tytuł najwyższego poziomu, H2 dla głównych sekcji, H3 dla podsekcji i tak dalej.

Gdy nagłówki są używane poza kolejnością — na przykład przeskakując bezpośrednio z H2 na H4 — narusza to semantyczny zarys i może zaszkodzić dostępności (czytniki ekranu polegają na kolejności nagłówków) i SEO (wyszukiwarki używają nagłówków do zrozumienia hierarchii treści). Wizualizacja hierarchii ułatwia dostrzeżenie tych problemów przed publikacją.

Opis narzędzia

To narzędzie analizuje tekst Markdown i wyświetla wszystkie nagłówki oparte na # jako interaktywne, zwijane drzewo. Możesz na pierwszy rzut oka zobaczyć, jak dokument jest ustrukturyzowany, zidentyfikować pominięte poziomy nagłówków i policzyć, ile nagłówków każdego typu jest obecnych.

Nagłówki wewnątrz ogrodzonych bloków kodu (``` lub ~~~) są ignorowane, więc wynik odzwierciedla tylko rzeczywistą strukturę dokumentu.

Przykłady

Wejście:

# Getting Started

## Installation

### Prerequisites

### Steps

## Configuration

# Advanced Usage

## Plugins

Drzewo wyjściowe:

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

Funkcje

  • Analizuje wszystkie nagłówki H1–H6 z dowolnego tekstu Markdown
  • Renderuje nagłówki jako interaktywne, zwijane drzewo z kontrolkami rozwijania/zwijania
  • Pomija nagłówki wewnątrz ogrodzonych bloków kodu (``` i ~~~)
  • Wyświetla liczby nagłówków na poziom (H1–H6) i całkowitą liczbę nagłówków
  • Obsługuje konfigurowalną głębokość początkowego rozwinięcia

Przypadki użycia

  • Przegląd dokumentacji — Sprawdź, czy długi plik README lub strona dokumentacji ma spójną, dobrze uporządkowaną strukturę nagłówków przed publikacją.
  • Audyt SEO — Sprawdź, czy treść przeznaczona dla sieci web używa jednego H1 i logicznego zagnieżdżenia H2/H3, aby pomóc crawlerom wyszukiwarek zrozumieć strukturę strony.
  • Sprawdzanie dostępności — Upewnij się, że poziomy nagłówków nie są pomijane, co jest częstym problemem dostępności wskazywanym przez wytyczne WCAG.

Jak to działa

Narzędzie skanuje źródło Markdown linia po linii. Każda linia, która zaczyna się od jednego do sześciu znaków # następowanych spacją, jest traktowana jako nagłówek. Algorytm dwuprzebiegowy najpierw zbiera wszystkie nagłówki w kolejności, a następnie buduje drzewo, śledząc stos otwartych węzłów nadrzędnych — każdy nowy nagłówek jest zagnieżdżony pod najbliższym poprzedzającym nagłówkiem niższego poziomu.

Porady

  • Wklej pełny plik Markdown, w tym front matter — narzędzie ignoruje linie bez nagłówków, więc front matter YAML i tekst treści nie będą wpływać na wynik.
  • Użyj ustawienia Głębokość początkowego rozwinięcia, aby automatycznie zwinąć głębokie poziomy zagnieżdżenia i najpierw uzyskać przegląd wysokiego poziomu.
  • Odznacz Rozwiń wszystko przed eksplorацją dużego dokumentu, aby rozpocząć zwinięte i przejść do określonych sekcji.