CodeGroup

CodeGroup muestra bloques de código en una interfaz con pestañas, mostrando 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 para:

• Mostrar llamadas a la API en varios lenguajes (cURL, Python, JavaScript)
• Comparar implementaciones entre frameworks
• Mostrar 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
});

Ocultar el botón de copia en una pestaña

Agrega nocopy a un bloque de código para quitar el botón de copia solo en esa pestaña — las demás pestañas del grupo conservan el suyo:

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>

Úsalo para una pestaña que no deba copiarse tal cual, como un ejemplo de cURL con un token de marcador de posición, mientras dejas copiables los ejemplos funcionales de las demás pestañas. Consulta Bloques de código → Ocultar el botón de copia para ver el indicador en un bloque independiente.

CodeGroup vs 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 (seleccionado de forma predeterminada)
• Las etiquetas de las pestañas provienen del texto que sigue al identificador de lenguaje (por ejemplo, javascript Node.js)
• La pestaña seleccionada persiste al navegar entre páginas

¿Qué sigue?