Générateur de table des matières
Collez Markdown ou HTML et obtenez une table des matières imbriquée et cliquable avec de véritables limaces d'ancrage anti-collision de style GitHub, ainsi que le contenu original avec les identifiants de titre injectés.
Résultat
Une table des matières n'est aussi utile que les liens d'ancrage en dessous, et les liens d'ancrage ne sont fiables que si chaque titre reçoit un slug unique et prévisible. Ce générateur analyse les titres de tout ce que vous collez - Markdown ou HTML - et attribue à chacun une véritable ancre de style GitHub : le texte en minuscules, les espaces et la ponctuation sont remplacés ou supprimés et, surtout, un véritable suffixe anti-collision chaque fois que deux titres produiraient autrement le même slug. La deuxième "Introduction" d'un document devient introduction-1, la troisième devient introduction-2, suivie avec une carte d'occurrences en cours d'exécution exactement de la même manière que fonctionne le propre slugger de GitHub - pas un raccourci qui écrase silencieusement les liens précédents lorsque les titres se répètent, ce qui est la manière la plus courante de rompre les scripts de table des matières roulés à la main.
L'analyse Markdown est volontairement basée sur les lignes, car le mode d'échec classique pour une implémentation naïve consiste à traiter un "#" écrit à l'intérieur d'un bloc de code clôturé comme un en-tête. Cet outil suit si une clôture ``` ou ~~~ est actuellement ouverte lorsqu'il parcourt le document ligne par ligne, et ne reconnaît que les en-têtes ATX (# à ######) en dehors des clôtures ouvertes - donc un exemple de code montrant des commentaires shell ou un "# commentaire" Python ne pollue jamais votre table des matières. L'entrée HTML emprunte un chemin différent, tout aussi réel : elle est analysée avec le propre DOMParser du navigateur, les titres sont sélectionnés par nom de balise et l'attribut id de chacun est défini directement sur l'élément réel avant que le document ne soit sérialisé en chaîne.
Deux choses ressortent à l’autre bout. Tout d'abord, la table des matières elle-même, exportée à la fois sous forme de liste Markdown imbriquée (- [Titre](#slug), indentée par niveau de titre) et de liste HTML imbriquée (<ul><li><a href="#slug">), chacune avec son propre bouton de copie. Deuxièmement, votre contenu original avec les ancres réellement connectées : pour l'entrée Markdown, vous pouvez choisir la syntaxe d'attribut de titre {#slug} largement prise en charge utilisée par Kramdown, Pandoc, MkDocs et Jekyll de GitHub Pages, ou revenir aux balises de titre HTML simples avec id="slug" déjà défini si votre moteur de rendu cible ne comprend pas la syntaxe des attributs. Pour la saisie HTML, l'identifiant est injecté directement dans l'élément de titre analysé - il n'y a pas de "mode" distinct à choisir car les balises existent déjà.
Tout s'exécute localement dans votre navigateur : l'analyse, le calcul des slugs et le réassemblage du document se déroulent tous en JavaScript sur la page que vous consultez actuellement, sans que rien ne soit téléchargé nulle part. Cela est important pour les brouillons de documentation, les wikis internes ou un article de blog non publié que vous n'êtes pas prêt à coller dans un service tiers juste pour obtenir une table des matières fonctionnelle.