A Rehype plugin for grouping code blocks with tabs, perfect for documentation and tutorials. Works with all Code Syntax Highlighters.
npm install rehype-code-group!NPM Version
!NPM Downloads
!npm bundle size
!NPM License
A Rehype plugin for grouping code blocks with tabs, allowing you to switch between different code snippets easily. Perfect for documentation and tutorials where you want to show the same code in different languages or configurations.
Inspired by Vitepress Code Groups
> [!TIP]
> This plugin is versatile and can be used to create tabs for any type of content, not just code blocks. You can easily organize and display different types of content within tabs.
- Group Code Blocks with Tabs: Easily group code blocks with tabs, allowing users to switch between different code snippets.
- Automatic Styles and Scripts: Automatically adds the necessary styles and scripts to the document.
- Accessibility: Enhanced accessibility features for better user experience.
- Versatile Content Grouping: Create tabs for any type of content, not just code blocks. Organize and display different types of content within tabs.
- Customizable Class Names: Customize the class names used by the plugin to match your project's styles.
> [!NOTE]
> This package is ESM only.
Install the plugin using any package manager:
``bash`
npm install rehype-code-groupor
pnpm add rehype-code-groupor
yarn add rehype-code-group
In Deno with esm.sh:
`js`
import rehypeCodeGroup from 'https://esm.sh/rehype-code-group'
In browsers with esm.sh:
`html`
To incorporate code group tabs in your markdown file, use the following syntax:
~~~raw
::: code-group labels=[npm, pnpm, yarn]
`bash`
npm install rehype-code-group
`bash`
pnpm add rehype-code-group
`bash`
yarn add rehype-code-group
:::
~~~
The code group will be rendered like this (The below UI used Expressive Code as a syntax highlighter):
Check this functionalty live: https://4techloverz.com/wordpress-astro-migration-easy-guide/#initialize-astro-project
Here's an example of how to use the plugin with Rehype:
`typescript
import { rehype } from "rehype";
import remarkParse from "remark-parse";
import remarkRehype from "remark-rehype";
import rehypeMinifyWhitespace from "rehype-minify-whitespace";
import rehypeStringify from "rehype-stringify";
import rehypeCodeGroup from "rehype-code-group";
const options = {};
const file = await rehype()
.use(remarkParse)
.use(remarkRehype)
.use(rehypeCodeGroup, options)
.use(rehypeMinifyWhitespace)
.use(rehypeStringify)
.process(input);
console.log(String(file))
`
You can also use this plugin with Astro (astro.config.ts):
`typescript
import { defineConfig } from 'astro/config';
import rehypeCodeGroup from 'rehype-code-group';
// https://docs.astro.build/en/reference/configuration-reference/
export default defineConfig({
// ...
markdown: {
// ...
rehypePlugins: [
// ...
rehypeCodeGroup,
],
},
// ...
})
`
You can customize the class names used by the plugin to match your project's styles. The available options are:
- customClassNames: An object to override the default class names.
`typescript``
.use(rehypeCodeGroup, {
customClassNames: {
codeGroupClass: "my-code-group",
tabContainerClass: "my-tab-container",
tabClass: "my-tab",
activeTabClass: "my-active-tab",
blockContainerClass: "my-block-container",
activeBlockClass: "my-active-block",
},
})
Given the following input Markdown: input.md
The plugin will produce the following output: output.html
---
Happy coding! 🎉