Getting started
rehype-code-group turns neighboring code blocks—or arbitrary HTML content—into an accessible tab interface. It runs in the rehype phase, so it stays independent of your syntax highlighter and frontend framework.
Build your first group
Add the plugin to your unified pipeline
Add the plugin after Markdown has been converted to HAST. It stays independent of your syntax highlighter.
build-docs.ts
import rehypeStringify from "rehype-stringify";
import remarkParse from "remark-parse";
import remarkRehype from "remark-rehype";
import rehypeCodeGroup from "rehype-code-group";
import { unified } from "unified";
const file = await unified()
.use(remarkParse)
.use(remarkRehype)
.use(rehypeCodeGroup)
.use(rehypeStringify)
.process(markdown);