0

Generator for innholdsfortegnelse

Lim inn Markdown eller HTML og få en nestet, klikkbar innholdsfortegnelse med ekte GitHub-stil kollisjonssikre ankersnegler, pluss det originale innholdet med overskrifts-IDer injisert.

Auto-detect ser etter ekte

-

-koder først, deretter Markdown # overskrifter.

Legger til et {#slug}-attributt etter hver overskrift – støttet av kramdown, Pandoc, MkDocs og GitHub Pages (Jekyll).

Buy Me a Coffee at ko-fi.com
Behandler... 0%
Oppdager innholdsformat
Parsing av overskrifter
Tilordning av kollisjonssikre snegler
Bygge innholdsfortegnelse

Resultat

En innholdsfortegnelse er bare så nyttig som ankerlenkene under den, og ankerlenkene er bare pålitelige hvis hver overskrift får en unik, forutsigbar slug. Denne generatoren analyserer overskriftene ut av det du limer inn - Markdown eller HTML - og tildeler hver enkelt et ekte GitHub-anker: små bokstaver, mellomrom og tegnsetting erstattet eller fjernet, og, kritisk, et ekte kollisjonssikkert suffiks når to overskrifter ellers ville produsert samme slug. Den andre "Introduksjon" i et dokument blir introduksjon-1, den tredje blir introduksjon-2, sporet med et løpende forekomstkart nøyaktig slik GitHubs egen slugger fungerer - ikke en snarvei som stille overskriver tidligere lenker når overskrifter gjentas, som er den vanligste måten håndrullede innholdsfortegnelser bryter på.

Markdown-parsing er linjebasert med vilje, fordi den klassiske feilmodusen for en naiv implementering behandler en "#" skrevet inne i en inngjerdet kodeblokk som en overskrift. Dette verktøyet sporer om et ```- eller ~~~-gjerde for øyeblikket er åpent mens det går gjennom dokumentet linje for linje, og gjenkjenner bare ATX-overskrifter (# til ######) utenfor åpne gjerder - så et kodeeksempel som viser skallkommentarer eller en Python-"#-kommentar" forurenser aldri innholdsfortegnelsen din. HTML-inndata tar en annen, like reell bane: den analyseres med nettleserens egen DOMParser, overskrifter velges etter tagnavn, og hver enkelts id-attributt settes direkte på det faktiske elementet før dokumentet serialiseres tilbake til en streng.

To ting kommer ut i den andre enden. Først selve innholdsfortegnelsen, eksportert som både en nestet Markdown-liste (- [Tittel](#slug), rykket inn etter overskriftsnivå) og en nestet HTML-liste (<ul><li><a href="#slug">), hver med sin egen kopieringsknapp. For det andre, det opprinnelige innholdet ditt med ankrene som faktisk er koblet inn: For Markdown-inndata kan du velge den bredt støttede {#slug} overskriftsattributtsyntaksen som brukes av kramdown, Pandoc, MkDocs og GitHub Pages' Jekyll, eller falle tilbake til vanlige HTML-overskriftstagger med id="slug" allerede angitt hvis målgjengiveren ikke forstår syntaksen. For HTML-inndata injiseres ID-en rett inn i det analyserte overskriftselementet - det er ingen egen "modus" å velge fordi kodene allerede eksisterer.

Alt kjører lokalt i nettleseren din: parsingen, slug-matematikken og dokumentremonteringen skjer alle i JavaScript på siden du ser på akkurat nå, uten at ingenting er lastet opp noe sted. Det har betydning for utkast til dokumentasjon, interne wikier eller et upublisert blogginnlegg du ikke er klar til å lime inn i en tredjepartstjeneste bare for å få en fungerende innholdsfortegnelse.