0

Generator spisu treści

Wklej Markdown lub HTML i uzyskaj zagnieżdżony, klikalny spis treści z prawdziwymi, odpornymi na kolizje kotwicami w stylu GitHub oraz oryginalną treścią z wstrzykniętymi identyfikatorami nagłówków.

Funkcja automatycznego wykrywania najpierw szuka prawdziwych tagów

, a następnie nagłówków Markdown #.

Dodaje atrybut {#slug} po każdym nagłówku - obsługiwany przez kramdown, Pandoc, MkDocs i GitHub Pages (Jekyll).

Buy Me a Coffee at ko-fi.com
Przetwarzanie... 0%
Wykrywanie formatu treści
Analizowanie nagłówków
Przypisywanie ślimaków bezpiecznych dla kolizji
Budowanie spisu treści

Wynik

Spis treści jest na tyle użyteczny, na ile znajdują się pod nim linki kotwiczące, a linki kotwiczące są niezawodne tylko wtedy, gdy każdy nagłówek ma unikalny, przewidywalny fragment. Ten generator analizuje nagłówki z tego, co wkleisz – Markdown lub HTML – i przypisuje każdemu z nich prawdziwą kotwicę w stylu GitHub: małe litery, spacje i znaki interpunkcyjne są zastępowane lub usuwane, a także, co najważniejsze, prawdziwy, bezpieczny przed kolizją sufiks, ilekroć dwa nagłówki w przeciwnym razie spowodowałyby ten sam błąd. Drugie „Wprowadzenie” w dokumencie staje się wprowadzeniem-1, trzecie staje się wprowadzeniem-2, śledzone za pomocą działającej mapy wystąpień dokładnie tak, jak działa własny slugger GitHuba — a nie skrót, który po cichu nadpisuje wcześniejsze linki, gdy powtarzają się nagłówki, co jest najczęstszym sposobem psucia się ręcznie sporządzanych skryptów spisu treści.

Analiza Markdown jest celowo oparta na liniach, ponieważ klasycznym trybem awarii w przypadku naiwnej implementacji jest traktowanie „#” zapisanego w chronionym bloku kodu jako nagłówka. To narzędzie śledzi, czy ogrodzenie ``` lub ~~~ jest aktualnie otwarte, gdy przegląda dokument wiersz po wierszu i rozpoznaje tylko nagłówki ATX (od # do ######) poza otwartymi ogrodzeniami - więc przykładowy kod pokazujący komentarze powłoki lub „komentarz #” w języku Python nigdy nie zanieczyszcza spisu treści. Dane wejściowe HTML korzystają z innej, równie rzeczywistej ścieżki: są analizowane za pomocą własnego DOMParsera przeglądarki, nagłówki są wybierane na podstawie nazwy znacznika, a atrybut id każdego z nich jest ustawiany bezpośrednio na rzeczywistym elemencie, zanim dokument zostanie zserializowany z powrotem do ciągu znaków.

Z drugiej strony wychodzą dwie rzeczy. Najpierw sam spis treści, wyeksportowany zarówno jako zagnieżdżona lista Markdown (- [Title](#slug), wcięcie według poziomu nagłówka), jak i zagnieżdżona lista HTML (<ul><li><a href="#slug">), każda z własnym przyciskiem kopiowania. Po drugie, oryginalna treść z rzeczywiście podłączonymi kotwicami: dla danych wejściowych Markdown możesz wybrać szeroko obsługiwaną składnię atrybutu nagłówka {#slug} używaną przez kramdown, Pandoc, MkDocs i Jekyll z GitHub Pages lub powrócić do zwykłych znaczników nagłówków HTML z już ustawionym id="slug" , jeśli docelowy moduł renderujący nie rozumie składni atrybutów. W przypadku danych wejściowych HTML identyfikator jest wstrzykiwany bezpośrednio do przeanalizowanego elementu nagłówka — nie ma osobnego „trybu” do wybrania, ponieważ tagi już istnieją.

Wszystko działa lokalnie w Twojej przeglądarce: parsowanie, obliczanie ślimaka i ponowne składanie dokumentu – wszystko to dzieje się w JavaScript na stronie, którą właśnie przeglądasz, i nic nie jest nigdzie przesłane. Ma to znaczenie w przypadku wersji roboczej dokumentacji, wewnętrznych wiki lub niepublikowanego wpisu na blogu, którego nie możesz wkleić do usługi strony trzeciej, aby uzyskać działający spis treści.