CodeSelect Component

The CodeSelect component allows to conveniently present multi-language code examples within your documentation.

const foo = "bar";

[1,2,3].forEach((val) => {console.log(val)});

Usage

Wrap one or more normal Markdown code blocks within <CodeSelect>...</CodeSelect> to turn it into a CodeSelect component.

Basic

To group multiple code blocks, wrap them with the <CodeSelect> component. The select label is determined by the language.

<CodeSelect title="Server">
```typescript
const foo = "bar";

[1,2,3].forEach((val) => {console.log(val)});
```
```rust
let foo = "bar";
```
</CodeSelect>

Customizing the select label

You can overwrite the code blocks' labels in the group.

<CodeSelect>
```typescript title=server.ts label="Custom label"
const foo = "bar";

[1,2,3].forEach((val) => {console.log(val)});
```
```rust title=server.rs label="Rusty"
let foo = "bar";
```
</CodeSelect>

const foo = "bar";

[1,2,3].forEach((val) => {console.log(val)});

Customizing titles

You can overwrite the title of individual code blocks by specifying a title on the code block.

<CodeSelect title="Server">
```typescript title="Client"
const foo = "bar";

[1,2,3].forEach((val) => {console.log(val)});
```
```rust
let foo = "bar";
```
</CodeSelect>

const foo = "bar";

[1,2,3].forEach((val) => {console.log(val)});