CodeGroup

CodeGroup shows code blocks in tabs, usually the same operation in several languages. Tabs take any content. CodeGroup takes only code. It pulls tab labels from each code fence and keeps syntax highlighting in every tab.

Use CodeGroup when:

• Showing API calls in multiple languages (cURL, Python, JavaScript)
• Comparing implementations across frameworks
• Displaying multiple files in a code walkthrough

Basic Usage

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>

API Examples

Show API calls in different formats:

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

With File Names

Add file names to code blocks:

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

Hiding the Copy Button on a Tab

Add nocopy to a fence to drop the copy button on that tab. The other tabs in the group keep theirs:

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 it for a tab that shouldn't be copied as-is, like a cURL example with a placeholder token. See Code Blocks → Hiding the Copy Button for the flag on a standalone block.

CodeGroup vs Tabs

Rule of thumb: Use CodeGroup for multi-language code examples. Use Tabs when you need synchronization across the page or non-code content.

Tips

• Put the most common language first (selected by default)
• Tab labels come from text after the language identifier (e.g., javascript Node.js)
• The selected tab persists across page navigation

What's Next?