CodeGroup

CodeGroup muestra bloques de código en una interfaz con pestañas, presentando la misma operación en varios lenguajes. Está diseñado específicamente para código. A diferencia de Tabs (que funciona con cualquier contenido), CodeGroup extrae automáticamente las etiquetas de lenguaje y conserva el resaltado de sintaxis en todas las pestañas.

Usa CodeGroup cuando:

• Muestres llamadas a la API en varios lenguajes (cURL, Python, JavaScript)
• Compares implementaciones entre frameworks
• Muestres varios archivos en un recorrido de código

Uso básico

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>

Ejemplos de API

Muestra llamadas a la API en distintos formatos:

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

Con nombres de archivo

Agrega nombres de archivo a los bloques de código:

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

import httpx

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

CodeGroup frente a Tabs

Regla general: Usa CodeGroup para ejemplos de código en varios lenguajes. Usa Tabs cuando necesites sincronización en toda la página o contenido que no sea código.

Consejos

• Coloca primero el lenguaje más común (se selecciona por defecto)
• Las etiquetas de las pestañas provienen del texto después del identificador de lenguaje (por ejemplo, javascript Node.js)
• La pestaña seleccionada persiste al navegar entre páginas

¿Qué sigue?