CodeGroup

code-group turns multiple sibling code blocks into a tabbed interface. Each tab label comes from the code block's [filename].

Built into ContentRenderer — no registration needed.

Basic usage

:::code-group
```vue [Button.vue]
<template>
  <button class="btn">Click me</button>
</template>
```

```css [style.css]
.btn {
  padding: 8px 16px;
  border-radius: 6px;
  background: #3b82f6;
  color: white;
}
```
:::

<template>
  <button class="btn">Click me</button>
</template>

.btn {
  padding: 8px 16px;
  border-radius: 6px;
  background: #3b82f6;
  color: white;
}

Props

Nesting

Colon count follows the MDC nesting convention — inner containers use more colons than their parent. For example, when code-group sits inside another container, use :::: for the outer and ::: for code-group.