Este convertidor de Markdown a HTML transforma Markdown sencillo en HTML limpio y listo para usar mientras escribes. Un pequeño analizador de Markdown funciona dentro de tu navegador, por lo que no se envía ningún dato a un servidor.
Escribe o pegue a la izquierda. La salida aparece a la derecha, ya sea sin formato HTML o como una vista previa renderizada. Sin esperas, sin botón de envío, sin recargas de página.
Qué convierte:
- Encabezados, párrafos, negrita, cursiva, tachado, enlaces, imágenes, citas en bloque y reglas horizontales
- Listas ordenadas, desordenadas y anidadas, además de listas de tareas estilo GitHub con casillas de verificación
- Tablas de tuberías, incluida la alineación de columnas de la fila
:---: - Bloques de código vallados, resaltados en la vista previa con highlight.js (EN)
- Notas al pie (
[^1]) y listas de definiciones - Portada de YAML, que se elimina de la parte superior del documento
- Raw en línea HTML, que pasa sin cambios
Creado para flujos de trabajo reales. El editor tiene números de línea, una barra de herramientas de formato y deshacer/rehacer adecuado. La pestaña inserta dos espacios. Caracteres emparejados como **, _ y comillas invertidas se cierran automáticamente alrededor del texto seleccionado. Su borrador se guarda en el navegador y se restaura al recargar.
El panel de salida le ofrece opciones: copiar sin formato HTML, copiar un documento HTML completo e independiente con estilos incrustados, copiar texto sin formato, copiar el original Markdown o descargar el resultado como un archivo .html.
El modo oscuro está incluido. Los paneles son redimensionables. La posición de desplazamiento se sincroniza entre el editor y la vista previa. Los documentos de más de 20,000 caracteres aún se convierten, con un breve retraso y una insignia de advertencia.
Cómo utilizar este convertidor de Markdown a HTML
- Pega tu Markdown en el panel izquierdo o haga clic en Muestra para cargar un documento que ejerza todas las funciones admitidas.
- Usa la barra de herramientas para ajustar una selección en negrita, cursiva o código, o para insertar títulos, listas, citas, enlaces, imágenes, bloques de código y notas al pie.
- Cambia entre la pestaña HTML, que muestra el marcado generado, y la pestaña Vista previa, que lo representa.
- Haz clic en Copiar HTML para ver un fragmento que puede pegar en un CMS, o Copiar completo para obtener una página completa con una pequeña hoja de estilo incrustada.
- Haz clic en Descargar para guardar el resultado como
converted.html.
Un breve documento GFM como este:
## Release notes
- [x] Tables with **alignment**
- [ ] ~~Autolinks~~
| Feature | Status |
|:--------|-------:|
| Footnotes[^1] | Done |
[^1]: Rendered at the bottom of the document.sale como:
<h2 id="release-notes">Release notes</h2>
<ul>
<li><input type="checkbox" disabled checked> Tables with <strong>alignment</strong></li>
<li><input type="checkbox" disabled> <del>Autolinks</del></li>
</ul>
<table>
<thead>
<tr><th style="text-align:left">Feature</th><th style="text-align:right">Status</th></tr>
</thead>
<tbody>
<tr><td style="text-align:left">Footnotes<sup><a href="#mdconv-fn-1" id="mdconv-fnref-1">[1]</a></sup></td><td style="text-align:right">Done</td></tr>
</tbody>
</table>
<div class="mdconv-footnotes">
<ol>
<li id="mdconv-fn-1">Rendered at the bottom of the document. <a href="#mdconv-fnref-1">↩</a></li>
</ol>
</div>Los encabezados obtienen un id generado a partir de su texto, por lo que los enlaces de anclaje funcionan de inmediato.
Lo que la herramienta no hace
- Las URL desnudas no se convierten en enlaces. Escríbelos como
[text](url). - La pestaña HTML muestra tu marcado exactamente como se generó, incluido cualquier HTML sin formato que haya escrito. Solo el panel Vista previa pasa por un desinfectante de lista permitida que elimina scripts, controladores de eventos y URL no seguras antes de renderizar.
- El resaltado de sintaxis se aplica únicamente en la vista previa. El HTML copiado contiene bloques
<pre><code class="language-js">simples que puedes diseñar tú mismo. - Si solo necesita las palabras, el convertidor de HTML a texto quita las etiquetas nuevamente.
¿Qué es un convertidor de Markdown a HTML?
Un convertidor de Markdown a HTML es una herramienta de análisis que toma texto sin formato escrito en la sintaxis Markdown y genera un marcado HTML válido.
No es un editor de texto y no solo muestra texto formateado en una pantalla. Produce las etiquetas HTML (EN) reales que un navegador o un sistema de contenido puede representar.
La herramienta se encuentra entre dos estados del mismo documento. Uno es legible por una persona y el otro por una máquina.
- Markdown fuente: texto sin formato escrito a mano o generado dentro de un editor
- Etapa de análisis: lee la sintaxis y construye una estructura a partir de ella.
- Etapa de renderizado: escribe el marcado HTML final
John Gruber lanzó Markdown en 2004 (EN), construido en torno a una idea simple: la escritura debe seguir siendo legible como texto sin formato y aún así convertirse limpiamente en marcado estructurado.
El término aparece ahora en todas partes en las herramientas para desarrolladores. Los archivos Léame, los creadores de sitios estáticos, las aplicaciones de notas y las plataformas de documentación se basan en alguna versión de este mismo paso de conversión.
¿Qué es CommonMark y cómo define la conversión de Markdown a HTML?
CommonMark (EN) es una especificación formal para la sintaxis de Markdown que define, ejemplo por ejemplo, exactamente qué salida debe producir un convertidor para una entrada determinada.
Original Markdown nunca tuvo esa garantía. Dos convertidores podrían leer el mismo archivo y devolver dos resultados diferentes, que es todo el problema que CommonMark se propuso solucionar.
Especificación CommonMark
Cada regla en la especificación viene con un ejemplo resuelto. Los encabezados, listas, énfasis y sintaxis de enlaces obtienen una definición precisa y comprobable en lugar de una descripción vaga.
- Las estructuras anidadas, como una lista dentro de una cita en bloque, se deletrean en lugar de dejarse en manos de conjeturas.
- Los analizadores se pueden comparar directamente con las especificaciones, un proceso que la comunidad llama prueba de conformidad.
- Herramientas como Babelmark (EN) permiten a los desarrolladores comparar cómo diferentes analizadores procesan la misma entrada uno al lado del otro.
La mayoría de las bibliotecas mantenidas activamente, incluidas markdown-it (EN) y cmark (EN), se basan en esta especificación en lugar de la sintaxis original de 2004.
GitHub representa cada problema, solicitud de extracción y archivo Léame a través de su propia implementación de la especificación, cmark-gfm (EN). El objetivo es mantener el formato coherente en toda la plataforma.
Extensiones de GitHub Flavored Markdown
GitHub Flavored Markdown (EN), abreviado como GFM, es un superconjunto estricto de CommonMark. Todo lo que admite CommonMark sigue funcionando, GFM solo agrega un puñado de extensiones que GitHub necesitaba.
| Extensión | lo que agrega |
|---|---|
| Tablas | Sintaxis de tabla delimitada por barras verticales |
| Listas de tareas | Elementos de casilla de verificación dentro de una lista |
| Tachado | Estilo de texto con doble tilde |
| Enlaces automáticos | Las URL desnudas se convierten automáticamente en enlaces en los que se puede hacer clic |
GitLab creó su propio dialecto comparable, GitLab Flavored Markdown (EN), en gran parte por la misma razón por la que GitHub creó GFM: la sintaxis específica de la plataforma necesita su propio libro de reglas probado.
¿Cómo analiza y representa texto un convertidor Markdown a HTML?
Un convertidor de Markdown a HTML funciona en dos etapas. Analiza el texto fuente en una representación estructurada y luego representa esa estructura en etiquetas HTML.
El método que maneja la primera etapa decide casi todo lo demás: velocidad, precisión y qué tan bien la herramienta maneja una sintaxis desordenada o profundamente anidada.
Análisis basado en expresiones regulares
Los analizadores basados en expresiones regulares escanean el texto línea por línea, haciendo coincidir patrones como # para un encabezado o * para enfatizar.
- Rápido en documentos cortos y bien formados
- Tiene problemas con estructuras anidadas, como una lista dentro de una cita en bloque
- ¿Era el enfoque dominante antes de que existiera CommonMark?
Showdown (EN) y el Markdown.pl original usan este método, y se muestra en cómo ocasionalmente no están de acuerdo entre sí en casos extremos.
Análisis basado en AST y Tokenizer
Los analizadores basados en tokenizadores primero dividen la entrada en tokens y luego crean un árbol de sintaxis abstracta antes de procesar algo.
Este es un enfoque genuinamente diferente. El analizador comprende la estructura completa del documento antes de escribir una única etiqueta HTML.
| Enfoque | Admite anidamiento | Velocidad típica | Ejemplo |
|---|---|---|---|
| Basado en expresiones regulares | Débil en anidamiento profundo | Muy rápido en texto simple. | Showdown |
| basado en AST | Maneja el anidamiento de forma nativa | Rápido, un poco más sobrecargado | markdown-it |
El panel de vista previa integrado de VS Code (EN) se ejecuta en Markdown-it internamente. Se apoya en esa arquitectura de tokenizador para un manejo consistente de listas anidadas dentro de citas en bloque.
¿Qué hace que un conversor de Markdown a HTML sea rápido o preciso?
La velocidad proviene del poco trabajo que realiza el analizador por carácter. La precisión proviene de qué tan cerca coincide la salida con las propias pruebas de conformidad de la especificación CommonMark.
Estos dos objetivos van en direcciones diferentes con más frecuencia de lo que la gente espera. Un analizador de expresiones regulares simplificado puede superar a un tokenizador completo en texto simple y luego desmoronarse en el momento en que la entrada se vuelve confusa.
Cifras clave:
- La versión actual de CommonMark es versión 0.31.2 (EN), publicada en enero de 2024
- La especificación contiene 652 ejemplos de conformidad integrados, cada uno de los cuales empareja una entrada Markdown con la salida HTML exacta que un analizador compatible debe generar
- La GFM spec (EN) tiene una versión de 0.29-gfm, se publicó formalmente por última vez en 2019 y todavía funciona como referencia de GitHub para el renderizado GFM.
Un analizador que obtiene una buena puntuación frente a esos ejemplos de conformidad es, por definición, más preciso. Uno que se salta las especificaciones por completo, como el Showdown original, no tiene ningún punto de referencia con el que compararse.
La decisión de GitLab de publicar su propia especificación siguió la misma lógica que GitHub usó para GFM: un libro de reglas documentado y comprobable supera a uno informal cada vez que se actualiza un analizador.
¿Cómo manejan la seguridad y la desinfección los convertidores Markdown a HTML?
Markdown permite el HTML sin formato dentro de un documento por diseño, y ese HTML sin formato pasa directamente a través de la mayoría de los convertidores a menos que algo lo elimine.
Ésa es exactamente la apertura que necesita un atacante. Un campo de comentario, una página wiki o un archivo Léame que acepte Markdown de una fuente que no sea de confianza puede llevar una etiqueta de secuencia de comandos directamente a la página representada.
Herramientas y bibliotecas de desinfección
La desinfección suele ser un paso independiente de la conversión, no algo integrado en el analizador en sí.
- Lista de etiquetas permitidas elimina secuencias de comandos, atributos de controlador de eventos y cualquier cosa fuera de un conjunto de etiquetas aprobado
- DOMPurify (EN), mantenida por el grupo de investigación de seguridad Cure53, es la biblioteca a la que recurren la mayoría de los proyectos JavaScript después de la conversión.
- Algunos convertidores, como Showdown, ofrecen una opción de desinfección incorporada, aunque es mucho menos exhaustiva que una biblioteca dedicada.
Este paso comúnmente se ejecuta en el backend (EN), justo antes de que el HTML convertido se almacene o entregue, en lugar de confiar en que el navegador detecte cualquier cosa peligrosa.
El OWASP Top 10 para 2021 (EN) coloca las debilidades de inyección, la categoría que se pliega en secuencias de comandos entre sitios, en tercer lugar en general. Registró 274,228 ocurrencias en las aplicaciones probadas.
La biblioteca markdown-js (EN) ahora lleva un aviso de "no mantenido" en su repositorio, y su paquete npm tiene un aviso de denegación de servicio de expresión regular (EN) publicado. Esa es una consecuencia directa de su diseño basado en expresiones regulares.
¿Qué convertidor de Markdown a HTML se adapta a tu plataforma?
El conversor correcto generalmente se reduce al idioma que ya ejecuta tu pila, no a la mejor elección universal.
| Herramienta | Plataforma | Método de análisis | Apoyo al FMG |
|---|---|---|---|
| Marked.js (EN) | JavaScript | Basado en tokenizador | Integrado |
| Python-Markdown (EN) | Python | Regex con ganchos de extensión | A través de extensiones |
| Kramdown (EN) | Ruby | Analizador de descenso recursivo | Parcial |
| Pandoc (EN) | Idioma cruzado | basado en AST | A través de opciones de lector |
JavaScript Convertidores
Marked.js y Showdown se ejecutan en la frontend (EN), convirtiendo Markdown en HTML directamente en el navegador sin un viaje de ida y vuelta al servidor.
- Marked.js se centra en la velocidad y en un mayor cumplimiento de CommonMark
- Showdown es anterior a CommonMark y ofrece una bandera de desinfección incorporada
- Ambos se instalan a través de npm y se colocan en una compilación JavaScript (EN) existente casi sin configuración
Convertidores de Python
Python-Markdown es la opción estándar dentro de los proyectos de Python y se envía como un paquete pip en lugar de un binario independiente.
Arquitectura basada en extensiones: el manejo de la sintaxis principal sigue siendo mínimo y funciones como tablas o notas al pie se agregan como módulos de extensión separados.
Los generadores de documentación como MkDocs (EN) se crean directamente sobre él en lugar de escribir su propio analizador.
Convertidores de Ruby
Kramdown y Redcarpet (EN) cubren proyectos Ruby, aunque se apoyan en diferentes arquitecturas internas.
Kramdown se acerca más a un superconjunto de Markdown, lo que admite listas de definiciones y listas de atributos en línea que CommonMark simple no define.
Redcarpet cambia parte de esa flexibilidad por velocidad de análisis sin procesar, razón por la cual todavía aparece en canales de documentación de Rails más antiguos.
¿Debería utilizar un convertidor en línea, una biblioteca, una API o un complemento?
El método de acceso importa tanto como el propio analizador, ya que decide dónde ocurre realmente la conversión y quién debe mantenerla.
Convertidores en línea
Herramientas como Dillinger (EN) y HackMD se ejecutan completamente en una pestaña del navegador, sin necesidad de instalación.
- Ventajas: configuración cero, buena para un documento único, sin dependencia para realizar un seguimiento
- Contras: no es adecuado para canales automatizados, pegar contenido confidencial en un sitio de terceros es una preocupación real
Otras herramientas de navegador de propósito único siguen el mismo modelo para diferentes formatos. Un convertidor de Word a HTML convierte documentos en marcas, y un generador de tablas HTML crea tablas sin ningún Markdown.
Bibliotecas y API
La instalación de una biblioteca (Marked.js, Python-Markdown, Kramdown) coloca la conversión directamente dentro de un proceso de compilación o una solicitud del servidor.
Una API (EN) alojada hace el mismo trabajo sin agregar una dependencia para administrar, al costo de una llamada de red y, generalmente, un límite de uso.
- Ventajas: escala con la aplicación, sin pasos manuales, funciona dentro de tuberías automatizadas
- Contras: una biblioteca aún necesita actualizaciones de versión, una API aún necesita un respaldo para el tiempo de inactividad
Complementos CMS
Un complemento incluye un convertidor dentro de una plataforma de contenido existente, de modo que los editores puedan escribir en Markdown sin salir de la interfaz que ya utilizan.
Ventajas: no hay un paso de compilación separado para los autores de contenido, experiencia de edición familiar.
Contras: el complemento está tan actualizado como lo mantiene su mantenedor. Los complementos abandonados son una fuente común de las brechas de desinfección mencionadas anteriormente.
¿Cómo se convierte Markdown a HTML en código, paso a paso?
La conversión de Markdown a HTML con una biblioteca sigue aproximadamente el mismo orden en casi todas las herramientas, ya sea que se ejecute en una pestaña del navegador o dentro de una canalización de compilación.
Saltarse un paso, especialmente la desinfección, es de donde provienen la mayoría de los errores de conversión del mundo real.
- Instale o cargue el convertidor. Agregue la biblioteca a través de npm, pip o una gema, o abra una herramienta basada en navegador si no existe ningún paso de compilación.
- Pase la fuente Markdown al analizador. Esto suele ser una llamada de función única, algo así como
marked.parse(text)omarkdown.markdown(text). - Establezca el estilo y las extensiones antes de renderizar. Decida si las tablas, notas al pie o listas de tareas GFM deben estar activas para este documento.
- Desinfecta la salida. Ejecute el HTML sin procesar a través de un desinfectante dedicado antes de que llegue a una plantilla o base de datos.
- Inserte el HTML terminado. Suéltelo en una plantilla, un campo de contenido o directamente en la página.
Saltarse el paso cuatro es el error más común en esta secuencia. También es el paso que la mayoría de los tutoriales de inicio rápido omiten por completo.
La mayoría de los convertidores agrupan el análisis y la renderización en una llamada de función, lo que oculta el hecho de que debajo de ella ocurren dos etapas separadas.
¿Cómo se integra un convertidor Markdown a HTML en un sitio web o CMS?
La integración generalmente significa que el paso de conversión desaparece en un proceso de compilación, por lo que nadie ejecuta un convertidor manualmente.
El lugar donde realmente se encuentra ese paso y cuándo se dispara, cambia dependiendo de la plataforma debajo de él.
Generadores de sitios estáticos
Los generadores de sitios estáticos ejecutan el convertidor una vez, en el momento de la compilación, y almacenan en caché el HTML resultante en lugar de convertirlo en cada solicitud de página.
- Hugo utiliza por defecto Goldmark (EN), un analizador totalmente compatible con CommonMark
- Jekyll tiene por defecto Kramdown (EN), ejecutando su modo de entrada GitHub Flavored Markdown listo para usar
- Ambos almacenan en caché la salida convertida, por lo que una página solo se reconvierte cuando su archivo fuente realmente cambia.
El propio sitio de documentación de Kubernetes (EN) se ejecuta en Hugo, convirtiendo sus archivos fuente Markdown en archivos estáticos HTML servidos en kubernetes.io.
La conversión en tiempo de compilación compra velocidad en el momento de la solicitud. La compensación es un paso de reconstrucción cada vez que cambia el contenido fuente.
Plataformas de documentación
Docusaurus (EN) toma una ruta diferente. Ejecuta Markdown y MDX (EN) a través de un comentario (EN) y vuelve a promocionar la canalización antes de que React muestre una página.
MDX permite que un documento mezcle componentes simples Markdown con componentes React integrados, algo que ninguno de los convertidores Ruby o Python cubrió en el intento anterior.
| Plataforma | Analizador predeterminado | Tratamiento del HTML sin procesar |
|---|---|---|
| Hugo | Goldmark | Eliminado a menos que el modo inseguro esté habilitado |
| Jekyll | Kramdown (modo GFM) | Pasado por defecto |
| Docusaurus | Flujo de procesamiento con Remark y MDX | Manejado como JSX, no simple HTML |
MkDocs, construido sobre la biblioteca Python-Markdown tratada anteriormente, sigue el modelo simple de generador estático en lugar del modelo MDX.
¿Cuándo falla o produce errores un conversor de Markdown a HTML?
Un convertidor de Markdown a HTML falla en límites predecibles: sintaxis anidada, sabores no coincidentes y HTML sin formato que se elimina sin previo aviso.
Nada de esto significa que la herramienta en sí esté rota. Significa que la entrada asumió una característica que el analizador nunca estuvo configurado para admitir.
Errores de conversión comunes
La sintaxis anidada produce las fallas más visibles. Una lista que se encuentra dentro de una cita en bloque puede colapsar en un solo párrafo plano en lugar de permanecer anidada.
- Una tabla escrita en sintaxis GFM se representa como un párrafo simple y sin estilo en un analizador estricto exclusivo de CommonMark, ya que las tablas no forman parte de la especificación base.
- Las notas a pie de página desaparecen silenciosamente en cualquier analizador que nunca haya agregado esa extensión
- Una lista suelta, con líneas en blanco entre los elementos, envuelve cada elemento en su propia etiqueta de párrafo, cambiando el espaciado inesperadamente.
Incluso las propias herramientas de GitHub no son inmunes a la deriva. El proyecto cmak-gfm ha tenido problemas abiertos en los que la versión HTML publicada de su especificación no estaba sincronizada con el archivo de especificación subyacente. Eso rompió los enlaces de ejemplo numerados en los que la gente confiaba como referencia.
Limitaciones de estructura y variantes de Markdown
Las discrepancias en los sabores provocan más fallos silenciosos que errores directos. El convertidor no emite una advertencia, simplemente muestra algo ligeramente incorrecto.
La propia documentación de Jekyll establece claramente que CommonMark difiere del Markdown original y no admite todas las funciones exclusivas de Kramdown, incluidas las listas de atributos en línea de bloques.
- Bloques HTML sin procesar: eliminados por el analizador Goldmark de Hugo a menos que el modo "inseguro" esté activado
- Sintaxis exclusiva de Kramdown: ignorado por completo por un analizador estricto de CommonMark
- Sustituciones tipográficas: comillas tipográficas y guiones aplicados de manera inconsistente entre convertidores que no comparten el mismo conjunto de extensiones
Algunos documentos deben representarse de manera idéntica en todas partes, desde un archivo Léame hasta un sitio de documentación y un resumen de correo electrónico. Para aquellos, elegir un tipo y probarlo directamente es más importante que elegir el analizador más rápido.
Preguntas frecuentes: Conversor de Markdown a HTML
¿En qué se diferencia Markdown de HTML como formato?
Markdown es una sintaxis ligera de texto sin formato, mientras que HTML es el lenguaje de marcado completo que los navegadores realmente leen.
Un único símbolo Markdown, como un asterisco, se expande en varias etiquetas HTML durante la conversión. Markdown permanece legible sin renderizar, sin procesar HTML rara vez lo hace.
¿Quién creó Markdown y por qué es importante para las herramientas de conversión?
John Gruber lanzó Markdown en 2004, con el objetivo de lograr un texto que siguiera siendo legible incluso antes de la conversión.
Cada convertidor moderno de Markdown a HTML todavía respeta ese objetivo original: fuente legible, salida limpia. Posteriormente, CommonMark formalizó su sintaxis en una especificación comprobable.
¿La conversión de Markdown a HTML es gratuita y el código abierto importa?
La mayoría de los convertidores Markdown a HTML, incluidos Marked.js, Python-Markdown y Kramdown, son gratuitos y de código abierto.
El código abierto es importante aquí porque la precisión mejora mediante pruebas de conformidad públicas con CommonMark. Las opciones pagas existen principalmente como API alojadas con límites de uso.
¿Cómo se verifica o prueba que la salida HTML sea correcta?
Ejecute la salida del convertidor con el conjunto de pruebas de conformidad de CommonMark (EN) o compare los resultados entre analizadores utilizando Babelmark (EN).
Para canalizaciones personalizadas, primero inspeccione visualmente las listas anidadas, las tablas y los bloques HTML sin formato, ya que es allí donde la salida se interrumpe con mayor frecuencia.
¿Qué se debe arreglar primero cuando se rompe un convertidor de Markdown a HTML?
Un convertidor Markdown a HTML se rompe más visiblemente en las brechas de desinfección, por lo que arreglar la capa de seguridad tiene prioridad sobre las discrepancias de sabor o las peculiaridades de la sintaxis anidada. Una etiqueta de script no desinfectada que llega a una página activa conlleva riesgos mucho mayores que una sola tabla mal representada.
- Desinfecte la salida cruda HTML antes que nada
- Confirma que el tipo Markdown coincida con los documentos fuente
- Pruebe los casos extremos de sintaxis anidada al final
Bloquear una canalización con CommonMark estricto para corregir discrepancias de sabor le cuesta a GitHub Flavored Markdown extensiones como tablas y listas de tareas, a menos que un complemento las restaure después.
Una vez que el marcado convertido es estable, los equipos generalmente enrutan esa salida a través de un HTML Beautifier (EN) para normalizar la sangría antes de la implementación.