TK
Herramientas para desarrolladores

Vista previa Markdown

Escribe Markdown, ve HTML. CommonMark más tablas, strikethrough y diagramas Mermaid. Exporta PDF real localmente — sin diálogo de impresión.

Las entradas se quedan en este dispositivo. Cada herramienta para desarrolladores en TaskKit corre por completo en tu navegador. Tokens, payloads y texto pegado no se transmiten ni a TaskKit ni a terceros.

Qué hace esta herramienta

Vista previa Markdown en vivo. Escribes a la izquierda, ves el HTML renderizado a la derecha. Soporta:

  • CommonMark completo — encabezados, listas, énfasis, código en línea y en bloque, blockquotes, enlaces, imágenes.
  • Tablas GFM — sintaxis |---|---| con alineación opcional.
  • Tachado — ~~texto~~.
  • HTML crudo escapado — si escribes <script>... se renderiza literal, no se ejecuta.
  • Enlaces saneados — javascript: y data: se descartan; solo http(s):, mailto: y enlaces relativos pasan.

Tres modos de vista: dividida (editor + vista previa), solo editor, solo vista previa.

Cuándo la usarías

  • Redactar un README, un issue de GitHub o un mensaje de PR antes de publicarlo.
  • Verificar cómo se renderiza una tabla con muchas columnas.
  • Convertir notas Markdown a HTML para pegarlo en un correo o documento.
  • Entender qué sintaxis acepta tu plataforma — los detalles GFM importan.

Cómo funciona

El parser es marked con sanitización mediante DOMPurify. La sanitización quita scripts, atributos peligrosos, esquemas de URL no permitidos y elementos sin contenido textual confiable.

Todo en local. El HTML resultante es para tu copia/pega o para previsualización; no se sube a ningún sitio.

Diagramas Mermaid

Los bloques fenced etiquetados como mermaid se pasan a la biblioteca Mermaid y se renderizan en SVG en vivo en la vista previa. La biblioteca se importa dinámicamente la primera vez que aparece un diagrama, así que quien no escriba un gráfico nunca la descarga. Mermaid corre con securityLevel: "strict" — sin JavaScript inline, sin HTML <foreignObject>, sin fetches externos de imágenes.

Tipos de diagrama totalmente soportados: flowchart, sequence, class, state, ER, journey, gitGraph, timeline, mindmap, gantt, pie. Las variantes architecture-beta y de icon-pack renderizan su geometría y layout pero pierden los iconos (los icon-packs se buscan en CDNs por defecto — incompatible con la postura de privacidad de esta herramienta, que nunca hace llamadas de red durante render o export).

Exportación a PDF

El botón Exportar PDF produce un PDF real descargable — no un atajo al diálogo de impresión — mediante:

  1. Clonar el DOM de la vista previa en vivo (con los SVG de Mermaid ya renderizados).
  2. Rasterizar cada <svg> a un <img> PNG plano.
  3. Paginación consciente de elementos — se insertan separadores para que párrafos, tablas y diagramas no se corten en mitad por un límite de página.
  4. html2canvas-pro captura el escenario fuera de pantalla; pdf-lib compone el PDF.
  5. Se dispara la descarga del navegador.

Sin subida, sin window.open, sin diálogo de impresión. Toda la tubería corre solo en el navegador y se importa dinámicamente la primera vez que exportas.

Notas

¿Por qué se escapa el HTML crudo? Porque mostrar HTML arbitrario de una entrada de usuario es una vía rápida a XSS. La sanitización lo bloquea por defecto. Si necesitas inyectar HTML real (rara vez), usa una herramienta distinta.

¿Y MathJax / KaTeX? No incluido. Para Markdown matemático, usa una herramienta dedicada (Obsidian, VS Code con extensión, etc.).

¿Mermaid / diagramas? Tampoco. Esto es Markdown puro con extensiones GFM mínimas.

¿Front matter YAML? Se renderiza como bloque de código por defecto. Si tu plataforma lo procesa (Hugo, Jekyll), aquí solo verás el bloque crudo.

Herramientas relacionadas