Ein Inhaltsverzeichnis ist nur so nützlich wie die darunter liegenden Ankerlinks, und Ankerlinks sind nur dann zuverlässig, wenn jede Überschrift einen eindeutigen, vorhersehbaren Slug erhält. Dieser Generator analysiert die Überschriften aus allem, was Sie einfügen – Markdown oder HTML – und weist jeder einen echten Anker im GitHub-Stil zu: Kleinbuchstaben, Leerzeichen und Satzzeichen werden ersetzt oder entfernt und, was entscheidend ist, ein echtes kollisionssicheres Suffix, wenn zwei Überschriften sonst denselben Slug erzeugen würden. Die zweite „Einleitung“ in einem Dokument wird zu Einleitung-1, die dritte zu Einleitung-2, verfolgt mit einer laufenden Vorkommenskarte, genau so, wie GitHubs eigener Slugger funktioniert – keine Abkürzung, die stillschweigend frühere Links überschreibt, wenn sich Überschriften wiederholen, was die häufigste Art und Weise ist, wie handgerollte Inhaltsverzeichnis-Skripte kaputt gehen.

Die Markdown-Analyse erfolgt absichtlich zeilenbasiert, da der klassische Fehlermodus für eine naive Implementierung darin besteht, ein in einen umzäunten Codeblock geschriebenes „#“ als Überschrift zu behandeln. Dieses Tool verfolgt, ob derzeit ein „“- oder „~~~“-Zaun geöffnet ist, während es Zeile für Zeile durch das Dokument geht, und erkennt nur ATX-Überschriften (# bis ######) außerhalb offener Zäune – ein Codebeispiel mit Shell-Kommentaren oder ein Python-„#-Kommentar“ verunreinigt also niemals Ihr Inhaltsverzeichnis. Die HTML-Eingabe nimmt einen anderen, ebenso realen Weg: Sie wird mit dem browsereigenen DOMParser analysiert, Überschriften werden anhand des Tag-Namens ausgewählt und das jeweilige ID-Attribut wird direkt auf das eigentliche Element gesetzt, bevor das Dokument wieder in einen String serialisiert wird.

Am anderen Ende kommen zwei Dinge heraus. Erstens das Inhaltsverzeichnis selbst, das sowohl als verschachtelte Markdown-Liste (- [Titel](#slug), eingerückt nach Überschriftenebene) als auch als verschachtelte HTML-Liste (<ul><li><a href="#slug">) exportiert wird, jeweils mit einer eigenen Schaltfläche zum Kopieren. Zweitens Ihr ursprünglicher Inhalt mit den tatsächlich eingebundenen Ankern: Für die Markdown-Eingabe können Sie die weithin unterstützte {#slug}-Heading-Attribut-Syntax wählen, die von Kramdown, Pandoc, MkDocs und GitHub Pages' Jekyll verwendet wird, oder auf einfache HTML-Heading-Tags mit bereits festgelegter id="slug" zurückgreifen, wenn Ihr Zielrenderer die Attributsyntax nicht versteht. Bei der HTML-Eingabe wird die ID direkt in das analysierte Überschriftenelement eingefügt – es gibt keinen separaten „Modus“ zur Auswahl, da die Tags bereits vorhanden sind.

Alles läuft lokal in Ihrem Browser: Das Parsen, die Slug-Berechnung und die Neuzusammenstellung des Dokuments erfolgen alle in JavaScript auf der Seite, die Sie gerade betrachten, ohne dass irgendwo etwas hochgeladen wird. Das ist wichtig für Dokumentationsentwürfe, interne Wikis oder einen unveröffentlichten Blog-Beitrag, den Sie nicht in einen Drittanbieter-Dienst einfügen möchten, nur um ein funktionierendes Inhaltsverzeichnis zu erhalten.