Vista previa de Markdown

Escribe Markdown y míralo renderizado mientras tecleas, o copia el HTML. El HTML en bruto se muestra como texto y los enlaces se comprueban, así que nada de la vista previa puede ejecutarse.

Ejemplos de código

Copia estos ejemplos en tu propio proyecto. Cada uno usa solo la biblioteca estándar del lenguaje, así que no hay nada que instalar.

Marca con una estrella hasta 3 lenguajes para verlos primero en todas las páginas de herramientas.

const text = '# Hello\n\nSome **bold** text <b>raw</b>'

const escaped = text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')

const html = escaped
  .split('\n\n')
  .map((block) =>
    block.startsWith('# ')
      ? `<h1>${block.slice(2)}</h1>`
      : `<p>${block.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')}</p>`,
  )
  .join('\n')

console.log(html)

Qué hace

Muestra Markdown como una página renderizada mientras escribes y te da el HTML. Lee CommonMark y las extensiones de GitHub que usan la mayoría de documentos: tablas, listas de tareas, tachado y enlaces automáticos.

Cómo usarlo

Escribe o pega Markdown, o suelta un archivo de texto.
Elige Vista previa para ver la página renderizada o HTML para ver el marcado. Activa los saltos de línea si un salto simple debe empezar una línea nueva, como en los mensajes de chat.
Copia o descarga el HTML.

Ejemplos

# Hola se convierte en <h1>Hola</h1> y Texto en **negrita** en Texto en <strong>negrita</strong>. Una tabla escrita con barras y guiones se convierte en una tabla real, y - [x] hecho en una casilla marcada.

Conviene saber

El HTML en bruto de la fuente se muestra como texto y nunca se transmite, así que una etiqueta script o un manejador de eventos en Markdown pegado no puede hacer nada.
Solo los enlaces web, de correo y de teléfono y las direcciones relativas siguen siendo enlaces. Un enlace javascript: queda como texto normal.
Las imágenes nunca se cargan en la vista previa. Ves su descripción y dirección, y el HTML copiado contiene la etiqueta de imagen.
El límite es de 100 000 caracteres.

¿Qué admite la vista previa?

CommonMark más las extensiones de GitHub más usadas: tablas, listas de tareas, tachado y enlaces automáticos. Todo se convierte en tu navegador.

Preguntas frecuentes

¿Por qué mi HTML en bruto se muestra como texto?

El HTML en bruto dentro de Markdown puede ejecutar scripts, por eso nunca se deja pasar: las etiquetas script y demás marcado aparecen tal cual. Usa la sintaxis de Markdown. El HTML que copias está escapado igual.

¿Por qué no se cargan las imágenes?

Las imágenes nunca se descargan, así que una vista previa no sirve para rastrearte ni para cargar nada de otro sitio. Ves la descripción y la dirección como texto normal. El HTML copiado sí contiene la etiqueta de imagen.

¿Esta herramienta envía mi texto a algún sitio?

No. Todo ocurre en tu navegador. Lo que escribes nunca se envía a nuestros servidores.

Cambios de esta herramienta