Frameworks

The plugin belongs in the rehype phase regardless of framework. What changes is who owns the Markdown pipeline and browser assets.

Astro

Add the plugin to markdown.rehypePlugins.

import { defineConfig } from "astro/config";
import rehypeCodeGroup from "rehype-code-group";
 
export default defineConfig({
  markdown: {
    rehypePlugins: [[rehypeCodeGroup, { assets: "inline" }]], 
  },
});

For a global application bundle, choose assets: "none", import the CSS from a global stylesheet, and import the browser client from an Astro component script.

Vocs

Vocs already provides native code groups for hand-authored documentation. Use rehype-code-group when you need its generated HAST contract, rich-content tabs, explicit synchronization, or persistence. See the dedicated Vocs integration guide for the safe setup and the syntax boundary between both tools.

Unified and remark

The fence-metadata helper must run in the remark phase. The rehype plugin runs after remark-rehype.

processor
  .use(remarkParse)
  .use(remarkCodeGroup)
  .use(remarkRehype) 
  .use(rehypeCodeGroup) 
  .use(rehypeStringify);

Package-manager converter

Mark a shell fence with npm2yarn and run the package-manager remark plugin before remarkCodeGroup.

```sh npm2yarn
npm install rehype-code-group
```

It generates npm, pnpm, Yarn, and Bun tabs for install aliases, removals, scripts, and one-off npx executables. Unsupported npm commands produce a VFile warning instead of a silently invented translation.