Un editor de Markdown a doble panel con vista previa en vivo y exportación de HTML limpio. Escribe a la izquierda y el panel derecho se actualiza sobre la marcha; cámbialo entre el documento renderizado y el código HTML generado cuando quieras. Admite encabezados, negrita y cursiva, enlaces, imágenes, listas, listas de tareas, tablas, citas, líneas horizontales y bloques de código. Al terminar, copia el HTML en tu gestor de contenidos o descarga un archivo .html autónomo.
Cómo convertir Markdown a HTML
- 1 Escribe o pega tu Markdown en el editor de la izquierda.
- 2 Observa la vista previa renderizarse a la derecha mientras escribes.
- 3 Cambia a la pestaña HTML para revisar el marcado generado e indentado.
- 4 Copia el HTML o descarga un documento .html listo para publicar.
Cómo funciona la conversión y por qué es segura
El renderizador es un subconjunto pequeño de CommonMark escrito desde cero: encabezados, énfasis, código en línea y en bloque, listas ordenadas y sin ordenar, citas, tablas, enlaces, imágenes y líneas horizontales. Incorporar una biblioteca completa como marked o markdown-it costaría más kilobytes que todas las demás herramientas del sitio juntas, y el subconjunto cubre lo que la gente escribe de verdad en un README o una entrada de blog.
El diseño de seguridad merece decirse con claridad, porque es la parte que la mayoría de conversores de Markdown hace mal. Tu entrada se escapa como HTML antes de que ocurra cualquier análisis en línea, y el HTML en bruto del origen nunca se traslada a la salida. Eso significa que un documento Markdown que contenga una etiqueta de script produce texto visible e inofensivo en vez de un script en ejecución. Las URLs de enlaces e imágenes se comprueban contra una lista de protocolos permitidos que no pueden ejecutar código —http, https, mailto, tel, fragmentos, rutas relativas y data URIs limitados a imágenes—, así que la clásica inyección de un enlace javascript: no tiene por dónde entrar.
La vista previa en vivo se renderiza con innerHTML, algo que solo es defendible gracias al escapado anterior. La opción de «descargar .html» envuelve esa misma salida en un documento HTML completo con título, para que el archivo se abra correctamente en un navegador y no como un fragmento.
Para qué sirve
Pegar en un CMS
Muchos gestores de contenido aceptan HTML pero no Markdown. Escribir en Markdown y convertir al final es más rápido que pelearse con un editor visual que reformatea mientras escribes.
Previsualizar un README
Comprobar cómo se renderiza un README antes de subirlo ahorra el commit que solo arregla una tabla rota. La vista previa muestra la estructura igual que la mostrará un renderizador.
Correo y boletines
Redacta en Markdown, convierte a HTML y pégalo en la herramienta de boletines. El resultado es marcado semántico limpio en vez de la sopa de divs anidados que produce un editor de texto enriquecido.
Aprender Markdown
Escribir a un lado y ver la salida al otro enseña la sintaxis más rápido que cualquier tabla de referencia, sobre todo con listas y tablas, donde la sangría importa.
Por qué usar un editor de Markdown en el navegador
Markdown es la forma más rápida de escribir texto estructurado —READMEs, documentación, borradores de blog, notas de versión— pero publicar suele requerir HTML. Este editor une ambos mundos sin proceso de compilación, sin cuenta y sin pegar tu texto en el servidor de un tercero. El renderizador escapa la entrada antes de analizarla, así que la vista previa es segura aunque tu texto contenga etiquetas, y el HTML resultante es marcado semántico plano, sin clases de frameworks ni rastreadores.
Lo que este renderizador no admite
Es un subconjunto deliberado, no una implementación completa de CommonMark. Estas son las ausencias:
- El HTML en bruto no se traslada. Incrustar un iframe de vídeo o un widget escribiendo HTML dentro de tu Markdown mostrará las etiquetas como texto: es una decisión de seguridad, no un descuido.
- Sin extensiones de GitHub más allá de las tablas: listas de tareas, tachado, notas al pie y coloreado de sintaxis dentro de los bloques de código no están implementados.
- Sin análisis de front matter. Un bloque YAML al principio del documento se renderiza como contenido en lugar de tratarse como metadatos.
- Las estructuras de listas muy anidadas o inusuales pueden no coincidir exactamente con un analizador completo. El anidamiento sencillo funciona; no se cubren todos los casos límite de la especificación CommonMark.
- Los data URIs que no son de imagen se rechazan en los enlaces. Solo se dejan pasar los data:image, porque los data URIs arbitrarios son un vector de inyección.
Resolución de problemas
- Mis etiquetas HTML aparecen como texto visible
- Funciona como debe. El HTML en bruto se escapa en vez de trasladarse, así que un documento que contiene marcado muestra ese marcado. Si necesitas HTML en la salida, convierte aquí el Markdown y luego añade el HTML a mano sobre el resultado.
- Mi lista no se anida
- El anidamiento en Markdown lo determina la sangría, y la cantidad necesaria depende del marcador padre. Sangra el elemento hijo al menos dos espacios; cuatro es lo más seguro y funciona en todas partes. Un tabulador puede interpretarse de forma distinta según su ancho.
- Mi tabla no se renderiza
- Una tabla necesita la fila separadora de guiones justo debajo del encabezado, con al menos tres guiones por columna, y el mismo número de celdas separadas por barras en todas las filas. La causa habitual es que falte la fila separadora; la siguiente, una fila con una celda de menos.
Preguntas frecuentes
¿Qué sintaxis de Markdown admite?
Encabezados, negrita, cursiva, tachado, código en línea, bloques de código, enlaces, imágenes, listas ordenadas y sin ordenar, listas de tareas, tablas, citas y líneas horizontales.
¿El HTML generado es limpio?
Sí: es HTML semántico plano e indentado, sin estilos en línea ni clases propias de ningún framework, listo para pegar en cualquier CMS o plantilla.
¿Se guarda mi borrador en algún sitio?
No. El texto vive únicamente en la página mientras está abierta. No se sube nada ni se guarda nada al cerrar la pestaña.
¿Es seguro publicar la salida?
El HTML que produce esta herramienta no puede contener scripts, porque la entrada se escapa antes de analizarla y los protocolos de URL peligrosos se filtran. Dicho esto, trata cualquier contenido que no hayas escrito tú con la misma cautela que aplicarías en cualquier otro sitio: la garantía cubre lo que emite este renderizador, no lo que pegues después.
¿Admite tablas?
Sí. Usa la sintaxis de barras con una fila separadora de guiones bajo el encabezado. La alineación de columnas con dos puntos en la fila separadora es la extensión habitual y se comporta como esperarías.
¿Puedo convertir HTML de vuelta a Markdown?
Con esta herramienta no: convierte en un solo sentido. El camino inverso es un problema genuinamente más difícil, porque el HTML arbitrario no tiene un equivalente limpio en Markdown y el resultado siempre necesita repaso manual.
¿Se envía mi documento a algún sitio?
No. El renderizador es un módulo de JavaScript que se ejecuta en tu pestaña, sin acceso a la red. Los borradores, la documentación interna y los textos sin publicar se quedan enteramente en tu dispositivo.