Codeblöcke

Umschließe Code mit drei Backticks und nenne seine Sprache. Clay hebt ihn mit Shiki hervor, dem Highlighter von VS Code, in passenden Farben für das helle und das dunkle Design.

def greet(name: str) -> str:
    return f"Hallo, {name}!"

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

package main

import "fmt"

func main() {
    fmt.Println("Hallo aus Go")
}

fn main() {
    println!("Hallo aus Rust");
}

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 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}.

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

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:

title: "Mein Projekt"
baseURL: "/mein-projekt/"

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

# Clay installieren und losschreiben
npm install --save-dev clay-doc
npx clay dev

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

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

Shell-Code mit Dateinamen ist ein Skript und behält die Leiste der Datei. Ohne die Knöpfe, windowDots: false im Theme, 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:

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

export default defineConfig({
  title: "Mein Projekt", 
  title: "Meine Dokumentation", 
  base: "/docs/",
});

config = load_config("clay.yaml")
config["baseURL"] = "/docs/"
build(config, strict=False)  

title: "Mein Projekt"
baseURL: "/mein-projekt/"
siteURL: "https://example.com"

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