CodeGroup

CodeGroup zeigt Codeblöcke in einer Oberfläche mit Registerkarten an und stellt dieselbe Operation in mehreren Sprachen dar. Die Komponente ist speziell für Code konzipiert. Anders als Tabs, die mit beliebigen Inhalten funktionieren, extrahiert CodeGroup automatisch die Sprachbezeichnungen und bewahrt die Syntaxhervorhebung in allen Registerkarten.

Verwende CodeGroup für:

• API-Aufrufe in mehreren Sprachen anzeigen (cURL, Python, JavaScript)
• Implementierungen über verschiedene Frameworks hinweg vergleichen
• Mehrere Dateien in einer Code-Walkthrough anzeigen

Grundlegende Verwendung

const data = await fetch('/api/data').then(r => r.json());

<CodeGroup>
```javascript JavaScript
const data = await fetch('/api/data').then(r => r.json());
```

```python Python
import requests
data = requests.get('/api/data').json()
```

```ruby Ruby
data = HTTParty.get('/api/data').parsed_response
```
</CodeGroup>

API-Beispiele

Zeige API-Aufrufe in verschiedenen Formaten:

curl -X POST https://api.example.com/users \
  -H "Authorization: Bearer $TOKEN" \
  -H "Content-Type: application/json" \
  -d '{"name": "John"}'

Mit Dateinamen

Füge Codeblöcken Dateinamen hinzu:

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

Kopier-Schaltfläche auf einem Tab ausblenden

Füge einem Fence nocopy hinzu, um die Kopier-Schaltfläche nur auf diesem Tab zu entfernen – die übrigen Tabs der Gruppe behalten ihre:

curl -X POST https://api.example.com/users \
  -H "Authorization: Bearer $TOKEN"

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

```javascript Node.js
const response = await fetch('https://api.example.com/users', {
  method: 'POST',
  headers: { 'Authorization': `Bearer ${TOKEN}` }
});
```
</CodeGroup>

Nutze es für einen Tab, der nicht unverändert kopiert werden sollte, etwa ein cURL-Beispiel mit einem Platzhalter-Token, und lasse die funktionierenden Beispiele in den anderen Tabs kopierbar. Zum Flag auf einem einzelnen Block siehe Code-Blöcke → Kopier-Schaltfläche ausblenden.

CodeGroup im Vergleich zu Tabs

Faustregel: Verwende CodeGroup für mehrsprachige Codebeispiele. Verwende Tabs, wenn du eine Synchronisierung über die Seite hinweg oder Inhalte ohne Code benötigst.

Tipps

• Platziere die am häufigsten verwendete Sprache an erster Stelle (standardmäßig ausgewählt).
• Die Bezeichnungen der Registerkarten stammen aus dem Text nach dem Sprachbezeichner (z. B. javascript Node.js).
• Die ausgewählte Registerkarte bleibt beim Navigieren zwischen Seiten erhalten.

Wie geht es weiter?