0

Generador de tabla de contenidos

Pegue Markdown o HTML y obtenga una tabla de contenido anidada en la que se puede hacer clic con barras de anclaje reales a prueba de colisiones estilo GitHub, además del contenido original con ID de encabezado inyectados.

La detección automática busca etiquetas

-

reales primero y luego los encabezados Markdown #.

Agrega un atributo {#slug} después de cada encabezado; compatible con kramdown, Pandoc, MkDocs y GitHub Pages (Jekyll).

Buy Me a Coffee at ko-fi.com
Procesando... 0%
Detectar formato de contenido
Análisis de encabezados
Asignar slugs seguros contra colisiones
Construyendo tabla de contenidos

Resultado

Una tabla de contenido es tan útil como los enlaces de anclaje que se encuentran debajo de ella, y los enlaces de anclaje solo son confiables si cada título tiene un texto único y predecible. Este generador analiza los encabezados de cualquier cosa que pegue (Markdown o HTML) y asigna a cada uno un ancla real al estilo GitHub: texto en minúsculas, espacios y puntuación reemplazados o eliminados y, críticamente, un sufijo genuino a prueba de colisiones siempre que dos encabezados producirían el mismo slug. La segunda "Introducción" en un documento se convierte en introducción-1, la tercera se convierte en introducción-2, rastreada con un mapa de ocurrencia en ejecución exactamente de la misma manera que funciona el propio slugger de GitHub, no un atajo que sobrescribe silenciosamente enlaces anteriores cuando se repiten los encabezados, que es la forma más común en que se rompen los scripts de tablas de contenido enrollados a mano.

El análisis de Markdown se basa en líneas a propósito, porque el modo de falla clásico para una implementación ingenua es tratar un "#" escrito dentro de un bloque de código cercado como un encabezado. Esta herramienta rastrea si hay una barrera ``` o ~~~ actualmente abierta a medida que recorre el documento línea por línea, y solo reconoce encabezados ATX (# a ######) fuera de las barreras abiertas, por lo que un ejemplo de código que muestra comentarios de shell o un "# comentario" de Python nunca contamina su tabla de contenido. La entrada HTML toma una ruta diferente, igualmente real: se analiza con el propio DOMParser del navegador, los encabezados se seleccionan por nombre de etiqueta y el atributo id de cada uno se establece directamente en el elemento real antes de que el documento se serialice nuevamente en una cadena.

Del otro lado salen dos cosas. Primero, la tabla de contenido en sí, exportada como una lista Markdown anidada (- [Título](#slug), con sangría por nivel de encabezado) y una lista HTML anidada (<ul><li><a href="#slug">), cada una con su propio botón de copia. En segundo lugar, su contenido original con los anclajes realmente conectados: para la entrada de Markdown, puede elegir la sintaxis de atributo de encabezado {#slug} ampliamente compatible utilizada por kramdown, Pandoc, MkDocs y Jekyll de GitHub Pages, o recurrir a etiquetas de encabezado HTML simples con id="slug" ya configurado si su renderizador de destino no comprende la sintaxis de atributos. Para la entrada HTML, la identificación se inyecta directamente en el elemento de encabezado analizado; no hay un "modo" separado para elegir porque las etiquetas ya existen.

Todo se ejecuta localmente en su navegador: el análisis, los cálculos de slug y el reensamblaje del documento se realizan en JavaScript en la página que está viendo en este momento, sin nada cargado en ninguna parte. Esto es importante para borradores de documentación, wikis internos o una publicación de blog no publicada que no está listo para pegar en un servicio de terceros solo para obtener una tabla de contenidos que funcione.