Editor Markdown
¿Qué es Markdown?
Markdown es un lenguaje de marcado ligero para escribir contenido estructurado en texto plano legible. Títulos, listas, enlaces, imágenes, citas, bloques de código y tablas pueden expresarse con caracteres simples y luego renderizarse como HTML u otros formatos. Un editor Markdown ayuda a comparar fuente y vista previa, detectar errores de formato y preparar más rápido README, documentación, blogs, notas, bases de conocimiento, changelogs y textos de producto. Markdown se mantiene deliberadamente simple, pero cada plataforma admite extensiones distintas como GitHub-Flavored Markdown, frontmatter, listas de tareas o diagramas Mermaid. Por eso la representación final debe revisarse en el sistema donde se publicará.
Cómo usar
Cómo usar
- Ingresa texto Markdown en el editor de la izquierda
- El panel derecho muestra la vista previa en tiempo real
- Usa los botones de la barra de herramientas para insertar sintaxis habitual
- La barra inferior muestra el recuento de palabras, caracteres y líneas
- El contenido se guarda automáticamente en el almacenamiento local del navegador
Funciones
Consejos de edición
- La renderización de la vista previa puede variar entre plataformas; verifica el resultado final en el sistema de destino cuando uses tablas, HTML o funciones extendidas de Markdown.
- El guardado automático resulta útil al redactar, pero conserva una copia separada de las notas importantes antes de borrar los datos del navegador o cambiar de dispositivo.
Casos de uso
Principio técnico
La renderización de Markdown suele tener tres pasos: un tokenizador divide el texto en unidades sintácticas como encabezados, párrafos, listas y bloques de código; un parser convierte el flujo de tokens en un árbol de sintaxis abstracta (AST) según las reglas de la gramática; un renderizador recorre el AST y produce el HTML correspondiente. Las bibliotecas JavaScript más comunes incluyen marked, markdown-it, remark y micromark: difieren en tamaño del paquete, velocidad y extensibilidad, pero todas siguen la especificación CommonMark. CommonMark corrigió las ambigüedades de la gramática original de Markdown (por ejemplo, cómo indentar listas anidadas, cómo encontrar el límite del código en línea) para que diferentes implementaciones produzcan el mismo resultado. Sobre CommonMark, GitHub añadió GFM (GitHub Flavored Markdown), que agrega tablas, listas de tareas (- [ ]), tachado (~~), autolinks y bloques de código delimitados; GFM es el estándar de facto hoy, y la mayoría de herramientas Markdown modernas lo habilitan por defecto. El resaltado de sintaxis en bloques de código se realiza habitualmente por highlight.js o Prism.js, que reconocen la etiqueta de idioma en el momento de renderizar y etiquetan palabras clave, cadenas y comentarios con clases CSS que un tema estiliza con color. Para evitar que el HTML suministrado por el usuario provoque XSS, los renderizadores normalmente pasan la salida por DOMPurify o un filtro de lista blanca similar que elimina script, iframe y atributos de eventos on*, de modo que pegar el Markdown de otra persona no pueda ejecutar un script malicioso.
- Flujo de parsing: el texto bruto pasa por Tokenizador -> Parser -> Renderizador para convertirse en HTML, con el AST como representación intermedia.
- Estándares: CommonMark es la gramática oficial; GFM la extiende con tablas, listas de tareas, tachado, bloques de código delimitados y autolinks.
- Comparación de bibliotecas: marked es pequeño y rápido, markdown-it tiene un rico ecosistema de plugins, y remark se apoya en el ecosistema unified y es adecuado para pipelines de procesamiento de documentos.
- Resaltado de sintaxis: highlight.js o Prism.js leen la etiqueta de idioma del bloque de código en el momento del parseo y etiquetan palabras clave, cadenas y comentarios con clases CSS.
- Protección XSS: bibliotecas como DOMPurify filtran el HTML de salida contra una lista blanca, eliminando script, iframe y atributos de eventos on* para prevenir inyección de scripts.
- Vista previa en vivo: el editor escucha eventos de entrada, aplica debounce a cada cambio, reparsea y actualiza el DOM del lado derecho mediante diff para equilibrar capacidad de respuesta y rendimiento.
Ejemplos
Encabezados, listas y bloques de código
# Encabezado 1
## Encabezado 2
- Elemento de lista A
- Elemento de lista B
- Elemento de lista anidado
```javascript
function hello() {
console.log('Hello Markdown');
}
```Tablas
| Herramienta | Tipo | Tamaño |
|-------------|--------|--------|
| Vite | Build | Pequeño|
| Webpack | Build | Grande |
| Rollup | Bundle | Medio |Citas y enlaces
> "Markdown permite que la escritura vuelva al contenido en sí."
> -- John Gruber
Referencia: [CommonMark Spec](https://commonmark.org)Preguntas frecuentes
¿Qué variante de Markdown es compatible?
La mayoría de los editores admiten CommonMark más las extensiones de GitHub Flavored Markdown: tablas, tachado, listas de tareas y bloques de código con indicadores de lenguaje. Algunos incluyen MathJax/KaTeX para bloques $math$ y Mermaid para diagramas. Revisa la barra de herramientas para ver qué hay disponible.
¿Se sube el documento?
No. El análisis y el renderizado de Markdown ocurren en tu navegador mediante una biblioteca JS (normalmente markdown-it o remark). Tu borrador nunca sale del dispositivo.
¿Cómo funciona la vista previa en vivo?
A medida que escribes, el panel de origen se analiza y se renderiza como HTML en el panel de vista previa. El desplazamiento sincronizado mantiene los dos paneles alineados emparejando las posiciones de los párrafos. La mayoría de los editores también admite pantalla completa y vista lado a lado.
¿Puedo exportar el documento?
Sí: descárgalo como .md (la fuente original), HTML (renderizado, listo para incrustar en una web) o PDF (impreso a través del motor de impresión del navegador). La salida en PDF conserva encabezados, listas, bloques de código e imágenes incrustadas. Para PDFs con precisión de píxeles, pega el HTML en un procesador de textos real.
¿Guardará mi borrador si cierro la pestaña?
La mayoría de los editores guardan automáticamente en localStorage, así que al reabrir el mismo navegador se recupera el borrador. Cerrar una ventana privada o borrar los datos del sitio lo elimina. Para una persistencia real, exporta periódicamente el archivo .md a tu sistema de archivos o a un repositorio git.
¿Se suben las imágenes si las pego?
Algunos editores almacenan las imágenes pegadas como base64 en línea (visible en la fuente del markdown). Otros las suben a un servicio de alojamiento de imágenes: revisa el comportamiento de la página. Si la privacidad importa, guarda primero las imágenes en tu sistema de archivos y haz referencia a ellas con rutas relativas.
¿Puedo insertar tablas, fórmulas o diagramas?
Las tablas de GitHub Flavored Markdown (| col1 | col2 |) funcionan en todas partes. Los bloques matemáticos ($x^2$) y los diagramas Mermaid (```mermaid) requieren soporte explícito; revisa la barra de herramientas. Donde se admite, la vista previa los renderiza en vivo.