# Codeblöcke

Umschließe Code mit drei Backticks und nenne seine Sprache. Clay hebt ihn mit [Shiki](https://shiki.style) hervor, dem Highlighter von VS Code, in passenden Farben für das helle und das dunkle Design.

::: tabs
== Ergebnis
```python
def greet(name: str) -> str:
    return f"Hallo, {name}!"
```
== Markdown
````markdown
```python
def greet(name: str) -> str:
    return f"Hallo, {name}!"
```
````
:::

Jeder Codeblock hat oben rechts einen Kopierknopf; auf Touchscreens ist er immer sichtbar.

## Sprachen

Clay erkennt die Sprachen deiner Dokumentation und lädt nur diese, du konfigurierst also nie etwas. Jede [Sprache, die Shiki kennt](https://shiki.style/languages), funktioniert, unter ihrem Namen oder einem gängigen Kürzel: `js`, `ts`, `py`, `sh`, `yml`, `md` und so weiter. Ein Block mit unbekannter oder ohne Sprache erscheint als schlichter Text.

::: code-group
```go
package main

import "fmt"

func main() {
    fmt.Println("Hallo aus Go")
}
```
```rust
fn main() {
    println!("Hallo aus Rust");
}
```
```sql
SELECT title, updated FROM pages WHERE language = 'de' ORDER BY updated DESC;
```
:::

Derselbe Code in mehreren Sprachen oder für mehrere Werkzeuge passt in eine [Codegruppe](https://clay-doc.github.io/clay-example-repo/de/writing/components/tabs.md#codegruppen) wie die oben.

## Zeilen hervorheben

Schreib die Zeilennummern in geschweiften Klammern hinter die Sprache, einzeln oder als Bereiche: `ts {2}` oder `ts {1,3-4}`.

````markdown
```ts {2}
const site = loadSite(root);
const pages = site.pages.filter(page => !page.isDir);
console.log(`${pages.length} Seiten`);
```
````

```ts {2}
const site = loadSite(root);
const pages = site.pages.filter(page => !page.isDir);
console.log(`${pages.length} Seiten`);
```

## Dateinamen

Schreib den Namen der Datei in eckigen Klammern hinter die Sprache, und Clay zeigt ihn in einer Leiste über dem Code. So sehen Leser sofort, wohin der Code gehört:

::: tabs
== Ergebnis
```yaml [clay.yaml]
title: "Mein Projekt"
baseURL: "/mein-projekt/"
```
== Markdown
````markdown
```yaml [clay.yaml]
title: "Mein Projekt"
baseURL: "/mein-projekt/"
```
````
:::

Der Name darf Ordner und Leerzeichen enthalten, etwa `[docs/guides/setup.md]`, und lässt sich mit hervorgehobenen Zeilen kombinieren: `ts [src/client.ts] {2}`. In einer [Code-Gruppe](https://clay-doc.github.io/clay-example-repo/de/writing/components/tabs.md#codegruppen) benennt der Name in Klammern stattdessen den Tab.

## Terminal

Shell-Code (`bash`, `sh`, `shell`, `zsh`, `fish`) sieht aus wie ein Terminal: oben eine Leiste mit den drei Knöpfen eines Fensters, und vor jedem Befehl ein `$`. Das `$` ist nur gezeichnet, der Kopieren-Knopf kopiert also nur die Befehle. Kommentare, leere Zeilen, mit `\` fortgesetzte Zeilen und der Text eines Heredocs bekommen keins:

::: tabs
== Ergebnis
```bash
# Clay installieren und losschreiben
npm install --save-dev clay-doc
npx clay dev
```
== Markdown
````markdown
```bash
# Clay installieren und losschreiben
npm install --save-dev clay-doc
npx clay dev
```
````
:::

Um einen Befehl zusammen mit seiner Ausgabe zu zeigen, nimm `console` statt `bash`. Dort setzt Clay kein `$`: Schreib `$ ` selbst vor jeden Befehl, und jede andere Zeile erscheint als seine Ausgabe:

```console
$ npx clay check
┌  Clay 5.0.0 · check
│
●  Checked 42 pages
│
└  No problems
```

Shell-Code mit [Dateinamen](#dateinamen) ist ein Skript und behält die Leiste der Datei. Ohne die Knöpfe, `windowDots: false` im [Theme](https://clay-doc.github.io/clay-example-repo/de/features/themes-and-icons.md), hat Shell-Code keine Leiste und behält sein `$`.

## Markierungen in Kommentaren

Manche Änderungen markierst du leichter direkt in der Zeile. Setz einen Kommentar mit einer Markierung ans Zeilenende; Clay entfernt den Kommentar und markiert die Zeile:

| Markierung | Wirkung |
|------------|---------|
| `// [!code highlight]` | Hebt die Zeile hervor |
| `// [!code ++]` | Markiert die Zeile als hinzugefügt (grün, mit `+`) |
| `// [!code --]` | Markiert die Zeile als entfernt (rot, mit `-`) |
| `// [!code focus]` | Blendet die anderen Zeilen ab, bis Leser über den Block fahren |
| `// [!code warning]` | Markiert die Zeile als Warnung (gelb) |
| `// [!code error]` | Markiert die Zeile als Fehler (rot) |
| `// [!code word:name]` | Hebt jedes `name` im Block hervor |

Nutze die Kommentarsyntax der Sprache des Blocks: `#` in Python, YAML oder Shell, `<!-- -->` in HTML, `--` in SQL.

::: tabs
== Diff
```js
export default defineConfig({
  title: "Mein Projekt", // [!code --]
  title: "Meine Dokumentation", // [!code ++]
  base: "/docs/",
});
```
== Hervorhebung und Warnung
```python
config = load_config("clay.yaml")
config["baseURL"] = "/docs/"  # [!code highlight]
build(config, strict=False)  # [!code warning]
```
== Fokus
```yaml
title: "Mein Projekt"
baseURL: "/mein-projekt/" # [!code focus]
siteURL: "https://example.com"
```
== Wörter
```ts
// [!code word:edition]
const edition = editionOf(route.path, versions, languages);
const nav = navs[edition.prefix];
```
:::

## Codeblöcke zeigen

Um einen Codeblock in einem Codeblock zu zeigen, wie diese Seite es tut, umschließe den äußeren Block mit vier Backticks:

`````markdown
````markdown
```js
console.log("innen");
```
````
`````

## Code im Text

Einfache Backticks markieren Code in einem Satz: `npm install --save-dev clay-doc`. Code im Text wird nicht hervorgehoben.

---

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