Code Groups

Tabbed code blocks for showing the same concept in multiple languages

Code Groups

Code groups display multiple code blocks as a tabbed interface. Perfect for showing the same functionality across different languages or package managers.

Basic Usage

Syntax:

:::code-group
```js title="JavaScript"
// JS code
```

```python title="Python"
# Python code
```
:::
Markdown

Package Managers

With Line Numbers

Synchronized Tabs

Code groups automatically sync tab selection across the page using localStorage. If a reader selects "Python" in one code group, all code groups on the page switch to the Python tab.

Best Practices

  • Always use the title attribute so tabs have clear labels
  • Show equivalent functionality across languages, not different code
  • Keep the number of tabs to 3--4 for readability
  • Use consistent ordering across code groups on the same page