CodeGroup

CodeGroup muestra bloques de código en una interfaz con pestañas, mostrando la misma operación en múltiples 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 preserva el resaltado de sintaxis en todas las pestañas.

Usa CodeGroup cuando:

• Muestres llamadas API en múltiples lenguajes (cURL, Python, JavaScript)
• Compares implementaciones entre frameworks
• Muestres múltiples 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 API en diferentes 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

Añade 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 vs Tabs

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

Consejos

• Pon el lenguaje más común primero (seleccionado por defecto)
• Las etiquetas de las pestañas provienen del texto después del identificador de lenguaje (p. ej., javascript Node.js)
• La pestaña seleccionada persiste durante la navegación de la página

¿Qué sigue?