Generator för innehållsförteckning
Klistra in Markdown eller HTML och få en kapslad, klickbar innehållsförteckning med äkta GitHub-liknande kollisionssäkra ankare, plus originalinnehållet med rubrik-ID:n injicerade.
Resultat
En innehållsförteckning är bara lika användbar som ankarlänkarna under den, och ankarlänkar är bara tillförlitliga om varje rubrik får en unik, förutsägbar slug. Den här generatorn analyserar rubrikerna från vad du än klistrar in - Markdown eller HTML - och tilldelar var och en ett ankare i GitHub-stil: gemener text, mellanslag och skiljetecken ersätts eller tas bort, och, kritiskt, ett äkta kollisionssäkert suffix när två rubriker annars skulle producera samma snigel. Den andra "Introduktion" i ett dokument blir introduktion-1, den tredje blir introduktion-2, spårad med en löpande förekomstkarta exakt så som GitHubs egen slugger fungerar - inte en genväg som tyst skriver över tidigare länkar när rubriker upprepas, vilket är det enskilt vanligaste sättet att handrullade innehållsförteckningsskript går sönder.
Markdown-parsning är linjebaserad med avsikt, eftersom det klassiska felläget för en naiv implementering behandlar ett "#" skrivet inuti ett inhägnat kodblock som en rubrik. Det här verktyget spårar om ett ```- eller ~~~-stängsel för närvarande är öppet när det går igenom dokumentet rad för rad, och känner bara igen ATX-rubriker (# till ######) utanför öppna staket - så ett kodexempel som visar skalkommentarer eller en Python "#-kommentar" förorenar aldrig din innehållsförteckning. HTML-inmatning tar en annan, lika verklig väg: den tolkas med webbläsarens egen DOMParser, rubriker väljs efter taggnamn och var och ens id-attribut sätts direkt på det faktiska elementet innan dokumentet serialiseras tillbaka till en sträng.
Två saker kommer ut i andra änden. Först, själva innehållsförteckningen, exporterad som både en kapslad Markdown-lista (- [Titel](#slug), indragen efter rubriknivå) och en kapslad HTML-lista (<ul><li><a href="#slug">), var och en med sin egen kopieringsknapp. För det andra, ditt ursprungliga innehåll med ankare som faktiskt är anslutna: för Markdown-inmatning kan du välja den allmänt stödda {#slug} rubrikattributsyntax som används av kramdown, Pandoc, MkDocs och GitHub Pages Jekyll, eller falla tillbaka till vanliga HTML-rubriktaggar med id="slug" redan inställt om din målrenderare inte förstår syntax. För HTML-inmatning injiceras id direkt i det analyserade rubrikelementet - det finns inget separat "läge" att välja eftersom taggarna redan finns.
Allt körs lokalt i din webbläsare: analysen, slug-matematiken och dokumentåtersättningen sker alla i JavaScript på sidan du tittar på just nu, utan att ingenting laddas upp någonstans. Det har betydelse för utkast till dokumentation, interna wikis eller ett opublicerat blogginlägg som du inte är redo att klistra in i en tredjepartstjänst bara för att få en fungerande innehållsförteckning.