Vista Previa de Markdown
Escribe Markdown y obtén vista previa de HTML en vivo
Borrador Markdown
Vista Previa en Vivo
¿Qué es la Vista Previa de Markdown?
La Vista Previa de Markdown es una herramienta de renderizado en tiempo real que te muestra exactamente cómo aparecerá tu código fuente Markdown cuando se convierta a HTML. Usando una interfaz de panel dividido, escribes Markdown sin procesar en el lado izquierdo mientras el lado derecho muestra el resultado renderizado en vivo al instante. Esta retroalimentación visual inmediata elimina las conjeturas sobre el formato de Markdown—puedes ver cómo aparecen los encabezados, si los enlaces funcionan, cómo se renderizan los bloques de código y si la sintaxis de la tabla es correcta, todo sin salir del editor. No necesitas guardar, hacer commit y hacer push en GitHub para ver cómo se ve tu documentación; las herramientas de vista previa traen esa gratificación instantánea directamente a tu flujo de trabajo.
CommonMark es la especificación estándar de Markdown que siguen la mayoría de las herramientas de vista previa, garantizando un renderizado consistente entre plataformas. Esta herramienta implementa análisis compatible con CommonMark, por lo que la vista previa que ves coincide con cómo tu contenido se renderizará en cualquier plataforma que use un analizador CommonMark. Para características específicas de GitHub como listas de tareas, tachado y autoenlaces, la vista previa también incluye compatibilidad con extensiones GitHub Flavored Markdown.
Las herramientas de vista previa son invaluables para cualquier creador de contenido que trabaje con Markdown. Los escritores técnicos que redactan documentación pueden validar listas anidadas complejas y el formato de bloques de código. Los mantenedores de código abierto que escriben READMEs pueden asegurarse de que las tablas de características se rendericen correctamente. Los desarrolladores que escriben mensajes de commit, descripciones de pull request y comentarios de problemas pueden formatearlos correctamente antes de enviarlos. Los blogueros que redactan publicaciones pueden ver la tipografía y el énfasis como lo verán sus lectores. Al proporcionar retroalimentación visual instantánea, las herramientas de vista previa de Markdown aceleran la creación de contenido y eliminan sorpresas de formato.
Cómo usar la Vista Previa de Markdown
Sigue estos pasos para obtener vista previa de Markdown como HTML en tiempo real. Cada paso utiliza los botones y paneles reales en esta página.
Pegar, subir o cargar ejemplo
Escribe o pega Markdown en el panel izquierdo Borrador Markdown, o haz clic en Subir para cargar un archivo .md. Haz clic en Ejemplo para ver documentos de API de suscriptor de ejemplo. Compatible con CommonMark y GFM (tablas, listas de tareas, bloques de código).
Ver vista previa en vivo
El panel derecho Vista Previa en Vivo se actualiza mientras escribes. Ve encabezados, listas, tablas y bloques de código renderizados. Sin retrasos—retroalimentación instantánea.
Copiar o descargar HTML
Haz clic en Copiar HTML o Descargar HTML para usar la salida. Usa Limpiar para empezar de nuevo. Todo el procesamiento se ejecuta en tu navegador.
Cuándo realmente lo usarías
Escribir y editar documentación
Repositorios de GitHub, proyectos ReadTheDocs y sitios de documentación construidos con MkDocs o Hugo usan Markdown. Las herramientas de vista previa te permiten redactar y perfeccionar la documentación sin esperar compilaciones o despliegues. Ve cómo se renderizan tus tutoriales, documentación de API y guías antes de confirmarlas en control de versiones.
Redacción de entradas de blog y artículos
Las plataformas de blog como Jekyll, Hugo, 11ty y Ghost aceptan Markdown para contenido. Redacta y formatea tu entrada de blog en la herramienta de vista previa, verifica la tipografía y el énfasis, luego cópiala en tu plataforma de blogging. Puedes ver exactamente cómo aparecerá tu contenido a los lectores antes de publicar.
Composición de problemas de GitHub y PRs
Al escribir descripciones detalladas de problemas de GitHub o pull request, las herramientas de vista previa te permiten formatear tu mensaje perfectamente. Usa la vista previa para verificar que tus tablas se rendericen correctamente, tus bloques de código tengan resaltado de sintaxis adecuado y tu formato sea profesional antes de enviar. Las descripciones de pull request complejas con múltiples secciones, listas y ejemplos de código se benefician enormemente de la vista previa en vivo.
Creación de notas de lanzamiento y registros de cambios
Los lanzamientos de software requieren notas de lanzamiento claras y bien formateadas. Usa la vista previa de Markdown para redactar registros de cambios con formato adecuado, encabezados de versión, listas de características y advertencias de cambios incompatibles. Las herramientas de vista previa te permiten verificar que tu registro de cambios sea claro y escaneable antes de agregarlo a tu lanzamiento. Los registros de cambios profesionales se ven pulidos y creíbles.
Preguntas frecuentes
¿La vista previa muestra exactamente cómo se renderizará mi contenido en todas partes?
La vista previa utiliza análisis compatible con CommonMark más extensiones GitHub Flavored Markdown, por lo que representa con precisión cómo aparecerá tu contenido en la mayoría de las plataformas modernas. Sin embargo, algunas plataformas tienen estilos personalizados o extensiones adicionales. Por ejemplo, la interfaz web de GitHub agrega estilos CSS personalizados que no se reflejan en la vista previa HTML sin procesar. Verifica la documentación de tu plataforma de destino si necesitas coincidencia visual exacta.
¿Qué extensiones de Markdown se admiten?
Esta vista previa admite sintaxis central de CommonMark más extensiones GitHub Flavored Markdown: tablas, listas de tareas (- [ ] elementos), tachado (~~texto~~), autoenlaces y sintaxis de mención. No admite todos los sabores posibles de Markdown (como algunos shortcodes personalizados de Hugo o extensiones de Pandoc), pero cubre las características más utilizadas.
¿Puedo copiar el HTML generado?
Sí. Haz clic en "Copiar HTML" para copiar la salida HTML renderizada al portapapeles. Luego puedes pegarlo en cualquier editor HTML, cliente de correo electrónico o formulario web que acepte HTML. El HTML es limpio y semánticamente correcto, generado directamente desde el análisis de tu Markdown. Esto es útil para crear correos electrónicos, páginas web o contenido para sistemas que no aceptan Markdown de forma nativa.
¿Los caracteres especiales se escapan correctamente en la salida?
Sí. El analizador escapa automáticamente los caracteres especiales HTML (&, <, >, ", ') en el contenido de texto, previniendo ataques de inyección y errores de renderizado. Si tu Markdown contiene estos caracteres en texto regular, aparecerán correctamente en la salida renderizada sin romper la estructura HTML. También puedes usar entidades HTML directamente en Markdown si es necesario.
¿Cómo maneja la herramienta los saltos de línea?
La herramienta sigue las reglas de CommonMark: un salto de línea único en tu fuente se convierte en un espacio en la salida. Para crear un salto de línea real (<br>), usa dos espacios al final de la línea seguidos de una nueva línea, o usa una barra invertida antes de la nueva línea. Para saltos de párrafo, usa una línea en blanco (dos nuevas líneas consecutivas). La especificación CommonMark tiene ejemplos detallados.
¿Puedo incluir HTML sin procesar en mi Markdown?
Sí. Markdown permite bloques HTML sin procesar e HTML en línea. Si escribes HTML directamente en tu Markdown, se incluirá tal cual en la salida. Esto es útil para características que Markdown no admite de forma nativa. Sin embargo, reduce la portabilidad y legibilidad de tu fuente. Usa HTML con moderación—por lo general, la sintaxis de Markdown es suficiente para documentación y contenido.