# Komponenten

Markdown deckt Text, Listen, Tabellen und Code ab. Für den Rest dessen, was eine Dokumentation braucht, etwa denselben Befehl für drei Paketmanager, eine Anleitung in nummerierten Schritten oder ein Diagramm, hat Clay Komponenten. Sie sind schlichter Text in deinen Markdown-Dateien: kein HTML, nichts zu installieren, und sie bleiben in jedem Editor und auf GitHub lesbar.

::: cards
- [Tabs und Codegruppen](https://clay-doc.github.io/clay-example-repo/de/writing/components/tabs.md)
- [Schritte](https://clay-doc.github.io/clay-example-repo/de/writing/components/steps.md)
- [Karten](https://clay-doc.github.io/clay-example-repo/de/writing/components/cards.md)
- [Details](https://clay-doc.github.io/clay-example-repo/de/writing/components/details.md)
- [Prompts](https://clay-doc.github.io/clay-example-repo/de/writing/components/prompts.md)
- [Badges](https://clay-doc.github.io/clay-example-repo/de/writing/components/badges.md)
- [Formeln](https://clay-doc.github.io/clay-example-repo/de/writing/components/math.md)
- [Diagramme](https://clay-doc.github.io/clay-example-repo/de/writing/components/diagrams.md)
- [Dateibäume](https://clay-doc.github.io/clay-example-repo/de/writing/components/file-trees.md)
:::

## Drei Schreibweisen

| Art | Sieht aus wie | Komponenten |
|-----|---------------|-------------|
| Container | `::: name` … `:::` um Markdown herum | [Tabs, Codegruppen](https://clay-doc.github.io/clay-example-repo/de/writing/components/tabs.md), [Schritte](https://clay-doc.github.io/clay-example-repo/de/writing/components/steps.md), [Karten](https://clay-doc.github.io/clay-example-repo/de/writing/components/cards.md), [Details](https://clay-doc.github.io/clay-example-repo/de/writing/components/details.md), [Prompts](https://clay-doc.github.io/clay-example-repo/de/writing/components/prompts.md) |
| Im Text | `:badge[Neu]`, `$E = mc^2$` | [Badges](https://clay-doc.github.io/clay-example-repo/de/writing/components/badges.md), [Formeln](https://clay-doc.github.io/clay-example-repo/de/writing/components/math.md) |
| Codeblöcke | ein Codeblock in der Sprache `mermaid` oder `tree` | [Diagramme](https://clay-doc.github.io/clay-example-repo/de/writing/components/diagrams.md), [Dateibäume](https://clay-doc.github.io/clay-example-repo/de/writing/components/file-trees.md) |

## Container

Ein Container beginnt mit einer Zeile aus drei Doppelpunkten und dem Namen der Komponente und endet mit einer Zeile, die nur aus drei Doppelpunkten besteht. Alles dazwischen ist normales Markdown.

```markdown
::: details Warum drei Doppelpunkte?
Sie lesen sich gut als Text, und auch andere Dokumentationswerkzeuge nutzen sie; deine Dokumentation bleibt so übertragbar.
:::
```

::: details Warum drei Doppelpunkte?
Sie lesen sich gut als Text, und auch andere Dokumentationswerkzeuge nutzen sie; deine Dokumentation bleibt so übertragbar.
:::

- **Der Text nach dem Namen** ist der Titel der Komponente, wo sie einen hat, etwa bei [Details](https://clay-doc.github.io/clay-example-repo/de/writing/components/details.md).
- **Container lassen sich verschachteln.** Ein Container kann einen anderen enthalten, zum Beispiel Tabs in einem eingeklappten Abschnitt. Gib dem äußeren mehr Doppelpunkte, damit klar ist, welche Zeile welchen schließt:

  ```markdown
  :::: details Installation auf deinem System
  ::: tabs
  == macOS
  `brew install node`
  == Windows
  `winget install OpenJS.NodeJS`
  :::
  ::::
  ```

- **Fehler bleiben sichtbar.** Ein Container mit einem Namen, den Clay nicht kennt, oder ohne schließende Zeile wird so gezeigt, wie du ihn geschrieben hast; ein Tippfehler versteckt also keinen Inhalt.
- **Codeblöcke sind Code.** `:::` in einem Codeblock bleibt, wie es ist; so zeigen diese Seiten die Schreibweise.

## Suche, Links und Inhaltsverzeichnis

- **Alles ist durchsuchbar**, auch Tabs, die gerade nicht gezeigt werden, und eingeklappte Abschnitte. Ein Suchergebnis darin zeigt den Tab oder öffnet den Abschnitt.
- **Links werden geprüft** wie alle anderen, auch in Karten und Tabs, siehe [Build-Prüfungen](https://clay-doc.github.io/clay-example-repo/de/publishing/build-checks.md).
- **Überschriften in Containern** bekommen ihren `#`-Link und erscheinen unter „Auf dieser Seite“.

## Ohne JavaScript und auf GitHub

Clay rendert Komponenten beim Build, Seiten zeigen sie also, bevor JavaScript läuft: Tabs zeigen ihren ersten Tab, Formeln sind schon gesetzt. Nur Diagramme werden im Browser gezeichnet und zeigen bis dahin ihren Quelltext.

Auf GitHub zeigen deine Markdown-Dateien die Komponenten so, wie du sie geschrieben hast, und bleiben lesbar. `mermaid`-Diagramme und `$`-Formeln zeichnet GitHub selbst.

---

All pages of these docs, as Markdown for language models: https://clay-doc.github.io/clay-example-repo/de/llms.txt