Tartalomjegyzék-generátor
Illessze be a Markdown-t vagy a HTML-t, és kapjon egy beágyazott, kattintható tartalomjegyzéket valódi GitHub-stílusú, ütközésbiztos horgonyzókkal, valamint az eredeti tartalommal, beillesztve a címsorazonosítókkal.
Eredmény
A tartalomjegyzék csak annyira hasznos, mint az alatta lévő horgonyhivatkozások, és a horgonyhivatkozások csak akkor megbízhatóak, ha minden címsor egyedi, kiszámítható csigát kap. Ez a generátor elemzi a fejléceket a beillesztett elemekből – Markdown vagy HTML –, és mindegyikhez rendel egy igazi GitHub-stílusú horgonyt: a kisbetűket, a szóközöket és az írásjeleket cseréljük vagy töröljük, és ami kritikus szempont, valódi ütközésbiztos utótagot ad, ha két címsor egyébként ugyanazt a csigát hozná létre. A dokumentumban a második „Bevezetés” a bevezetés-1 lesz, a harmadik pedig a bevezetés-2, amelyet egy futó előfordulási térkép pontosan úgy követ, ahogyan a GitHub saját sluggere működik – nem egy parancsikon, amely csendben felülírja a korábbi hivatkozásokat, amikor a címsorok ismétlődnek, ami az egyetlen leggyakoribb módja a kézzel görgetett tartalomjegyzék-szkriptek törésének.
A Markdown-elemzés a célnak megfelelően soralapú, mivel a naiv megvalósítás klasszikus hibamódja az elkerített kódblokkba írt "#"-t fejlécként kezeli. Ez az eszköz nyomon követi, hogy egy ``` vagy ~~~ kerítés nyitva van-e, miközben soronként halad a dokumentumon, és csak az ATX-fejléceket (#-tól ######-ig) ismeri fel a nyitott kerítéseken kívül – így a shell megjegyzéseket mutató kódminta vagy egy Python "# megjegyzés" soha nem szennyezi be a tartalomjegyzéket. A HTML bevitel más, ugyanolyan valós útvonalat használ: a böngésző saját DOMParser-jével elemzi, a címsorokat a címkenév választja ki, és mindegyik id attribútuma közvetlenül az aktuális elemen van beállítva, mielőtt a dokumentumot visszasoroznák egy karakterláncra.
Két dolog jön ki a másik végén. Először is magát a tartalomjegyzéket, beágyazott lejelölőlistaként (- [Cím](#slug), címsorszint szerint behúzva) és beágyazott HTML-listaként (<ul><li><a href="#slug">) exportálva, mindegyik saját másolás gombbal. Másodszor, az eredeti tartalom ténylegesen be van kötve a horgonyokkal: a Markdown bemenethez kiválaszthatja a Kramdown, a Pandoc, az MkDocs és a GitHub Pages Jekyll által használt, széles körben támogatott {#slug} címsor-attribútum szintaxist, vagy visszatérhet a sima HTML fejléccímkékre az id="slug"-val, ha a synta attribútum nem érti a célmegjelenítő attribútumot. HTML bevitel esetén az azonosító közvetlenül az elemzett címsor elembe kerül – nincs külön „mód”, amelyet ki kell választani, mert a címkék már léteznek.
Minden helyileg fut a böngészőben: az elemzés, a slug-matematika és a dokumentum-összeállítás mind JavaScriptben történik az éppen megtekintett oldalon, és semmi sincs feltöltve. Ez számít a dokumentációvázlatok, a belső wikik vagy egy olyan közzé nem tett blogbejegyzés esetében, amelyet nem szeretne beilleszteni egy harmadik féltől származó szolgáltatásba, csak azért, hogy működő tartalomjegyzéket kapjon.