Vista previa Markdown

Previsualizar Markdown con renderizado en vivo

Markdown
1
Vista previa

Escriba su Markdown aquí...

Entendiendo Markdown
TL;DR

Markdown es un lenguaje de marcado ligero que convierte texto plano a HTML. Es el estándar para archivos README, documentación y escritura técnica.

¿Qué es Markdown?

Markdown es un lenguaje de marcado ligero que usa sintaxis de formato de texto plano para crear documentos estructurados. Fue diseñado para ser legible tal cual — incluso sin renderizar — mientras es trivialmente convertible a HTML y otros formatos de salida.

Creado por John Gruber y Aaron Swartz en 2004, Markdown nació de una filosofía simple: escribir para la web debería sentirse como escribir un correo electrónico. En lugar de envolver texto en etiquetas HTML, usas símbolos intuitivos como # para encabezados, * para énfasis y - para listas. El texto plano fuente permanece legible y la salida renderizada es HTML limpio.

Hoy, Markdown es ubicuo. Potencia archivos README en GitHub y GitLab, documentación en Read the Docs y Docusaurus, aplicaciones de notas como Obsidian y Notion, plataformas de blogs como Ghost, y generadores de sitios estáticos como Astro, Hugo y Jekyll.

Sintaxis básica

La sintaxis central de Markdown cubre los elementos que necesitas para la mayoría de las tareas de escritura:

Encabezados

# Heading 1
## Heading 2
### Heading 3
#### Heading 4

Cada símbolo # corresponde a un nivel de encabezado HTML (<h1> a <h6>). Usa un # para el título de la página y aumenta los niveles para las subsecciones.

Énfasis

SintaxisResultadoHTML
*italic* o _italic_italic<em>
**bold** o __bold__bold<strong>
***bold italic***bold italic<strong><em>
`inline code`inline code<code>

Listas

Las listas desordenadas usan -, * o + como marcadores de viñeta. Las listas ordenadas usan números seguidos de un punto:

- Item one
- Item two
  - Nested item

1. First step
2. Second step
3. Third step

Enlaces e imágenes

[Link text](https://example.com)
![Alt text](image.png)

Bloques de código

Los bloques de código delimitados usan triple acento grave con un identificador de lenguaje opcional para resaltado de sintaxis:

```javascript
function greet(name) {
  return `Hello, ${name}!`;
}
```

Citas

> This is a blockquote.
> It can span multiple lines.

Variantes de Markdown

La especificación original de Markdown dejó muchos casos límite sin definir, lo que llevó a implementaciones divergentes. Varias “variantes” han surgido para abordar esto:

VarianteMantenida porAdiciones clave
CommonMarkEquipo CommonMarkEspecificación formal, elimina ambigüedades
GFM (GitHub Flavored)GitHubTablas, listas de tareas, tachado, enlaces automáticos
MDXEquipo MDXComponentes JSX dentro de Markdown
MultiMarkdownFletcher PenneyNotas al pie, citas, metadatos
Pandoc MarkdownEquipo PandocNotas al pie, listas de definiciones, matemáticas

CommonMark (2014) es lo más cercano a un estándar. Proporciona una especificación formal y un conjunto de pruebas exhaustivo que resuelve las ambigüedades de la descripción original de Gruber. La mayoría de los analizadores Markdown modernos (markdown-it, remark, pulldown-cmark) implementan CommonMark como su línea base.

GitHub Flavored Markdown (GFM) es un superconjunto de CommonMark usado por GitHub, GitLab y muchas plataformas de documentación. Sus adiciones más notables son:

  • Tablas: Columnas separadas por pipes con soporte de alineación
  • Listas de tareas: - [ ] para elementos sin marcar y - [x] para elementos marcados
  • Tachado: ~~texto eliminado~~
  • URLs con enlaces automáticos: Las URLs sin formato se convierten automáticamente en enlaces clicables
  • Resaltado de sintaxis: Bloques de código delimitados con identificadores de lenguaje

Markdown vs texto enriquecido

AspectoMarkdownTexto enriquecido (WYSIWYG)
Formato fuenteTexto planoBinario o HTML
Control de versionesExcelente (diffs de texto)Deficiente (diffs binarios)
PortabilidadUniversalDependiente del editor
Curva de aprendizajeSintaxis mínimaNinguna (apuntar y hacer clic)
ColaboraciónCompatible con GitRequiere herramientas especializadas
Formatos de salidaHTML, PDF, DOCX, diapositivasGeneralmente un formato
RenderizadoRequiere analizadorInstantáneo en el editor

Markdown sobresale en contextos técnicos donde el control de versiones, la portabilidad y la colaboración importan. Su naturaleza de texto plano significa que los archivos Markdown producen diffs limpios en Git, pueden editarse con cualquier editor de texto y se convierten fácilmente a múltiples formatos de salida.

Los editores de texto enriquecido (Google Docs, Word, Notion) son mejores para usuarios no técnicos que prefieren formato visual y colaboración en tiempo real sin aprender sintaxis.

Casos de uso comunes

  • Archivos README: Todo proyecto de código abierto en GitHub usa README.md como la página de inicio del proyecto
  • Documentación técnica: Docusaurus, MkDocs, Read the Docs, VitePress y Astro usan Markdown como su formato de contenido principal
  • Publicaciones de blog: Los generadores de sitios estáticos (Hugo, Jekyll, Gatsby, Astro) renderizan archivos Markdown en publicaciones de blog con metadatos del frontmatter YAML
  • Toma de notas: Obsidian, Logseq y Bear usan Markdown como su formato nativo, permitiendo portabilidad e interoperabilidad
  • Seguimiento de incidencias: GitHub Issues, GitLab Issues y Jira soportan Markdown para formatear descripciones y comentarios
  • Chat y mensajería: Slack, Discord y Microsoft Teams soportan un subconjunto de Markdown para formato de mensajes
  • Presentaciones: Herramientas como Marp, Slidev y reveal.js convierten Markdown en presentaciones de diapositivas

Prueba estos ejemplos

Markdown con encabezados, listas y código Válido

Una estructura típica de README.md con un encabezado H1, párrafos, una lista ordenada, una lista desordenada con texto en negrita, código en línea y un bloque de código delimitado con resaltado de sintaxis. Esto cubre las características de Markdown más utilizadas.

# Project Title A brief description of the project. ## Installation 1. Clone the repository 2. Run `npm install` 3. Start with `npm run dev` ## Features - **Fast** — built with performance in mind - **Simple** — minimal configuration - Supports `TypeScript` out of the box ```javascript const app = express(); app.listen(3000); ```
Tabla GFM, lista de tareas y cita Válido

Un ejemplo GFM que muestra una cita con texto en negrita, una lista de tareas con casillas de verificacion, una tabla con columnas, una linea horizontal y texto tachado. Estas caracteristicas son especificas de GitHub Flavored Markdown (GFM).

## Sprint Review > **Goal:** ship the new dashboard by Friday. ### Task List - [x] Design wireframes - [x] Implement API endpoints - [ ] Write unit tests - [ ] Deploy to staging ### Browser Support | Browser | Version | Status | |---------|---------|--------| | Chrome | 120+ | ✅ Supported | | Firefox | 119+ | ✅ Supported | | Safari | 17+ | ⚠️ Partial | --- This uses ~~Markdown Classic~~ **GitHub Flavored Markdown**.