Vista previa de Markdown

Escribe Markdown en un lado y velo renderizado en vivo en el otro — encabezados, negrita, cursiva, listas, bloques de código y enlaces, todo previsualizado al instante en tu navegador.

¿Te ha ayudado esta calculadora?

¿Qué es Vista previa de Markdown?

Markdown es la sintaxis de formato ligero detrás de los README, las entradas de blog, los mensajes de chat, la documentación e innumerables otros lugares donde quieres un formato simple y legible sin escribir HTML sin procesar. Como Markdown es texto plano, es fácil de escribir en cualquier lugar — pero también es fácil equivocarse ligeramente en la sintaxis y no notarlo hasta que ya se ha publicado. Esta vista previa renderiza tu Markdown mientras escribes, en paralelo con la fuente, para que puedas detectar errores de formato de inmediato — un espacio faltante después de un #, un bloque de código sin cerrar, o una lista que no se separó del párrafo anterior — antes de confirmar un README, publicar una entrada o enviar un mensaje con formato.

Cuándo Usar Esta Calculadora

Writing a GitHub or GitLab README and want to verify formatting before committing
Drafting a Markdown post for a blog platform, documentation site, or wiki
Checking a Markdown email or chat message renders correctly before sending
Learning Markdown syntax by experimenting with different formatting and seeing instant results
Converting a short Markdown snippet to HTML for pasting into a CMS or email template
Debugging a Markdown document where some formatting isn't rendering as expected

Pasos:

Escribe o pega tu Markdown en el panel izquierdo.
Observa cómo la vista previa HTML renderizada se actualiza al instante a la derecha.
Ajusta tu sintaxis hasta que la vista previa coincida con lo que pretendías.
Copia tu código fuente Markdown terminado una vez que estés satisfecho con el resultado.

Fórmula

# Encabezado →

Encabezado

**negrita** → negrita *cursiva* → cursiva `código` → código [texto](url) → texto - elemento →

elemento

Casos de uso

Previsualizar un README de GitHub o GitLab antes de confirmarlo
Redactar mensajes con formato para Slack, Discord u otras apps de chat compatibles con Markdown
Verificar el formato de una entrada de blog o documentación antes de publicarla
Aprender la sintaxis de Markdown experimentando y viendo resultados inmediatos
Convertir rápidamente un fragmento corto de Markdown a HTML para pegarlo en otro sitio

Beneficios Clave

Ve tu Markdown renderizado al instante, en paralelo con la fuente
Detecta errores de sintaxis antes de publicar en cualquier sitio
Funciona completamente sin conexión en tu navegador — nada se sube
Gratis, sin registro, sin límites de tamaño de archivo para el uso típico

Consejos Profesionales

