Softonic

Previsualizador de Markdown

Paso 1 / 2
Siguiente

Escribe a la izquierda, observa el HTML renderizado a la derecha. El previsualizador habla Markdown con estilo de GitHub: tablas, listas de tareas, bloques de código cercados con resaltado de sintaxis, tachado, URLs autoenlazadas y HTML en línea. Útil para redactar un README antes de hacer un commit, verificar cómo se verá un comentario en un PR, o simplemente aprender la sintaxis de Markdown observando cada pulsación de tecla renderizada.

Cómo usar el previsualizador

  1. 1

    Escribe Markdown

    El panel izquierdo toma Markdown en bruto. Cada cambio vuelve a renderizar el panel derecho al instante.

  2. 2

    Observa la vista previa en HTML

    El panel derecho muestra la salida renderizada estilizada como GitHub.

  3. 3

    Alternar modo

    Vista lado a lado, solo vista previa, o solo fuente para escribir sin distracciones.

  4. 4

    Copia el HTML

    Obtén el HTML renderizado si necesitas pegarlo en un cliente de correo o CMS.

Lo que este previsualizador soporta

  • CommonMark: encabezados, párrafos, énfasis, listas, citas, bloques de código, enlaces, imágenes, reglas horizontales.
  • Extensiones GFM: tablas con alineación de columnas, listas de tareas (- [ ] y - [x]), tachado con ~~, URLs autoenlazadas y bloques de código cercados con pistas de lenguaje.
  • Resaltado de sintaxis: más de 100 lenguajes a través de highlight.js, JavaScript, Python, Go, Rust, SQL, YAML, etc.
  • HTML en bruto: HTML en línea se pasa (sanitizado por seguridad).
  • Matemáticas (opcional): $...$ en línea y $$...$$ bloque si habilitas la extensión de matemáticas.

No soportado

  • Enlaces wiki estilo Obsidian personalizados ([[Página]]), esos son solo para Obsidian.
  • Divisiones cercadas de Pandoc (:::), solo para Pandoc.
  • Inclusiones del lado del servidor o etiquetas de plantilla {% ... %}.

Usos típicos

  • Redactar un README fuera del IDE y pegar la versión final.
  • Verificar el formato de comentarios de PR antes de publicar, el cuadro de comentarios de GitHub no previsualiza correctamente los bloques de código.
  • Convertir notas en HTML cuando necesites pegar contenido estilizado en un correo o un CMS que acepte HTML en bruto.
  • Enseñar Markdown, la vista lado a lado hace que la sintaxis sea obvia.

Rendimiento

El renderizado utiliza un parser Markdown-it con el plugin GFM, funcionando completamente en el navegador. Documentos de unos pocos cientos de KB se renderizan en milisegundos; los muy grandes (un libro completo en un solo archivo) pueden titubear mientras escribes, divídelos en capítulos si eso sucede.

Exportando

  • Copiar HTML te da el <div> con el contenido renderizado, clases estilizadas incluidas.
  • Descargar .md guarda la fuente.
  • Imprimir a PDF desde el diálogo de impresión de tu navegador produce una copia PDF estilizada de la vista renderizada.

Preguntas frecuentes

GitHub aplica su propio CSS sobre GFM. La salida HTML debería coincidir; el estilo (fuentes, espaciado) es suyo. Para paridad exacta, usa el interruptor de tema “renderizado en GitHub”.

Sí, si habilitas la extensión de matemáticas, en línea $...$ y bloque $$...$$ se renderizan con KaTeX. Está desactivado por defecto para mantener bajo el peso de la página.

Está sanitizado, etiquetas seguras como <div>, <span>, <table>, <img> pasan; <script> y controladores de eventos en línea son eliminados.

Cientos de KB funcionan sin problemas. Para archivos muy grandes, desactiva el renderizado en vivo y renderiza bajo demanda.

El renderizado es completamente del lado del cliente. El contenido no se envía a ningún lado. Si actualizas la página, los borradores se pierden a menos que el navegador preserve el estado del formulario.

Herramientas relacionadas

Referencia de la tabla ASCII

Tabla ASCII completa del 0 al 127 con decimal, hex, octal, binario y referencia numérica HTML para cada carácter, incluidos los códigos de control como NUL, LF y DEL.

Referencia de caracteres HTML

Lista buscable de entidades HTML, sus códigos nombrados y numéricos, y una copia con un clic para caracteres y símbolos especiales.

Referencia de atajos de teclado

Busca los atajos predeterminados documentados de VS Code, Chrome y Bash con GNU Readline en macOS, Windows y Linux.

Generador de letras aleatorias

Genera letras aleatorias A-Z. Elige la cantidad, usa mayúsculas, minúsculas o mezcla de ambas, y aplica el resultado en juegos, consignas o clase.

Generador de Paletas de Color

Genera paletas monocromáticas, análogas, complementarias, triádicas o tetrádicas desde un color base HEX y exporta variables CSS listas para copiar.

Generador de EditorConfig

Genera un archivo .editorconfig con tu estilo y tamaño de indentación, fin de línea, charset y reglas de espacios para un formato consistente en IDEs y editores.

Herramienta disponible en otros idiomas