CodeSelect Component

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

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

function capitalize(str: string): string {
  return str.charAt(0).toUpperCase() + str.slice(1);
}

fn capitalize(str: String) -> String {
  str.chars().next().unwrap().to_uppercase().collect::<String>() + &str[1..]
}

<CodeSelect title="Capitalize">
```typescript
function capitalize(str: string): string {
  return str.charAt(0).toUpperCase() + str.slice(1);
}
```
```rust
fn capitalize(str: String) -> String {
  str.chars().next().unwrap().to_uppercase().collect::<String>() + &str[1..]
}
```
</CodeSelect>

Attributes

The <CodeSelect> component can be customized using the following attributes and configuration.

Title

The <CodeSelect> shows a title describing the code blocks it contains.

It's set using the <CodeSelect title="..."> attribute. This is a required attribute.

function capitalize(str: string): string {
  return str.charAt(0).toUpperCase() + str.slice(1);
}

fn capitalize(str: String) -> String {
  str.chars().next().unwrap().to_uppercase().collect::<String>() + &str[1..]
}

// [!code word:title:1]
<CodeSelect title="Descriptive explanation">
  ...
</CodeSelect>

Overriding the title per code block

You can overwrite the title of individual code blocks by specifying a title on the code block. When selecting a code block, the title is updated to reflect the selected code block.

function capitalize(str: string): string {
  return str.charAt(0).toUpperCase() + str.slice(1);
}

fn capitalize(str: String) -> String {
  str.chars().next().unwrap().to_uppercase().collect::<String>() + &str[1..]
}

<CodeSelect title="Descriptive explanation">
  ```typescript title="Capitalize in TypeScript"

  ```
  ```rust title="Capitalize in Rust"

  ...
  ```
</CodeSelect>

Dropdown label

You can overwrite each code block's label, which is displayed in the dropdown menu, by specifying a label attribute.

function capitalize(str: string): string {
  return str.charAt(0).toUpperCase() + str.slice(1);
}

fn capitalize(str: String) -> String {
  str.chars().next().unwrap().to_uppercase().collect::<String>() + &str[1..]
}

<CodeSelect title="Capitalize">
```typescript label="Custom language label"

```
</CodeSelect>