Inhoudsopgave Generator
Plak Markdown of HTML en krijg een geneste, klikbare inhoudsopgave met echte botsingsveilige ankerslugs in GitHub-stijl, plus de originele inhoud met geïnjecteerde kop-ID's.
Resultaat
Een inhoudsopgave is slechts zo nuttig als de ankerlinks eronder, en ankerlinks zijn alleen betrouwbaar als elke kop een unieke, voorspelbare slug krijgt. Deze generator ontleedt de kopteksten van wat je ook plakt - Markdown of HTML - en kent elke kop een echt anker in GitHub-stijl toe: kleine letters, spaties en interpunctie vervangen of verwijderd, en, cruciaal, een echt botsingsveilig achtervoegsel wanneer twee kopteksten anders dezelfde slug zouden produceren. De tweede "Introductie" in een document wordt introductie-1, de derde wordt introductie-2, bijgehouden met een lopende gebeurteniskaart, precies zoals GitHub's eigen slugger werkt - geen snelkoppeling die stilletjes eerdere links overschrijft wanneer kopteksten herhalen, wat de meest voorkomende manier is waarop met de hand gerolde inhoudsopgavescripts kapot gaan.
Markdown-parsing is met opzet op regels gebaseerd, omdat de klassieke foutmodus voor een naïeve implementatie een "#" geschreven in een afgeschermd codeblok als kop behandelt. Deze tool houdt bij of een ``` of ~~~ hek momenteel open is terwijl het regel voor regel door het document loopt, en herkent alleen ATX-koppen (# tot en met ######) buiten open hekken - dus een codevoorbeeld dat shell-opmerkingen toont of een Python "# commentaar" vervuilt nooit uw inhoudsopgave. HTML-invoer volgt een ander, even reëel pad: het wordt geparseerd met de eigen DOMParser van de browser, koppen worden geselecteerd op tagnaam en het id-attribuut van elk element wordt rechtstreeks op het eigenlijke element ingesteld voordat het document weer in een string wordt geserialiseerd.
Aan de andere kant komen er twee dingen naar voren. Ten eerste de inhoudsopgave zelf, geëxporteerd als zowel een geneste Markdown-lijst (- [Titel](#slug), ingesprongen op kopniveau) als een geneste HTML-lijst (<ul><li><a href="#slug">), elk met zijn eigen kopieerknop. Ten tweede, je originele inhoud met de ankers die daadwerkelijk zijn aangesloten: voor Markdown-invoer kun je de breed ondersteunde {#slug} header-attribute-syntaxis kiezen die wordt gebruikt door kramdown, Pandoc, MkDocs en GitHub Pages' Jekyll, of terugvallen op gewone HTML-header-tags met id = "slug" al ingesteld als je doelrenderer de attribuutsyntaxis niet begrijpt. Voor HTML-invoer wordt de id rechtstreeks in het geparseerde kopelement geïnjecteerd. Er is geen aparte "modus" om te kiezen omdat de tags al bestaan.
Alles draait lokaal in uw browser: het parseren, het berekenen van de slug en het opnieuw samenstellen van documenten gebeurt allemaal in JavaScript op de pagina die u nu bekijkt, zonder dat er ergens iets wordt geüpload. Dat is van belang voor conceptdocumentatie, interne wiki's of een niet-gepubliceerde blogpost die u nog niet in een service van derden wilt plakken, alleen maar om een werkende inhoudsopgave te krijgen.