# Tabs und Codegruppen
Tabs zeigen Alternativen an einer Stelle: Anleitungen für jedes Betriebssystem oder dieselbe Einstellung in zwei Formaten. Leser sehen die, die sie wählen, und die anderen sind ihnen nicht im Weg.
## Tabs
````markdown
::: tabs
== macOS
Installiere Node.js mit [Homebrew](https://brew.sh):
```bash
brew install node
```
== Windows
Lade das Installationsprogramm von [nodejs.org](https://nodejs.org) und starte es.
== Linux
Nutze die Paketverwaltung deiner Distribution, zum Beispiel `sudo apt install nodejs`.
:::
````
::: tabs
== macOS
Installiere Node.js mit [Homebrew](https://brew.sh):
```bash
brew install node
```
== Windows
Lade das Installationsprogramm von [nodejs.org](https://nodejs.org) und starte es.
== Linux
Nutze die Paketverwaltung deiner Distribution, zum Beispiel `sudo apt install nodejs`.
:::
- **Jede Zeile `== Name` beginnt einen Tab.** Der Name ist schlichter Text.
- **Ein Tab enthält beliebiges Markdown:** Absätze, Listen, Codeblöcke, Hinweise und andere Komponenten.
- **Der erste Tab wird zuerst gezeigt.**
- Text vor dem ersten Namen fällt weg. Ein `tabs`-Container ohne Namen wird als Text gezeigt.
## Codegruppen
Für denselben Code in mehreren Varianten ist eine Codegruppe kürzer: Jeder Codeblock wird ein Tab, benannt in eckigen Klammern nach seiner Sprache.
````markdown
::: code-group
```bash [npm]
npm install --save-dev clay-doc
```
```bash [pnpm]
pnpm add -D clay-doc
```
```bash [yarn]
yarn add -D clay-doc
```
:::
````
::: code-group
```bash [npm]
npm install --save-dev clay-doc
```
```bash [pnpm]
pnpm add -D clay-doc
```
```bash [yarn]
yarn add -D clay-doc
```
:::
Die Tabs stehen in einer Leiste über dem Code. Mit Shell-Code in einem Tab ist es die Leiste eines [Terminals](https://clay-doc.github.io/clay-example-repo/de/writing/code-blocks.md#terminal): Die drei Knöpfe eines Fensters stehen vor den Tabs, und jeder Befehl bekommt sein `$`. `windowDots: false` im [Theme](https://clay-doc.github.io/clay-example-repo/de/features/themes-and-icons.md) lässt die Knöpfe weg.
- **Ohne Namen in Klammern** heißt ein Tab wie seine Sprache, etwa `yaml` oder `json`.
- **Alles andere von [Codeblöcken](https://clay-doc.github.io/clay-example-repo/de/writing/code-blocks.md) funktioniert**, etwa hervorgehobene Zeilen: ```` ```ts [clay.config.ts] {2} ````.
- Text zwischen den Codeblöcken einer Gruppe fällt weg.
### Andere Sprachen
Code in anderen Sprachen hat dieselbe Leiste, ohne die Knöpfe. Ohne Namen in Klammern heißen die Tabs wie ihre Sprachen:
````markdown
::: code-group
```ts
const pages: string[] = await loadPages("docs");
console.log(`${pages.length} pages`);
```
```js
const pages = await loadPages("docs");
console.log(`${pages.length} pages`);
```
:::
````
::: code-group
```ts
const pages: string[] = await loadPages("docs");
console.log(`${pages.length} pages`);
```
```js
const pages = await loadPages("docs");
console.log(`${pages.length} pages`);
```
:::
### Shell-Code und anderer Code
Ein Tab mit Shell-Code reicht für die Knöpfe, etwa bash neben PowerShell:
````markdown
::: code-group
```bash [macOS und Linux]
export CLAY_BASE_URL="/preview/"
npx clay build
```
```powershell [Windows]
$env:CLAY_BASE_URL = "/preview/"
npx clay build
```
:::
````
::: code-group
```bash [macOS und Linux]
export CLAY_BASE_URL="/preview/"
npx clay build
```
```powershell [Windows]
$env:CLAY_BASE_URL = "/preview/"
npx clay build
```
:::
### Text und Dateinamen
Eine Codegruppe enthält nur Code. Für Text neben dem Code oder einen [Dateinamen](https://clay-doc.github.io/clay-example-repo/de/writing/code-blocks.md#dateinamen) darüber nimm Tabs mit Codeblöcken darin:
````markdown
::: tabs
== GitHub Pages
Im Workflow bauen und `publish/public` hochladen:
```yaml [.github/workflows/deploy.yaml]
- run: npm ci
- run: npx clay build --strict
- uses: actions/upload-pages-artifact@v3
with:
path: publish/public
```
== Netlify
Netlify liest seine Einstellungen aus einer Datei im Repository:
```toml [netlify.toml]
[build]
command = "npx clay build --strict"
publish = "publish/public"
```
:::
````
::: tabs
== GitHub Pages
Im Workflow bauen und `publish/public` hochladen:
```yaml [.github/workflows/deploy.yaml]
- run: npm ci
- run: npx clay build --strict
- uses: actions/upload-pages-artifact@v3
with:
path: publish/public
```
== Netlify
Netlify liest seine Einstellungen aus einer Datei im Repository:
```toml [netlify.toml]
[build]
command = "npx clay build --strict"
publish = "publish/public"
```
:::
## Die Wahl der Leser bleibt
Wer einen Tab wählt, wählt den gleichnamigen Tab in jeder Gruppe der Seite, und Clay merkt es sich: Wer einmal **pnpm** gewählt hat, sieht pnpm in jeder Gruppe auf jeder Seite, auch beim nächsten Besuch. Die Wahl bleibt nur im Browser der Leser.
> [!TIP]
> Benenne Gleiches überall gleich, immer „pnpm“ und nie „PNPM“ auf einer Seite und „pnpm“ auf einer anderen, damit die Wahl mitwandert.
## Tastatur
Tab führt zu den Tabs, ← und → wechseln zwischen ihnen, Pos1 und Ende springen zum ersten und zum letzten Tab.
## Suche
Die [Suche](https://clay-doc.github.io/clay-example-repo/de/features/search.md) findet den Text jedes Tabs. Ein Ergebnis in einem verborgenen Tab zeigt diesen Tab.
---
All pages of these docs, as Markdown for language models: https://clay-doc.github.io/clay-example-repo/de/llms.txt