Editor Markdown online con vista previa

Qué puedes hacer aquí

• Actualizar una vista previa HTML mientras escribes Markdown.
• Renderizar encabezados, énfasis, listas, citas, enlaces, imágenes, tablas y bloques de código.
• Limpiar elementos y atributos peligrosos antes de mostrar el HTML.
• Impedir que un clic en un enlace de la vista previa abandone la herramienta.
• Copiar el fragmento HTML saneado o descargar un documento HTML completo en UTF-8.

Respuesta rápida: previsualizar Markdown

Escribe o pega Markdown en el panel de edición. La vista de la derecha se actualiza sin pulsar un botón. Prueba `# Título`, `**negrita**`, una lista con `-`, un enlace `[texto](https://ejemplo.com)` o un bloque encerrado por tres acentos graves. Cuando la estructura sea correcta, copia el HTML limpio o descarga un archivo que incluye `doctype`, UTF-8, viewport y estilos básicos.

El texto inicial está en español y puede sustituirse por completo. La página no abre archivos `.md`, no guarda versiones y no sincroniza con GitHub. Conserva el original en tu editor o repositorio. Recargar la página elimina el borrador porque no se guarda en una cuenta, base de datos ni almacenamiento persistente.

Sintaxis compatible y diferencias entre dialectos

Marked interpreta Markdown común y, con su configuración predeterminada, varias convenciones de GitHub Flavored Markdown como tablas, listas de tareas y tachado. CommonMark define bloques como encabezados, párrafos, citas, listas y código, además de elementos en línea como énfasis, enlaces e imágenes. Una línea en blanco y la sangría pueden cambiar la estructura; revisa tanto el resultado como los símbolos escritos.

Markdown no es un único formato idéntico en todas las plataformas. GitHub, GitLab, Obsidian, Discord, Notion y distintos CMS añaden o restringen funciones. Esta página no procesa Mermaid, matemáticas LaTeX, notas al pie de cada plataforma, wikilinks, embeds de Obsidian, shortcodes ni componentes MDX. Una vista correcta aquí no garantiza una salida idéntica en el destino.

• Encabezados ATX de `#` a `######` y encabezados subrayados.
• Negrita, cursiva, tachado, código en línea, citas y separadores.
• Listas ordenadas, listas con viñetas y casillas de tarea.
• Enlaces, imágenes, tablas y bloques de código sin resaltado automático.

Markdown a HTML y saneamiento

Marked convierte el Markdown a una cadena HTML, pero su documentación advierte que no sanea esa salida. Por eso FunnyTools pasa el resultado por DOMPurify antes de insertarlo. El saneamiento elimina elementos, atributos o URL que puedan crear ejecución de script en el contexto del navegador. Un ejemplo con `<script>` o un atributo `onerror` no debe ejecutarse en la vista.

Saneado no significa que el texto sea verdadero, accesible, legal o apropiado para publicar. Un enlace HTTPS puede apuntar a una página engañosa; una imagen remota puede revelar una solicitud al servidor que la aloja; el contenido puede incluir datos personales. Revisa destinos, permisos, texto alternativo y derechos de uso. No pegues secretos con la expectativa de que DOMPurify los ocultará.

HTML sin procesar dentro de Markdown

Algunos dialectos permiten etiquetas HTML crudas dentro del Markdown. Marked puede interpretarlas y DOMPurify conserva únicamente la parte que considera segura según su configuración. Como consecuencia, una etiqueta o atributo personalizado puede desaparecer. Esto es intencional en una vista pública y puede diferir de un CMS que permita componentes propios.

No uses esta página para comprobar plantillas con JavaScript, formularios, iframes, estilos complejos o componentes web. Tampoco evalúa React, Astro, Vue, MDX ni código incluido en bloques. Un bloque con `javascript` se muestra como texto dentro de `code`; no se ejecuta ni obtiene resaltado por lenguaje.

README, documentación y jerarquía

Para un README, comienza con un solo título principal, explica el propósito en un párrafo breve y organiza instalación, uso, configuración, pruebas y licencia con encabezados descendentes. Evita saltar niveles solo para conseguir un tamaño visual. Los enlaces relativos, badges e imágenes dependen de la ruta final del repositorio y pueden no resolverse igual en esta página.

