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

Ocultar o botão de copiar em uma aba

Adicione nocopy a um bloco para remover o botão de copiar apenas dessa aba; as outras abas do grupo mantêm o delas:

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>

Use em uma aba que não deveria ser copiada como está, como um exemplo de cURL com um token de espaço reservado, deixando copiáveis os exemplos funcionais das outras abas. Consulte Blocos de código → Ocultar o botão de copiar para a marca em um bloco isolado.

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?