Jamdesk Documentation logo

Conceptos básicos de MDX

Escribe documentación en Markdown con componentes React como Card, Tabs y Accordion. Es la sintaxis detrás de cada página de Jamdesk.

Toda página de Jamdesk es un archivo .mdx: Markdown estándar con componentes JSX como <Card>, <Tabs> y <Accordion>.

¿Qué es MDX?

MDX te permite escribir Markdown estándar e incrustar componentes JSX en el mismo archivo. Escribe encabezados, listas y bloques de código en Markdown, y luego agrega componentes como <Card> o <Tabs> donde necesites interactividad.

MDX también funciona bien para documentación que las herramientas de IA necesitan leer: es texto plano (por lo que pueden leerlo y escribirlo de forma nativa), versionable en Git, y suficientemente estructurado para componentes sin requerir un formato propietario.

# Welcome to My Docs

This is regular **Markdown** with a component below:

<Card title="Quickstart" icon="rocket" href="/quickstart">

  Jump right in with our quickstart guide.

</Card>

Dos herramientas gratuitas de navegador ayudan mientras escribes: el MDX Validator detecta errores de sintaxis antes de un build, y el MDX Formatter limpia el espaciado y la indentación. Pega una página para revisarla o depurarla sin ejecutar el CLI.

Estructura de la página

Toda página MDX comienza con frontmatter, metadatos entre triples guiones:

---
title: My Page Title
description: A brief description for search and previews
---

Your content starts here...

title y description aparecen en resultados de búsqueda, pestañas del navegador y vistas previas en redes sociales. Escríbelos con cuidado.

Elementos esenciales de Markdown

Encabezados

Usa ## para secciones principales y ### para subsecciones. Jamdesk genera automáticamente una tabla de contenidos a partir de tus encabezados.

## Main Section
Content under the main section.

### Subsection
More detailed content here.

Comienza con ## (h2) para tu primer encabezado. El título de la página del frontmatter sirve como h1.

Formato de texto

SintaxisResultado
**bold**bold
*italic*italic
~~strikethrough~~strikethrough
`inline code`inline code

Listas

Unordered list:
- First item
- Second item
  - Nested item

Ordered list:
1. First step
2. Second step
3. Third step

Citas

> This is a blockquote. Use it for callouts or
> highlighting important information.

Esto es una cita. Úsala para destacados o para resaltar información importante.

Agregar componentes

Los componentes son elementos JSX que puedes usar en cualquier parte de tu MDX. Se autocierran o envuelven contenido:

{/* Self-closing component */}
<Card title="Example" icon="star" href="/introduction" />

{/* Component wrapping content */}
<Accordion title="Click to expand">

  This content is inside the accordion.

</Accordion>

Componentes disponibles

Jamdesk ofrece estos componentes integrados:

Cards

Destaca funciones y crea navegación

Tabs

Organiza el contenido en paneles intercambiables

Accordion

Secciones colapsables para contenido opcional

Steps

Procedimientos y tutoriales numerados

Tablas

Las tablas estándar de Markdown funcionan sin configuración adicional:

| Feature | Free | Pro |
|---------|------|-----|
| Pages | 10 | Unlimited |
| Custom domain | No | Yes |
FeatureFreePro
Pages10Unlimited
Custom domainNoYes

Para funciones avanzadas como resaltado de filas, alineación de celdas y expansión, usa el componente Table:

FeatureFreePro
Pages10Unlimited
Custom domainNoYes

Consulta Tables para la documentación completa del componente, incluyendo resaltado de filas/celdas, expansión de columnas y opciones de estilo.

Comentarios

Agrega comentarios que no aparecerán en el resultado renderizado:

{/* This is a comment - it won't be visible to readers */}

¿Qué sigue?

Optimización SEO

Mejora el descubrimiento y los metadatos

Frontmatter

Define títulos, descripciones y campos SEO