CodeGroup

CodeGroup puts several code blocks in one box, showing one at a time - the same example in several languages, say. Each block’s title is its tab’s name.

console.log("Hello World");

print("Hello World!")

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

<CodeGroup>
```js helloWorld.js
console.log("Hello World");
```
```python hello_world.py
print("Hello World!")
```
```java HelloWorld.java
class HelloWorld { ... }
```
</CodeGroup>

A block without a title is named by its language - JS, BASH. Every code block option works in a group: line highlighting, line numbers, icons, and the rest.

Menu

dropdown picks the block with a menu instead of tabs - for many languages, or long names:

curl https://api.example.com/v1/payments \
  --header "Authorization: Bearer $API_KEY"

const payments = await acme.payments.list();

payments = acme.payments.list()

payments = Acme::Payment.list

payments, err := client.Payments.List(ctx)

<CodeGroup dropdown>
```bash cURL
curl https://api.example.com/v1/payments \
  --header "Authorization: Bearer $API_KEY"
```
```js Node.js
const payments = await acme.payments.list();
```
```python Python
payments = acme.payments.list()
```
</CodeGroup>

A single block

A CodeGroup with one block shows it as a plain code block, with no tabs:

npm install acme-sdk

Props

To pin a request and its response beside the page instead, use RequestExample and ResponseExample.