AI agents: fetch the documentation index at llms.txt. Markdown versions are available by appending .md to any page URL, including this page's markdown.
Code group
Display multiple code blocks with tabbed navigation.
Use the CodeGroup component to show multiple related code blocks in a single tabbed container. This is useful for showing the same command or snippet across different languages or tools.
Basic usage
Wrap two or more fenced code blocks inside <CodeGroup>. Each tab is labeled from the title attribute on the code block:
<CodeGroup>
```bash title="npm"
npm install blodemd
```
```bash title="pnpm"
pnpm add blodemd
```
```bash title="yarn"
yarn add blodemd
```
</CodeGroup>npm install blodemdMulti-language example
Show the same API call in different programming languages:
<CodeGroup>
```javascript title="Node.js"
const res = await fetch("https://api.blode.md/v1/projects", {
headers: { Authorization: `Bearer ${API_KEY}` },
});
const data = await res.json();
```
```python title="Python"
import requests
res = requests.get(
"https://api.blode.md/v1/projects",
headers={"Authorization": f"Bearer {API_KEY}"},
)
data = res.json()
```
```bash title="cURL"
curl -H "Authorization: Bearer $API_KEY" \
https://api.blode.md/v1/projects
```
</CodeGroup>const res = await fetch("https://api.blode.md/v1/projects", {
headers: { Authorization: `Bearer ${API_KEY}` },
});
const data = await res.json();Tab labels
Tabs are labeled in this order of priority:
- The
titleattribute on the code fence, such as ```bash title="npm" - The language identifier (e.g.,
javascript,python) - A generic fallback like "Tab 1"
Always set explicit title attributes when the language alone does not
distinguish the tabs.