Skip to content

Todo para WordPress, el desarrollo web — y mucho más

De Markdown a HTML y vuelta: un conversor con vista previa en vivo

De Markdown a HTML y vuelta: un conversor con vista previa en vivo

Pegue Markdown y verá la página terminada con HTML limpio al lado. Pegue HTML y obtendrá Markdown apto para un README o un artículo de blog. Ambos sentidos funcionan en su navegador: el texto no se envía a ninguna parte ni se guarda en ningún sitio.

Arrastre aquí un .md: el archivo se lee localmente. Se admite CommonMark en su alcance habitual más las extensiones de GFM: tablas, tachado y listas de tareas.
Reglas de conversión
Pegue Markdown arriba: la vista previa aparecerá aquí.

El texto no sale de su navegador: la conversión se ejecuta localmente, sin enviar nada a un servidor.

Qué se admite exactamente

Del lado de Markdown: CommonMark en su alcance habitual más las extensiones de GFM: encabezados con almohadillas y con subrayado, párrafos, líneas horizontales; listas con viñetas, numeradas y anidadas, en forma compacta y espaciada; listas de tareas entre corchetes; citas, incluida la continuación perezosa de línea; código vallado con nombre de lenguaje y código con sangría; tablas GFM con alineación de columnas; enlaces, imágenes, enlaces automáticos y enlaces a definiciones al pie del documento; negrita, cursiva, tachado, código en línea, caracteres escapados y salto de línea duro. Del lado de HTML el análisis pasa por el propio DOMParser del navegador, así que funcionan tanto un fragmento como una página entera con head. Las tablas con celdas combinadas no se trasladan a Markdown: allí no existe esa sintaxis, así que se quedan como etiquetas y la herramienta lo indica. Lo que falta a propósito: el resaltado de sintaxis en los bloques de código, las notas al pie, las fórmulas y las directivas de generadores de sitios estáticos concretos. Eso ya no es Markdown, sino el dialecto de una herramienta en particular.

Un salto de línea: dos Markdown distintos

La fuente más habitual de discrepancias entre conversores es precisamente el salto de línea suelto dentro de un párrafo. Según CommonMark es un espacio normal: dos líneas se pegan en un solo párrafo. Así se comportan Pandoc, los generadores de documentación y la mayoría de los sitios estáticos. GitHub hace lo contrario en comentarios, descripciones de incidencias y revisiones: cada salto se convierte en una etiqueta br. Por eso justamente un texto que se veía bien en una incidencia se apelmaza en un párrafo compacto al pasarlo a un README. La casilla «Un solo salto de línea es un br» alterna entre estas dos costumbres. Por defecto rige la regla de CommonMark.

Por qué la vista previa no muestra todo lo que hay en el HTML

Por especificación, Markdown permite HTML dentro de sí mismo. Es cómodo y a la vez significa que cualquier texto pegado puede contener código ejecutable. Los visores en línea populares meten el resultado en innerHTML tal cual. La biblioteca marked sobre la que están construidos no tiene ninguna sanitización integrada desde la versión cuatro: una etiqueta script del Markdown ajeno se ejecuta allí sin más. Aquí la vista previa se construye con nodos DOM según una lista blanca: script, iframe, object, los manejadores de eventos del tipo onclick y los enlaces con el esquema javascript: no llegan a ella, y la lista de lo recortado se muestra bajo el resultado. En la pestaña «Código HTML» ve la salida completa sin recortes: es texto, no una página, y ejecutarlo es imposible. El HTML del origen solo puede llegar a la vista previa cuando usted mismo ha activado la casilla correspondiente. Por defecto las etiquetas se escapan y se muestran como texto.

Preguntas frecuentes