Rehype Code Group Plugin 🤖

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.

Features ✨

• 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.

Installation 📦

[!NOTE] This package is ESM only.

Install the plugin using any package manager:

npm install rehype-code-group
# or
pnpm add rehype-code-group
# or
yarn add rehype-code-group

In Deno with esm.sh:

import rehypeCodeGroup from 'https://esm.sh/rehype-code-group'

In browsers with esm.sh:

<script type="module">
  import rehypeCodeGroup from 'https://esm.sh/rehype-code-group?bundle'
</script>

Usage 🚀

Markdown Syntax

To incorporate code group tabs in your markdown file, use the following syntax:

::: 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

With Rehype

Here's an example of how to use the plugin with Rehype:

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))

With Astro

You can also use this plugin with Astro (astro.config.ts):

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,
    ],
  },
  // ...
})

Customization 🎨

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.

Example

.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",
  },
})

Output Example 📄

Given the following input Markdown: input.md

The plugin will produce the following output: output.html

Contributing 🤝

Contributions are welcome! Please read the contributing guidelines first.

License 📄

This project is licensed under the MIT License - see the LICENSE file for details.

Happy coding! 🎉