Code Groups#
Adjacent code samples can share the existing accessible tab UI without
hand-writing <tabs> markup. The feature is opt-in: omitted or false
leaves ::: code-group on the normal Markdown or custom-container path.
| Option | Type | Default |
|---|---|---|
codeGroups |
boolean / CodeGroupOptions |
false |
import { oxContent } from "@ox-content/vite-plugin";
export default {
plugins: [
oxContent({
codeGroups: true,
}),
],
};
Passing {} also enables the defaults. The rewrite is static: it reuses the
no-JS ox-tabs widget and <noscript> details fallback. No extra client
JavaScript is shipped.
Authoring#
Before (<tabs>)#
<tabs>
<tab label="config.js">
<pre><code>export default {}</code></pre>
</tab>
<tab label="config.ts">
<pre><code>export default {}</code></pre>
</tab>
</tabs>
After (::: code-group)#
export default {};
export default {};
::: code-group
```js [config.js]
export default {};
```
```ts [config.ts]
export default {};
```
:::
Tab titles come from ```ts [label] or fence meta such as
title="config.ts". When neither is present, the language identifier is
used (js, ts). A fence with no language falls back to Tab 1,
Tab 2, and so on.
An unclosed ::: code-group stays literal and does not consume the rest of
the file. Unknown or malformed group metadata degrades to ordinary fences
and emits a transform warning. Groups written inside fenced or indented
code are left alone.
If custom containers are also enabled, code-group is handled by this
feature, not as an unknown container type.
Existing <tabs> and <pm> blocks are unchanged.