Editor Markdown con vista previa en tiempo real y syntax highlighting
También podrías necesitar
Markdown (GFM — GitHub Flavored Markdown) es el formato estándar para READMEs, documentación técnica, issues, PRs y wikis. Esta herramienta renderiza tu Markdown en tiempo real sin enviar datos a ningún servidor: todo el procesamiento — parsing, syntax highlighting y sanitización — ocurre directamente en tu navegador. El syntax highlighting usa highlight.js v11, la librería de referencia con soporte para más de 30 lenguajes comunes. La sanitización con DOMPurify v3 elimina XSS antes de insertar el HTML generado en el DOM, protegiendo tu entorno incluso si pegas Markdown de fuentes externas. La vista dividida (split view) permite editar y previsualizar simultáneamente, con scroll sincronizado entre ambos paneles.
¿Qué versión de Markdown soporta esta herramienta?
Soporta GFM (GitHub Flavored Markdown), que extiende el CommonMark estándar con: tablas, checklists (- [x] tarea), tachado (~~texto~~), URLs automáticos y bloques de código delimitados con triple backtick. GFM es el formato que usa GitHub para READMEs, Issues, Pull Requests y wikis.
¿El Markdown es seguro? ¿Puede haber XSS?
Sí, es seguro. El HTML generado por el parser se sanitiza con DOMPurify v3 antes de insertarse en el DOM. DOMPurify elimina etiquetas y atributos peligrosos (script, onerror, javascript: URLs) manteniendo todo el HTML legítimo de Markdown. Ningún dato se envía a servidores externos.
¿Qué lenguajes soporta el syntax highlighting?
El highlighting usa highlight.js con los ~30 lenguajes más comunes: JavaScript, TypeScript, Python, Go, Rust, Java, C/C++, C#, PHP, Ruby, Shell, SQL, HTML, CSS, JSON, YAML, Markdown, Dockerfile, y más. Para activarlo, especifica el lenguaje tras los triple backtick: ```typescript, ```python, etc.
¿Qué hace el scroll sincronizado?
En modo Split, al desplazarte en el editor, la vista previa se mueve proporcionalmente al mismo punto del documento, y viceversa. La sincronización es porcentual: si estás al 50% del editor, la preview también muestra el 50% del documento. Es una aproximación — los paneles tienen alturas de contenido distintas, pero funciona bien para documentos largos.
¿Puedo usar este editor para escribir READMEs de GitHub?
Sí. Esta herramienta implementa GFM, el mismo dialecto que usa GitHub. Todo lo que funciona aquí (tablas, checklists, syntax highlighting con backticks, blockquotes, listas anidadas) funcionará igual en GitHub. La única diferencia es que GitHub tiene extensiones adicionales (menciones @usuario, referencias a issues #123) que son específicas de su plataforma.