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
});

Nascondere il pulsante di copia in una scheda

Aggiungi nocopy a un blocco per togliere il pulsante di copia solo da quella scheda: le altre schede del gruppo mantengono il proprio.

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>

Usalo per una scheda che non andrebbe copiata così com'è, ad esempio un esempio cURL con un token segnaposto, lasciando copiabili gli esempi funzionanti nelle altre schede. Per lo stesso flag su un blocco singolo consulta Blocchi di codice → Nascondere il pulsante di copia.

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?