---
title: Code-Blöcke
description: Füge syntaxhervorgehobene Code-Blöcke mit Zeilennummern, Dateinamen und Hervorhebungen hinzu. Unterstützt CodeGroup für mehrsprachige Beispiele.
---

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

Verwende Code-Blöcke, um Befehle, Konfigurationsdateien und Snippets mit Syntaxhervorhebung anzuzeigen.

## Grundlegende Syntaxhervorhebung

```javascript
const greeting = "Hello, Jamdesk!";
console.log(greeting);
```

## Dateinamen hinzufügen

Zeige den Dateipfad mit dem Attribut `title` an:

```typescript src/config.ts
export const config = {
  name: "My Docs",
  theme: "jam"
};
```

## Zeilen hervorheben

Lenke mit der Syntax `{1,3-5}` die Aufmerksamkeit auf bestimmte Zeilen:

```javascript {1,4-6}
// This line is highlighted
const config = {
  apiKey: process.env.API_KEY,
  baseUrl: 'https://api.example.com', // highlighted
  timeout: 5000,                       // highlighted
  retries: 3,                          // highlighted
};
```

## Zeilennummern

Füge mit `showLineNumbers` Zeilennummern hinzu:

```python showLineNumbers
def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n - 1) + fibonacci(n - 2)
```

## Benutzerdefinierte Startzeile

Beginne die Nummerierung ab einer bestimmten Zeile:

```go showLineNumbers startLine=42
func processRequest(ctx context.Context) error {
    // This is line 42
    return nil
}
```

## Funktionen kombinieren

Verwende mehrere Funktionen gemeinsam:

```typescript api/client.ts showLineNumbers {3-5}
import axios from 'axios';

const client = axios.create({
  baseURL: process.env.API_URL,
  timeout: 10000,
});

export default client;
```

## Code-Gruppen

Zeige denselben Code in mehreren Programmiersprachen:

<CodeGroup>
```bash cURL
curl -X POST https://api.example.com/posts \
  -H "Authorization: Bearer $API_KEY"
```

```javascript JavaScript
const response = await fetch('https://api.example.com/posts', {
  method: 'POST',
  headers: { 'Authorization': `Bearer ${API_KEY}` }
});
```

```python Python
import requests
response = requests.post(
    'https://api.example.com/posts',
    headers={'Authorization': f'Bearer {API_KEY}'}
)
```
</CodeGroup>

## Verfügbare Themes

Konfiguriere Themes für die Syntaxhervorhebung in `docs.json`:

```json docs.json
{
  "styling": {
    "codeblocks": {
      "theme": {
        "light": "github-light",
        "dark": "github-dark"
      }
    }
  }
}
```

<Accordion title="Unterstützte Themes anzeigen">

Beliebte Themes sind:

- **GitHub**: `github-dark`, `github-light`, `github-dark-default`, `github-light-default`
- **Dunkle Themes**: `tokyo-night`, `one-dark-pro`, `dracula`, `nord`, `vitesse-dark`
- **Helle Themes**: `vitesse-light`, `min-light`
- **Catppuccin**: `catppuccin-mocha`, `catppuccin-latte`

</Accordion>

## Theme mit CSS-Variablen

Verwende für vollständige Kontrolle über die Farben der Syntaxhervorhebung das Theme mit CSS-Variablen:

```json docs.json
{
  "styling": {
    "codeblocks": {
      "theme": "css-variables"
    }
  }
}
```

Passe anschließend die Farben in deiner `style.css` an:

```css style.css
:root {
  --jd-token-keyword: #ff7b72;
  --jd-token-string: #a5d6ff;
  --jd-token-comment: #8b949e;
  --jd-token-function: #d2a8ff;
  --jd-token-constant: #79c0ff;
  --jd-token-parameter: #ffa657;
}
```

<Accordion title="Alle CSS-Variablen anzeigen">

| Variable | Beschreibung |
| -------- | ----------- |
| `--jd-color-text` | Standardtextfarbe |
| `--jd-color-background` | Hintergrund des Code-Blocks |
| `--jd-token-keyword` | Schlüsselwörter (if, const, function) |
| `--jd-token-string` | Zeichenfolgenliterale |
| `--jd-token-comment` | Kommentare |
| `--jd-token-function` | Funktionsnamen |
| `--jd-token-constant` | Konstanten |
| `--jd-token-parameter` | Funktionsparameter |
| `--jd-token-punctuation` | Klammern, Kommas |
| `--jd-token-link` | URLs und Links |

</Accordion>

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