Codegroup

Display multiple code blocks in a tabbed view. Each fenced code block becomes a tab, with the language automatically used as the tab name.

Basic usage

Tabs are automatically labeled by their code block language.

{% codegroup %}
```js
const x = 1;
```

```python
x = 1
```
{% /codegroup %}

const x = 1;

Custom labels

Use the labels attribute to override the default language-based tab names. Useful when multiple tabs share the same language.

{% codegroup labels="React, Vue, Svelte" %}
```jsx
export default function App() {
  return <h1>Hello</h1>;
}
```

```html
<template>
  <h1>Hello</h1>
</template>
```

```html
<h1>Hello</h1>
```
{% /codegroup %}

export default function App() {
  return <h1>Hello</h1>;
}

With title

Use the title attribute to display a filename or label in the topbar.

{% codegroup title="app.js" %}
```js
import express from 'express';

const app = express();
app.get('/', (req, res) => {
  res.send('Hello World');
});
```
{% /codegroup %}

app.js

import express from 'express';

const app = express();
app.get('/', (req, res) => {
  res.send('Hello World');
});

Attributes

Attribute	Type	Default	Description
`labels`	`string`	—	Comma-separated custom tab names
`title`	`string`	—	Filename or label shown in the topbar