CodeGroup

CodeGroup visualizza blocchi di codice in un'interfaccia a schede, mostrando la stessa operazione in più linguaggi. È progettato specificamente per il codice. A differenza di Tabs, che funziona con qualsiasi contenuto, CodeGroup estrae automaticamente le etichette dei linguaggi e preserva l'evidenziazione della sintassi in tutte le schede.

Usa CodeGroup per:

• Mostrare chiamate API in più linguaggi (cURL, Python, JavaScript)
• Confrontare implementazioni tra diversi framework
• Visualizzare più file in una procedura guidata sul codice

Utilizzo di base

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>

Esempi di API

Mostra le chiamate API in formati diversi:

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

Con nomi di file

Aggiungi i nomi dei file ai blocchi di codice:

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

import httpx

client = httpx.Client(base_url=os.environ['API_URL'])

CodeGroup e Tabs a confronto

Regola generale: usa CodeGroup per esempi di codice in più linguaggi. Usa Tabs quando ti serve la sincronizzazione in tutta la pagina o per contenuti non costituiti da codice.

Suggerimenti

• Inserisci per primo il linguaggio più comune (selezionato per impostazione predefinita)
• Le etichette delle schede provengono dal testo dopo l'identificatore del linguaggio (ad esempio, javascript Node.js)
• La scheda selezionata rimane attiva durante la navigazione nella pagina

Qual è il prossimo passo?