La vista ayuda a detectar listas rotas, código fuera de su bloque, tablas sin separador y párrafos unidos. También conviene leer el texto sin formato: Markdown debe seguir siendo comprensible como fuente. Un documento accesible usa texto de enlace descriptivo, texto alternativo útil y tablas solo para datos tabulares, no para maquetar columnas.

Tablas, listas de tareas y código

Una tabla necesita una fila de encabezados y otra con guiones, por ejemplo `| Campo | Valor |` seguida de `| --- | --- |`. Las barras dentro de una celda requieren escape según el contexto. Las listas de tareas usan `- [ ]` y `- [x]`; la vista muestra casillas, pero no guarda cambios interactivos como estado de proyecto.

Los bloques de código se delimitan con tres acentos graves y pueden llevar una etiqueta como `js` o `bash`. Esta implementación conserva la clase informativa generada por el parser, pero no carga una biblioteca de resaltado. El HTML descargado incluye estilos para `pre` y `code`, no coloreado semántico. Comprueba que las vallas estén cerradas para no convertir el resto del documento en código.

Enlaces e imágenes en la vista previa

Los enlaces se renderizan, pero esta herramienta evita la navegación al hacer clic dentro del panel para que una prueba no te saque de la página. Copia la URL y verifícala por separado antes de publicar. Las rutas relativas como `./docs/guia.md` no conocen la ubicación futura del archivo y pueden apuntar a una dirección distinta aquí.

Las imágenes remotas pueden generar solicitudes desde el navegador al dominio indicado. No uses URL privadas, tokens firmados o recursos que no deban consultarse. Añade texto alternativo con `` y confirma tamaño y licencia en el destino. El saneamiento no descarga, optimiza ni incorpora la imagen al HTML.

Copiar fragmento y descargar documento HTML

«Copiar HTML» envía al portapapeles solo el fragmento saneado de la vista, apropiado para inspeccionar o pegar en un editor que acepte HTML. No incluye estilos de FunnyTools ni una página completa. Al pegar en un CMS, su propio saneador puede eliminar más etiquetas o cambiar clases.

«Descargar HTML» crea un documento autónomo con declaración HTML5, codificación UTF-8, viewport y CSS básico para texto, código, tablas, citas e imágenes. Los recursos enlazados siguen siendo externos y las rutas relativas siguen necesitando un contexto. Revisa el archivo fuera de línea y no lo confundas con una publicación en el sitio final.

Privacidad, rendimiento y límites

El Markdown se procesa en esta pestaña y no se envía a FunnyTools ni se guarda como borrador. El contenido copiado o descargado sí pasa al portapapeles o sistema de archivos del dispositivo. Sigue las reglas de tu organización y utiliza datos ficticios si no controlas extensiones, sincronización o historial.

Documentos muy grandes pueden hacer lenta la actualización en cada pulsación. Divide manuales extensos o usa el generador de documentación del proyecto para enlaces, índices y pruebas completas. La herramienta no revisa ortografía, enlaces rotos, accesibilidad automática, frontmatter YAML, metadatos SEO, estilos del CMS ni validez de un repositorio.

Cómo utilizarla paso a paso

1. Conserva el archivo original y pega una copia del Markdown en el editor.
2. Revisa jerarquía de encabezados, listas, tablas, citas, enlaces, imágenes y código.
3. Prueba contenido HTML no confiable y confirma que no se ejecutan scripts ni atributos peligrosos.
4. Copia el fragmento saneado o descarga el documento HTML completo según el destino.
5. Haz una vista previa final en GitHub, CMS o plataforma real porque cada dialecto puede variar.

Situaciones en las que resulta útil

• Revisar un README antes de hacer commit en un repositorio.
• Comprobar una tabla y una lista de tareas para documentación técnica.
• Convertir un borrador Markdown a un fragmento HTML saneado.
• Detectar una valla de código sin cerrar o una lista con sangría incorrecta.
• Preparar una página HTML simple para lectura local, sin publicar el contenido.

Ejemplos completos

Límites y comprobaciones importantes

• La salida de Marked se sanea con DOMPurify antes de insertarse o exportarse.
• No se admiten Mermaid, LaTeX, MDX, wikilinks ni extensiones específicas de cada plataforma.
• Los bloques de código no ejecutan ni resaltan automáticamente el lenguaje.
• Los clics en enlaces de la vista se bloquean; verifica cada destino por separado.
• El borrador no se guarda y desaparece al recargar la página.

Preguntas frecuentes