CodeSelect Component
The CodeSelect component allows to conveniently present multi-language code examples within your documentation.
Server
const foo = "bar";
[1,2,3].forEach((val) => {console.log(val)});
Server
let foo = "bar";
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>
server.ts
const foo = "bar";
[1,2,3].forEach((val) => {console.log(val)});
server.rs
let foo = "bar";
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>
Client
const foo = "bar";
[1,2,3].forEach((val) => {console.log(val)});
Server
let foo = "bar";