CodeGroup

CodeGroup wraps two or more fenced code blocks into a tabbed interface, switching between them the same way Tabs does — one visible at a time. Give each fenced block a title (```js title="helloWorld.js") and that becomes its tab label; with no title, the block’s language is used instead (JS, BASH, …).

console.log("Hello World");

print("Hello World!")

class HelloWorld {
  public static void main(String[] args) {
    System.out.println("Hello, World!");
  }
}

<CodeGroup>
```js title="helloWorld.js"
console.log("Hello World");
```
```python title="hello_world.py"
print("Hello World!")
```
</CodeGroup>

A single-block CodeGroup renders as one plain bordered block with no tab strip — there’s nothing to switch between:

npm install writedocs

Set dropdown for a <select> switcher instead of a tab strip:

<CodeGroup dropdown>
```js title="index.js"
...
```
```python title="index.py"
...
```
</CodeGroup>

CodeGroup props