---
title: MDX-Grundlagen
description: Dokumentation in Markdown mit eingebetteten React-Komponenten wie Card, Tabs und Accordion schreiben. Diese Syntax steckt hinter jeder Jamdesk-Seite.
---

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

Jede Jamdesk-Seite ist eine `.mdx`-Datei: standardmäßiges Markdown mit JSX-Komponenten wie `<Card>`, `<Tabs>` und `<Accordion>`.

## Was ist MDX?

Mit MDX können Sie standardmäßiges Markdown schreiben und JSX-Komponenten in derselben Datei einbetten. Schreiben Sie Überschriften, Listen und Codeblöcke in Markdown und fügen Sie Komponenten wie `<Card>` oder `<Tabs>` überall dort ein, wo Sie Interaktivität benötigen.

MDX eignet sich auch gut für Dokumentation, die von KI-Tools gelesen werden soll: Es besteht aus reinem Text (daher können diese Tools es nativ lesen und schreiben), ist in Git versionierbar und für Komponenten strukturiert, ohne ein proprietäres Format zu erfordern.

```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>
  Zwei kostenlose Browser-Tools unterstützen Sie beim Schreiben: Der [MDX Validator](https://jamdesk.com/utilities/mdx-validator)
  erkennt Syntaxfehler vor einem Build, und der [MDX Formatter](https://jamdesk.com/utilities/mdx-formatter)
  bereinigt Leerzeichen und Einrückungen. Fügen Sie eine Seite ein, um sie zu prüfen oder zu formatieren, ohne die CLI auszuführen.
</Tip>

## Seitenstruktur

Jede MDX-Seite beginnt mit Frontmatter – Metadaten zwischen drei Bindestrichen:

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

Your content starts here...
```

<Note>
Der `title` und die `description` erscheinen in Suchergebnissen, Browser-Tabs und Vorschauen in sozialen Medien. Formulieren Sie sie sorgfältig.
</Note>

## Markdown-Grundlagen

### Überschriften

Verwenden Sie `##` für Hauptabschnitte und `###` für Unterabschnitte. Jamdesk erstellt automatisch ein Inhaltsverzeichnis aus Ihren Überschriften.

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

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

<Tip>
Beginnen Sie mit `##` (h2) für Ihre erste Überschrift. Der Seitentitel aus dem Frontmatter dient als h1.
</Tip>

### Textformatierung

| Syntax | Ergebnis |
|--------|----------|
| `**bold**` | **fett** |
| `*italic*` | *kursiv* |
| `~~strikethrough~~` | ~~durchgestrichen~~ |
| `` `inline code` `` | `inline code` |

### Listen

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

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

### Zitate

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

> Dies ist ein Zitat. Verwenden Sie es für Hinweise oder um wichtige Informationen hervorzuheben.

## Komponenten hinzufügen

Komponenten sind JSX-Elemente, die Sie überall in Ihrem MDX verwenden können. Sie sind entweder selbstschließend oder umschließen Inhalte:

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

### Verfügbare Komponenten

Jamdesk stellt diese integrierten Komponenten bereit:

<Columns cols={2}>
  <Card title="Karten" icon="square" href="/de/components/card">
    Funktionen hervorheben und Navigation erstellen
  </Card>
  <Card title="Tabs" icon="table-columns" href="/de/components/tabs">
    Inhalte in umschaltbaren Panels organisieren
  </Card>
  <Card title="Akkordeon" icon="chevron-down" href="/de/components/accordion">
    Einklappbare Abschnitte für optionale Inhalte
  </Card>
  <Card title="Schritte" icon="list-ol" href="/de/components/steps">
    Nummerierte Abläufe und Tutorials
  </Card>
</Columns>

## Tabellen

Standardmäßige Markdown-Tabellen funktionieren sofort:

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

| Funktion | Kostenlos | Pro |
|---------|-----------|-----|
| Seiten | 10 | Unbegrenzt |
| Benutzerdefinierte Domain | Nein | Ja |

Für erweiterte Funktionen wie das Hervorheben von Zeilen, die Ausrichtung von Zellen und das Zusammenführen von Zellen verwenden Sie die Table-Komponente:

<Table striped>
  <Row header>
    <Cell>Funktion</Cell>
    <Cell align="center">Kostenlos</Cell>
    <Cell align="center">Pro</Cell>
  </Row>
  <Row>
    <Cell>Seiten</Cell>
    <Cell align="center">10</Cell>
    <Cell align="center" highlight highlightColor="success">Unbegrenzt</Cell>
  </Row>
  <Row>
    <Cell>Benutzerdefinierte Domain</Cell>
    <Cell align="center">Nein</Cell>
    <Cell align="center" highlight highlightColor="success">Ja</Cell>
  </Row>
</Table>

<Note>
Eine vollständige Dokumentation der Table-Komponente einschließlich des Hervorhebens von Zeilen und Zellen, des Zusammenführens von Spalten und der Styling-Optionen finden Sie unter [Tables](/de/components/tables).
</Note>

## Kommentare

Fügen Sie Kommentare hinzu, die nicht in der gerenderten Ausgabe erscheinen:

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

## Wie geht es weiter?

<Columns cols={2}>
  <Card title="SEO-Optimierung" icon="magnifying-glass-chart" href="/de/content/seo">
    Auffindbarkeit und Metadaten verbessern
  </Card>
  <Card title="Frontmatter" icon="file-lines" href="/de/content/frontmatter">
    Titel, Beschreibungen und SEO-Felder definieren
  </Card>
</Columns>