Editor Markdown - Vista previa y exportación HTML online
Escribe Markdown en un editor en paralelo con vista previa instantánea y copia o descarga HTML limpio; todo funciona localmente en tu navegador.
Escribe o pega Markdown a la izquierda y observa el resultado renderizado a la derecha. Nada de lo que escribes se sube: el editor funciona por completo en tu dispositivo.
Editor Markdown - Vista previa y exportación HTML online
Escribe Markdown en un editor en paralelo con vista previa instantánea y copia o descarga HTML limpio; todo funciona localmente en tu navegador.
Vista previa
Palabras: 0Caracteres: 0
Cómo funciona: el código fuente se analiza con un motor compatible con CommonMark (con tablas, código cercado y tachado activados), el HTML sin procesar se desactiva por seguridad y la vista previa muestra exactamente el HTML que puedes copiar o descargar.
Acerca del editor Markdown online
Este editor Markdown ofrece una superficie de escritura sin distracciones con una vista previa en vivo justo al lado. Escribe o pega Markdown en el panel de origen y el resultado renderizado se actualiza con cada pulsación, para que puedas ver exactamente cómo quedarán los encabezados, las listas, los enlaces, las tablas y los bloques de código antes de publicar. Todo sucede localmente en tu navegador: el analizador se ejecuta en tu dispositivo, no hace falta una cuenta y nunca se sube lo que escribes a un servidor. Por eso es seguro para notas privadas, documentación interna y borradores sin publicar.
La vista previa usa un renderizador compatible con CommonMark y admite los extras de estilo GitHub que esperan la mayoría de los autores. Las tablas separadas por barras verticales, los bloques de código cercados, el tachado con dobles virgulillas, los enlaces automáticos de URL sin formato y las sustituciones tipográficas, como comillas curvas, guiones y puntos suspensivos, funcionan desde el primer momento. El HTML sin procesar está desactivado deliberadamente en el código fuente, de modo que un fragmento pegado no puede inyectar scripts ni estilos en la vista previa. El resultado que copies o descargues es un marcado sencillo y predecible que se comporta igual donde lo uses.
Cuando el documento esté listo, tienes varias formas de exportarlo. Copiar HTML coloca el marcado renderizado en el portapapeles para pegarlo directamente en un CMS, una plantilla de correo o un diseño de sitio estático. Descargar HTML envuelve ese mismo marcado en una página web independiente completa, con el doctype, la codificación de caracteres y la declaración de viewport adecuados, lista para abrir en cualquier navegador o entregar a un compañero. Descargar Markdown guarda el código fuente en bruto como archivo .md para control de versiones o edición posterior, y Borrar restablece todo el espacio de trabajo con un clic.
Debajo del editor aparecen los recuentos de palabras y caracteres en vivo, algo útil cuando escribes con un límite: una introducción de blog, una descripción de producto, una sección de README o un resumen para una conferencia. Como el contador ignora tokens de puntuación pura, como almohadillas y barras verticales, el número refleja las palabras que realmente verá el lector, no el marcado que las rodea.
El editor está pensado para ser ligero, no una cadena completa de publicación. No sincroniza documentos entre dispositivos, no renderiza fórmulas matemáticas de LaTeX ni diagramas Mermaid y no exporta directamente a PDF o DOCX; para esas tareas, combínalo con un conversor específico. Lo que sí hace, lo hace al instante: redacción Markdown rápida y privada, vista previa fiel y exportación HTML limpia, gratis y sin registro.
Ejemplos del editor Markdown
Algunos fragmentos habituales y aquello en lo que los convierte la vista previa en vivo.
| El Markdown que escribes | Lo que muestra la vista previa | Por qué funciona |
|---|---|---|
| ## Lista de comprobación de lanzamiento | Un encabezado de nivel dos | De uno a seis caracteres # iniciales producen encabezados h1 a h6. |
| | Nombre | Cant. | | --- | --- | | Bolígrafos | 12 | | Una tabla de dos columnas con fila de encabezado | Las barras verticales y una fila separadora de guiones crean tablas de estilo GitHub. |
| ~~precio anterior~~ $19 | Texto tachado antes del precio nuevo | Rodea el texto con dobles virgulillas para tacharlo. |
| Visita https://example.com hoy | La URL sin formato se convierte en un enlace en el que se puede hacer clic | El enlace automático está activado: detecta URL normales sin corchetes angulares. |
Cómo usar el editor Markdown
- Escribe o pega Markdown en el panel de origen de la izquierda; la vista previa renderizada de la derecha se actualiza mientras escribes.
- Consulta los contadores de palabras y caracteres bajo el editor si escribes con un límite de extensión.
- Haz clic en Copiar HTML para poner el marcado renderizado en el portapapeles, o en Descargar HTML para guardar una página web independiente completa.
- Usa Descargar Markdown para guardar el código fuente .md, Cargar ejemplo para explorar un documento de demostración o Borrar para empezar de nuevo.
Preguntas frecuentes del editor Markdown
¿Se sube mi texto a algún sitio?
No. El análisis y el renderizado de la vista previa se ejecutan por completo en tu navegador mediante un motor JavaScript en la página. Tu texto nunca sale del dispositivo y al cerrar la pestaña se descarta, por lo que el editor es seguro para borradores confidenciales.
¿Qué sintaxis Markdown admite el editor?
Sigue CommonMark y añade los extras populares de estilo GitHub: tablas con barras verticales, bloques de código cercados, tachado y enlaces automáticos de URL sin formato. El énfasis con asteriscos o guiones bajos, las listas anidadas, las citas y las imágenes también se renderizan como esperas.
¿Por qué no se renderiza el HTML sin procesar de mi Markdown?
El paso directo de HTML sin procesar está desactivado a propósito. Evita que el contenido pegado inyecte scripts o estilos en la vista previa (un vector XSS común) y mantiene limpio el marcado exportado. Usa sintaxis Markdown en lugar de etiquetas en línea.
¿Cómo convierto mi Markdown en una página web completa?
Haz clic en Descargar HTML. El editor envuelve el marcado renderizado en un documento completo, con doctype, charset y meta viewport incluidos, para que el archivo guardado se abra correctamente en cualquier navegador sin trabajo adicional.
¿Puedo pegar el HTML exportado en WordPress o en un correo?
Sí. Copiar HTML proporciona marcado semántico sencillo, sin hojas de estilo ni scripts externos, que se pega limpiamente en editores de código de CMS, creadores de correo y sistemas de documentación. El estilo lo aporta el tema propio del destino.