---
title: Noções básicas de MDX
description: Escreva documentação em Markdown com componentes React incorporados, como Card, Tabs e Accordion. Esta é a sintaxe de todas as páginas do Jamdesk.
---

> **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version.

Todas as páginas do Jamdesk são arquivos `.mdx`: Markdown padrão com componentes JSX, como `<Card>`, `<Tabs>` e `<Accordion>`.

## O que é MDX?

MDX permite escrever Markdown padrão e incorporar componentes JSX no mesmo arquivo. Escreva títulos, listas e blocos de código em Markdown e, em seguida, adicione componentes como `<Card>` ou `<Tabs>` sempre que precisar de interatividade.

MDX também funciona bem para documentação que ferramentas de IA precisam ler: é texto simples (para que possam lê-lo e escrevê-lo nativamente), pode ser versionado no Git e tem estrutura suficiente para componentes sem exigir um formato proprietário.

```mdx
# 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>
```

<Tip>
  Duas ferramentas gratuitas para navegador ajudam durante a escrita: o [MDX Validator](https://jamdesk.com/utilities/mdx-validator)
  detecta erros de sintaxe antes de um build, e o [MDX Formatter](https://jamdesk.com/utilities/mdx-formatter)
  corrige espaçamento e indentação. Cole uma página para verificá-la ou organizá-la sem executar a CLI.
</Tip>

## Estrutura da página

Todas as páginas MDX começam com frontmatter — metadados entre três traços:

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

Your content starts here...
```

<Note>
O `title` e a `description` aparecem nos resultados de pesquisa, nas abas do navegador e nas prévias de redes sociais. Escreva-os com atenção.
</Note>

## Fundamentos do Markdown

### Títulos

Use `##` para seções principais e `###` para subseções. O Jamdesk gera automaticamente um índice a partir dos seus títulos.

```markdown
## Main Section
Content under the main section.

### Subsection
More detailed content here.
```

<Tip>
Comece com `##` (h2) para o primeiro título. O título da página definido no frontmatter funciona como h1.
</Tip>

### Formatação de texto

| Sintaxe | Resultado |
|--------|--------|
| `**bold**` | **negrito** |
| `*italic*` | *itálico* |
| `~~strikethrough~~` | ~~tachado~~ |
| `` `inline code` `` | `código inline` |

### Listas

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

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

### Citações em bloco

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

> Este é um bloco de citação. Use-o para callouts ou para destacar informações importantes.

## Adicionando componentes

Componentes são elementos JSX que você pode usar em qualquer lugar do seu MDX. Eles podem ser autocontidos ou envolver conteúdo:

```mdx
{/* 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 disponíveis

O Jamdesk fornece estes componentes integrados:

<Columns cols={2}>
  <Card title="Cards" icon="square" href="/pt/components/card">
    Destaque recursos e crie navegação
  </Card>
  <Card title="Tabs" icon="table-columns" href="/pt/components/tabs">
    Organize o conteúdo em painéis alternáveis
  </Card>
  <Card title="Accordion" icon="chevron-down" href="/pt/components/accordion">
    Seções recolhíveis para conteúdo opcional
  </Card>
  <Card title="Steps" icon="list-ol" href="/pt/components/steps">
    Procedimentos numerados e tutoriais
  </Card>
</Columns>

## Tabelas

As tabelas padrão do Markdown funcionam imediatamente:

```markdown
| Feature | Free | Pro |
|---------|------|-----|
| Pages | 10 | Unlimited |
| Custom domain | No | Yes |
```

| Recurso | Gratuito | Pro |
|---------|------|-----|
| Páginas | 10 | Ilimitado |
| Domínio personalizado | Não | Sim |

Para recursos avançados, como destaque de linhas, alinhamento de células e mesclagem, use o componente Table:

<Table striped>
  <Row header>
    <Cell>Recurso</Cell>
    <Cell align="center">Gratuito</Cell>
    <Cell align="center">Pro</Cell>
  </Row>
  <Row>
    <Cell>Páginas</Cell>
    <Cell align="center">10</Cell>
    <Cell align="center" highlight highlightColor="success">Ilimitado</Cell>
  </Row>
  <Row>
    <Cell>Domínio personalizado</Cell>
    <Cell align="center">Não</Cell>
    <Cell align="center" highlight highlightColor="success">Sim</Cell>
  </Row>
</Table>

<Note>
Consulte [Tabelas](/pt/components/tables) para ver a documentação completa do componente, incluindo destaque de linhas e células, mesclagem de colunas e opções de estilo.
</Note>

## Comentários

Adicione comentários que não aparecerão no conteúdo renderizado:

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

## O que vem a seguir?

<Columns cols={2}>
  <Card title="Otimização de SEO" icon="magnifying-glass-chart" href="/pt/content/seo">
    Melhore a descoberta e os metadados
  </Card>
  <Card title="Frontmatter" icon="file-lines" href="/pt/content/frontmatter">
    Defina títulos, descrições e campos de SEO
  </Card>
</Columns>

```