Генератор змісту (Table of Contents)
Вставте Markdown або HTML — отримайте вкладений клікабельний зміст із реальними колізієстійкими якорями-слагами у стилі GitHub і вихідний текст із вбудованими ID заголовків.
Результат
Зміст документа корисний рівно настільки, наскільки надійні якорі під ним, а якорі надійні лише тоді, коли кожен заголовок отримує унікальний, передбачуваний слаг. Цей генератор розбирає заголовки з того, що ви вставили — Markdown чи HTML — і присвоює кожному реальний якір у стилі GitHub: текст у нижньому регістрі, пробіли та пунктуація замінені або прибрані, і, що найважливіше, справжній колізієстійкий суфікс щоразу, коли два заголовки інакше дали б однаковий слаг. Другий заголовок "Вступ" стає vstup-1, третій — vstup-2, і все це відстежується мапою входжень так само, як це робить власний алгоритм слагів GitHub — без "тихого" перезапису попередніх посилань при повторі заголовків, а це найпоширеніший спосіб, яким ламаються саморобні скрипти для змісту.
Розбір Markdown навмисно побудований порядково (line-by-line), бо класична помилка наївної реалізації — сприймати "#" усередині огородженого код-блоку як заголовок. Цей інструмент відстежує, чи відкрито зараз огорожу ``` чи ~~~, проходячи документ рядок за рядком, і розпізнає ATX-заголовки (від # до ######) лише поза відкритими огорожами — тож приклад коду з коментарями шелла чи "# коментар" на Python ніколи не потрапить у ваш зміст. HTML-вхід іде іншим, так само реальним шляхом: він розбирається власним DOMParser браузера, заголовки вибираються за назвою тегу, і атрибут id кожного встановлюється напряму на реальному елементі перед тим, як документ серіалізується назад у рядок.
На виході — дві речі. По-перше, сам зміст, експортований і як вкладений список Markdown (- [Заголовок](#slug), з відступом за рівнем заголовка), і як вкладений список HTML (<ul><li><a href="#slug">), кожен зі своєю кнопкою копіювання. По-друге, ваш вихідний вміст із реально підключеними якорями: для Markdown можна обрати поширений синтаксис атрибута заголовка {#slug}, який підтримують kramdown, Pandoc, MkDocs і Jekyll на GitHub Pages, або перейти на звичайні HTML-теги заголовків із уже встановленим id="slug", якщо ваш рушій не розуміє синтаксис атрибутів. Для HTML-входу id вбудовується прямо в розібраний елемент заголовка — окремого "режиму" тут обирати не треба, бо теги вже існують.
Усе відбувається локально у вашому браузері: розбір, математика слагів і збірка документа — все це JavaScript просто на цій сторінці, без жодного завантаження кудись. Це важливо для чернеток документації, внутрішніх вікі чи ще не опублікованого допису в блозі, який ви не готові вставляти у стороній сервіс лише заради робочого змісту.