CodeGroup

CodeGroup exibe blocos de código em uma interface com abas, mostrando a mesma operação em várias linguagens. Ele foi desenvolvido especificamente para código. Diferentemente de Tabs (que funciona com qualquer conteúdo), CodeGroup extrai automaticamente os rótulos das linguagens e preserva o realce de sintaxe em todas as abas.

Use CodeGroup para:

• Mostrar chamadas de API em várias linguagens (cURL, Python, JavaScript)
• Comparar implementações entre frameworks
• Exibir vários arquivos em um passo a passo 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>

Exemplos de API

Mostre chamadas de API em diferentes formatos:

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

Com nomes de arquivo

Adicione nomes de arquivo aos blocos 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 x Tabs

Regra geral: use CodeGroup para exemplos de código em várias linguagens. Use Tabs quando precisar de sincronização em toda a página ou de conteúdo que não seja código.

Dicas

• Coloque primeiro a linguagem mais comum (selecionada por padrão)
• Os rótulos das abas vêm do texto após o identificador da linguagem (por exemplo, javascript Node.js)
• A aba selecionada permanece entre as navegações da página

O que vem a seguir?