Syntax

Choose the authoring style that matches the content. Every form compiles to the same accessible runtime contract.

Compact syntax

The compact form is ideal for neighboring code blocks. Quote a label when it contains a comma.

Compact code tabs

The smallest authoring surface for adjacent examples.

::: code-group labels=["npm, classic", pnpm]
 
```sh
npm install package
```
 
```sh
pnpm add package
```
 
:::

npm install package

pnpm add package

Common emoji shortcodes such as :package:, :yarn:, :rocket:, and :sparkles: are resolved without loading an emoji catalog.

Fence metadata

Add the remark companion before remark-rehype to derive labels from fence metadata while preserving other metadata.

import remarkCodeGroup from "rehype-code-group/remark";
 
processor.use(remarkCodeGroup).use(remarkRehype); 

::: code-group
 
```sh [npm]
npm install package
```
 
```sh [pnpm]
pnpm add package
```
 
:::

Rich-content tabs

Use four colons for the group and nested code-tab directives when a panel needs prose, lists, images, or several code blocks.

Rich runtime guide

Panels can contain explanatory content and multiple nodes.

:::: code-group label="Choose a runtime" default="node"
 
::: code-tab label="Node.js" value="node"
Install the LTS release, then run:
 
```sh
node app.js
```
:::
 
::: code-tab label="Bun" value="bun"
Install Bun, then run:
 
```sh
bun app.ts
```
:::
 
::::

node app.js

bun app.ts

Full emoji catalog

The default entry point stays small. Opt into the complete node-emoji catalog only when your content needs it.

import rehypeCodeGroup from "rehype-code-group";
import { fullEmojiResolver } from "rehype-code-group/emoji";
 
processor.use(rehypeCodeGroup, { labelResolver: fullEmojiResolver }); 

You can also provide any (label: string) => string resolver—for icons, localization, or project-specific naming.