---
title: Nozioni di base MDX
description: Scrivi documentazione in Markdown con componenti React incorporati come Card, Tabs e Accordion. Questa è la sintassi di ogni pagina 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.

Ogni pagina Jamdesk è un file `.mdx`: Markdown standard con componenti JSX come `<Card>`, `<Tabs>` e `<Accordion>`.

## Che cos'è MDX?

MDX ti consente di scrivere Markdown standard e incorporare componenti JSX nello stesso file. Scrivi titoli, elenchi e blocchi di codice in Markdown, quindi inserisci componenti come `<Card>` o `<Tabs>` ovunque ti serva interattività.

MDX è inoltre adatto alla documentazione che gli strumenti di IA devono leggere: è testo semplice (quindi possono leggerlo e scriverlo in modo nativo), è versionabile in Git e offre una struttura sufficiente per i componenti senza richiedere un formato proprietario.

```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>
  Due strumenti gratuiti per il browser sono utili durante la scrittura: [MDX Validator](https://jamdesk.com/utilities/mdx-validator)
  rileva gli errori di sintassi prima di una build, mentre [MDX Formatter](https://jamdesk.com/utilities/mdx-formatter)
  sistema spaziatura e rientri. Incolla una pagina per controllarla o riordinarla senza eseguire la CLI.
</Tip>

## Struttura della pagina

Ogni pagina MDX inizia con il frontmatter, ovvero i metadati racchiusi tra tre trattini:

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

Your content starts here...
```

<Note>
Il `title` e la `description` vengono mostrati nei risultati di ricerca, nelle schede del browser e nelle anteprime dei social media. Scrivili con attenzione.
</Note>

## Elementi essenziali di Markdown

### Titoli

Usa `##` per le sezioni principali e `###` per le sottosezioni. Jamdesk genera automaticamente un indice dai tuoi titoli.

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

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

<Tip>
Inizia con `##` (h2) per il primo titolo. Il titolo della pagina nel frontmatter funge da h1.
</Tip>

### Formattazione del testo

| Sintassi | Risultato |
|--------|--------|
| `**bold**` | **grassetto** |
| `*italic*` | *corsivo* |
| `~~strikethrough~~` | ~~barrato~~ |
| `` `inline code` `` | `inline code` |

### Elenchi

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

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

### Citazioni

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

> Questa è una citazione. Usala per callout o per mettere in evidenza informazioni importanti.

## Aggiunta di componenti

I componenti sono elementi JSX che puoi usare ovunque nel tuo MDX. Possono essere autochiudenti o racchiudere del contenuto:

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

### Componenti disponibili

Jamdesk fornisce questi componenti integrati:

<Columns cols={2}>
  <Card title="Schede" icon="square" href="/it/components/card">
    Metti in evidenza le funzionalità e crea la navigazione
  </Card>
  <Card title="Schede a schede" icon="table-columns" href="/it/components/tabs">
    Organizza i contenuti in pannelli commutabili
  </Card>
  <Card title="Fisarmonica" icon="chevron-down" href="/it/components/accordion">
    Sezioni comprimibili per contenuti facoltativi
  </Card>
  <Card title="Passaggi" icon="list-ol" href="/it/components/steps">
    Procedure numerate e tutorial
  </Card>
</Columns>

## Tabelle

Le tabelle Markdown standard funzionano immediatamente:

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

| Funzionalità | Gratuito | Pro |
|---------|------|-----|
| Pagine | 10 | Illimitate |
| Dominio personalizzato | No | Sì |

Per funzionalità avanzate come l'evidenziazione delle righe, l'allineamento delle celle e l'unione delle celle, usa il componente Table:

<Table striped>
  <Row header>
    <Cell>Funzionalità</Cell>
    <Cell align="center">Gratuito</Cell>
    <Cell align="center">Pro</Cell>
  </Row>
  <Row>
    <Cell>Pagine</Cell>
    <Cell align="center">10</Cell>
    <Cell align="center" highlight highlightColor="success">Illimitate</Cell>
  </Row>
  <Row>
    <Cell>Dominio personalizzato</Cell>
    <Cell align="center">No</Cell>
    <Cell align="center" highlight highlightColor="success">Sì</Cell>
  </Row>
</Table>

<Note>
Consulta [Tabelle](/it/components/tables) per la documentazione completa del componente, inclusi l'evidenziazione di righe e celle, l'unione di colonne e le opzioni di stile.
</Note>

## Commenti

Aggiungi commenti che non verranno visualizzati nell'output renderizzato:

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

## Qual è il prossimo passo?

<Columns cols={2}>
  <Card title="Ottimizzazione SEO" icon="magnifying-glass-chart" href="/it/content/seo">
    Migliora la visibilità e i metadati
  </Card>
  <Card title="Frontmatter" icon="file-lines" href="/it/content/frontmatter">
    Definisci titoli, descrizioni e campi SEO
  </Card>
</Columns>

```