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);
}

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);
}

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);
}

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);
}