0

Генератор змісту (Table of Contents)

Вставте Markdown або HTML — отримайте вкладений клікабельний зміст із реальними колізієстійкими якорями-слагами у стилі GitHub і вихідний текст із вбудованими ID заголовків.

Автовизначення спершу шукає справжні теги

-

, потім заголовки Markdown #.

Додає атрибут {#slug} після кожного заголовка — підтримується kramdown, Pandoc, MkDocs і GitHub Pages (Jekyll).

Buy Me a Coffee at ko-fi.com
Опрацювання... 0%
Визначення формату вмісту
Розбір заголовків
Присвоєння колізієстійких слагів
Побудова змісту

Результат

Зміст документа корисний рівно настільки, наскільки надійні якорі під ним, а якорі надійні лише тоді, коли кожен заголовок отримує унікальний, передбачуваний слаг. Цей генератор розбирає заголовки з того, що ви вставили — 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 просто на цій сторінці, без жодного завантаження кудись. Це важливо для чернеток документації, внутрішніх вікі чи ще не опублікованого допису в блозі, який ви не готові вставляти у стороній сервіс лише заради робочого змісту.