Añade una línea en blanco antes y después de listas y bloques de código para el renderizado más fiable en distintos analizadores de Markdown
Usa doble asterisco para negrita y asterisco simple (o guion bajo) para cursiva para evitar ambigüedades
Previsualiza primero en esta herramienta y luego revisa la plataforma de destino (GitHub, Slack, etc.), ya que algunas admiten sintaxis adicional como tablas
Mantén los encabezados en secuencia (no saltes de # a ###) para una mejor estructura del documento y accesibilidad

Errores Comunes que Debes Evitar

Olvidar la línea en blanco necesaria entre un párrafo y una lista siguiente
Omitir el espacio después de los símbolos # en los encabezados, lo que impide que se rendericen
Dejar un bloque de código (```) sin cerrar, lo que hace que el resto del documento se trate como código
Usar un solo asterisco para negrita en lugar de dos, produciendo cursiva en su lugar

Términos Clave Explicados

CommonMark: Una especificación estandarizada de la sintaxis Markdown, diseñada para reducir inconsistencias
GFM: GitHub-Flavored Markdown, un dialecto extendido que admite tablas y listas de tareas
Bloque de código: Un bloque delimitado por comillas invertidas triples (```) usado para formatear código multilínea
Formato en línea: Formato aplicado dentro de una sola línea, como *cursiva* o `código`, en contraposición a los elementos de bloque

Conceptos relacionados

[object Object]
[object Object]
[object Object]
[object Object]
[object Object]

Ejemplo

Escribir "## Hola\n\nEsto está en **negrita** y esto en *cursiva*." se renderiza como un encabezado de nivel 2 seguido de un párrafo con texto en negrita y cursiva.

Interpretación de sus resultados

El panel izquierdo muestra tu texto fuente Markdown en bruto y el panel derecho lo renderiza como HTML formateado en tiempo real. Cada pulsación de tecla actualiza la vista previa al instante, para que puedas ver el efecto de cada elemento de sintaxis de inmediato. Los problemas de renderizado más comunes suelen deberse al espaciado. La mayoría de los renderizadores requieren una línea en blanco entre un párrafo y una lista que le sigue. Los encabezados necesitan un espacio después de los símbolos #. Las vallas de código (```) deben estar en su propia línea para activar el renderizado de bloque de código. La vista previa es una aproximación cercana de cómo aparecerá tu Markdown en la mayoría de las plataformas (GitHub, Slack, Discord, etc.), pero cada plataforma tiene su propio renderizador con ligeras variaciones. Haz siempre una comprobación final en la plataforma de destino para cualquier cosa que vaya más allá del formato básico.

Preguntas frecuentes

¿Qué sintaxis de Markdown admite esta herramienta?

Encabezados (# a ######), negrita (**texto**), cursiva (*texto*), código en línea (`código`), bloques de código (```), enlaces ([texto](url)), listas con viñetas (- elemento), listas numeradas (1. elemento) y citas (> texto).

¿Se guarda o se sube mi contenido a algún sitio?

No. Todo se analiza y se renderiza completamente en tu navegador mediante JavaScript. Nada de lo que escribas se envía a ningún servidor, se almacena ni se registra.

¿Por qué mi formato no se muestra correctamente?

Markdown requiere una sintaxis exacta — por ejemplo, se necesita una línea en blanco entre un párrafo y una lista para que muchos renderizadores los separen correctamente, y los encabezados necesitan un espacio después de los símbolos #. Revisa si faltan espacios o saltos de línea alrededor del formato que estás usando.

¿Puedo usar esto para previsualizar un README de GitHub antes de confirmarlo (commit)?

Sí, para los elementos de Markdown comunes que admite esta herramienta. El renderizador de GitHub admite algunas extensiones adicionales de GitHub-Flavored Markdown (como tablas y listas de tareas) que esta vista previa ligera no incluye, así que siempre verifica el renderizado final directamente en GitHub para cualquier cosa más allá de la sintaxis básica.

What Markdown syntax does this tool support?

Headings (# through ######), bold (**text**), italics (*text*), inline code (`code`), code blocks (```), links ([text](url)), bulleted lists (- item), numbered lists (1. item), and blockquotes (> text).

Is my content saved or uploaded anywhere?

No. Todo se analiza y se renderiza completamente en tu navegador mediante JavaScript. Nada de lo que escribas se envía a ningún servidor, se almacena ni se registra.

Why isn't my formatting showing up correctly?

Can I use this to preview a GitHub README before committing?

¿Cuál es la diferencia entre Markdown y HTML?

Markdown es un lenguaje de marcado ligero que es fácil de escribir y leer como texto sin formato. HTML es un lenguaje de marcado completo con una sintaxis más compleja. Markdown se convierte a menudo en HTML para mostrarse. Esta herramienta renderiza Markdown como HTML en tiempo real.

How do I create a table in Markdown?

Markdown estándar no admite tablas, pero GitHub-Flavored Markdown sí. Usa el carácter de barra vertical (|) para separar columnas y guiones para el separador del encabezado. Este previsualizador no renderiza tablas: comprueba la renderización final en tu plataforma de destino.

Can I write LaTeX math in Markdown?

This previewer doesn't support LaTeX math. For math rendering, use a tool that supports KaTeX or MathJax. Some platforms like GitHub don't render LaTeX in Markdown either.

Herramientas relacionadas

Explorar más herramientas

Calculadora de relación de aspecto

Calculadora de ancho de banda

Calculadora de tiempo de descarga

Calculadora de Costo de Hosting en la Nube

Calculadora de costos de CDN

Calculadora de monetización de API

¿Qué es Vista previa de Markdown?

Cuándo Usar Esta Calculadora

Writing a GitHub or GitLab README and want to verify formatting before committing

Drafting a Markdown post for a blog platform, documentation site, or wiki

Checking a Markdown email or chat message renders correctly before sending

Learning Markdown syntax by experimenting with different formatting and seeing instant results

Converting a short Markdown snippet to HTML for pasting into a CMS or email template

Debugging a Markdown document where some formatting isn't rendering as expected

Pasos:

Escribe o pega tu Markdown en el panel izquierdo.

Observa cómo la vista previa HTML renderizada se actualiza al instante a la derecha.

Ajusta tu sintaxis hasta que la vista previa coincida con lo que pretendías.

Copia tu código fuente Markdown terminado una vez que estés satisfecho con el resultado.

Casos de uso

Previsualizar un README de GitHub o GitLab antes de confirmarlo

Redactar mensajes con formato para Slack, Discord u otras apps de chat compatibles con Markdown

Verificar el formato de una entrada de blog o documentación antes de publicarla

Aprender la sintaxis de Markdown experimentando y viendo resultados inmediatos

Convertir rápidamente un fragmento corto de Markdown a HTML para pegarlo en otro sitio

Consejos Profesionales

Añade una línea en blanco antes y después de listas y bloques de código para el renderizado más fiable en distintos analizadores de Markdown

Usa doble asterisco para negrita y asterisco simple (o guion bajo) para cursiva para evitar ambigüedades

Previsualiza primero en esta herramienta y luego revisa la plataforma de destino (GitHub, Slack, etc.), ya que algunas admiten sintaxis adicional como tablas

Mantén los encabezados en secuencia (no saltes de # a ###) para una mejor estructura del documento y accesibilidad

Errores Comunes que Debes Evitar

Olvidar la línea en blanco necesaria entre un párrafo y una lista siguiente

Omitir el espacio después de los símbolos # en los encabezados, lo que impide que se rendericen

Dejar un bloque de código (```) sin cerrar, lo que hace que el resto del documento se trate como código

Usar un solo asterisco para negrita en lugar de dos, produciendo cursiva en su lugar

Términos Clave Explicados

CommonMark: Una especificación estandarizada de la sintaxis Markdown, diseñada para reducir inconsistencias

GFM: GitHub-Flavored Markdown, un dialecto extendido que admite tablas y listas de tareas

Bloque de código: Un bloque delimitado por comillas invertidas triples (```) usado para formatear código multilínea

Formato en línea: Formato aplicado dentro de una sola línea, como *cursiva* o `código`, en contraposición a los elementos de bloque

Interpretación de sus resultados

Preguntas frecuentes

¿Qué sintaxis de Markdown admite esta herramienta?

¿Se guarda o se sube mi contenido a algún sitio?

No. Todo se analiza y se renderiza completamente en tu navegador mediante JavaScript. Nada de lo que escribas se envía a ningún servidor, se almacena ni se registra.

¿Por qué mi formato no se muestra correctamente?

¿Puedo usar esto para previsualizar un README de GitHub antes de confirmarlo (commit)?

What Markdown syntax does this tool support?

Is my content saved or uploaded anywhere?

No. Todo se analiza y se renderiza completamente en tu navegador mediante JavaScript. Nada de lo que escribas se envía a ningún servidor, se almacena ni se registra.

Why isn't my formatting showing up correctly?

Can I use this to preview a GitHub README before committing?

¿Cuál es la diferencia entre Markdown y HTML?

How do I create a table in Markdown?

Can I write LaTeX math in Markdown?

This previewer doesn't support LaTeX math. For math rendering, use a tool that supports KaTeX or MathJax. Some platforms like GitHub don't render LaTeX in Markdown either.

Vista previa de Markdown

¿Qué es Vista previa de Markdown?

Cuándo Usar Esta Calculadora

Pasos:

Fórmula

Encabezado

Casos de uso

Beneficios Clave

Consejos Profesionales

Errores Comunes que Debes Evitar

Términos Clave Explicados

Conceptos relacionados

Ejemplo

Interpretación de sus resultados

Preguntas frecuentes