CodeGroup

CodeGroup displays code blocks in a tabbed interface, perfect for showing the same operation in multiple languages.

Basic Usage

const data = await fetch('/api/data').then(r => r.json());

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

import httpx

client = httpx.Client(base_url=os.environ['API_URL'])

How It Works

CodeGroup automatically:

1. Extracts the language from each code block
2. Creates tabs labeled by language
3. Preserves syntax highlighting
4. Remembers the selected tab across page navigation

Tips

• Put the most common language first (it's selected by default)
• Use consistent naming across CodeGroups
• The tab label comes from the text after the language identifier