Vista previa de Markdown

¿Qué es Markdown?

Markdown es un lenguaje de marcado ligero creado por John Gruber en 2004. Usa símbolos de formato en texto plano como asteriscos, almohadillas y guiones para indicar estructura: encabezados, negrita, cursiva, listas, enlaces y bloques de código. Un previsualizador de Markdown convierte ese texto plano en HTML formateado para que puedas ver exactamente cómo quedará el documento final antes de publicarlo. La especificación original se describe en la documentación Daring Fireball de Gruber, y el formato ha sido formalizado como CommonMark.

Markdown se ha convertido en el formato de escritura predeterminado para documentación de desarrolladores, archivos README, generadores de sitios estáticos (Jekyll, Hugo, Astro), wikis y bases de conocimiento. GitHub, GitLab, Bitbucket, Stack Overflow, Reddit y Notion admiten Markdown de forma nativa. Como el código fuente es texto plano, los archivos Markdown son triviales de gestionar con Git: hacer diff entre ramas y fusionar cambios sin conflictos en secciones que no se solapan.

Una herramienta de vista previa de Markdown analiza tu entrada y la convierte a HTML en tiempo real. Esto te permite detectar errores de formato, enlaces rotos y anidamiento inesperado antes de confirmar un archivo o publicar una página. Este previsualizador se ejecuta íntegramente en tu navegador sin llamadas al servidor, por lo que puedes trabajar con documentación privada o sensible sin enviar el contenido por la red.

¿Por qué usar un previsualizador de Markdown online?

Escribir Markdown en un editor sin vista previa significa adivinar el resultado. Un previsualizador en vivo cierra ese ciclo de retroalimentación de forma inmediata.

Casos de uso de la vista previa de Markdown

Referencia de sintaxis Markdown

La tabla siguiente relaciona la sintaxis Markdown más común con su resultado renderizado y el elemento HTML correspondiente. Cubre la base de CommonMark que prácticamente todos los analizadores de Markdown admiten.

Variantes de Markdown comparadas

Distintas plataformas amplían la especificación original de Markdown con características adicionales. Saber qué variante es tu objetivo te ayuda a evitar sintaxis que falla silenciosamente en otro renderizador.

Ejemplos de código: renderizar Markdown mediante programación

Cuando necesitas renderizar Markdown dentro de una aplicación en lugar de una herramienta de navegador, usa una de estas bibliotecas. Cada ejemplo convierte una cadena Markdown en una cadena HTML.

import { marked } from 'marked'

const md = '# Hello\n\nThis is **Markdown**.'
const html = marked(md)
// → "<h1>Hello</h1>\n<p>This is <strong>Markdown</strong>.</p>\n"

// With options
marked.setOptions({ gfm: true, breaks: true })
const gfmHtml = marked('Line one\nLine two')
// → "<p>Line one<br>Line two</p>\n"

import markdown

md = '# Hello\n\nThis is **Markdown**.'
html = markdown.markdown(md)
# → '<h1>Hello</h1>\n<p>This is <strong>Markdown</strong>.</p>'

# With extensions
html = markdown.markdown(md, extensions=['fenced_code', 'tables'])

# Convert a file
with open('README.md') as f:
    html = markdown.markdown(f.read(), extensions=['extra'])

package main

import (
	"bytes"
	"fmt"
	"github.com/yuin/goldmark"
)

func main() {
	source := []byte("# Hello\n\nThis is **Markdown**.")
	var buf bytes.Buffer
	if err := goldmark.Convert(source, &buf); err != nil {
		panic(err)
	}
	fmt.Println(buf.String())
	// → <h1>Hello</h1>
	// → <p>This is <strong>Markdown</strong>.</p>
}

# Convert Markdown file to HTML
pandoc README.md -f markdown -t html -o output.html

# Convert with GitHub Flavored Markdown
pandoc README.md -f gfm -t html --standalone -o output.html

# Pipe from stdin
echo '# Hello **world**' | pandoc -f markdown -t html
# → <h1>Hello <strong>world</strong></h1>

Preguntas frecuentes