https://github.com/itzshoaib/rehype-code-group
A Rehype plugin for grouping code blocks with tabs, perfect for documentation and tutorials. Works with all Code Syntax Highlighters. ⭐️ Star to support our work!
https://github.com/itzshoaib/rehype-code-group
astro-code-group rehype rehype-code rehype-code-group rehype-code-group-tabs rehype-code-grouping rehype-code-grouping-tabs rehype-code-tabs rehype-group-code rehype-highlight rehype-plugin rehype-tab rehype-tabs
Last synced: 4 months ago
JSON representation
A Rehype plugin for grouping code blocks with tabs, perfect for documentation and tutorials. Works with all Code Syntax Highlighters. ⭐️ Star to support our work!
- Host: GitHub
- URL: https://github.com/itzshoaib/rehype-code-group
- Owner: ITZSHOAIB
- License: mit
- Created: 2024-11-10T20:55:44.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-12-31T12:36:02.000Z (5 months ago)
- Last Synced: 2024-12-31T13:28:27.647Z (5 months ago)
- Topics: astro-code-group, rehype, rehype-code, rehype-code-group, rehype-code-group-tabs, rehype-code-grouping, rehype-code-grouping-tabs, rehype-code-tabs, rehype-group-code, rehype-highlight, rehype-plugin, rehype-tab, rehype-tabs
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/rehype-code-group
- Size: 209 KB
- Stars: 7
- Watchers: 1
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Rehype Code Group Plugin 🤖
A [Rehype](https://github.com/rehypejs/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](https://vitepress.dev/guide/markdown#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](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c) only.
Install the plugin using any package manager:
```bash
npm install rehype-code-group
# or
pnpm add rehype-code-group
# or
yarn add rehype-code-group
```
In Deno with [esm.sh](https://esm.sh/):
```js
import rehypeCodeGroup from 'https://esm.sh/rehype-code-group'
```
In browsers with [esm.sh](https://esm.sh/):
```html
import rehypeCodeGroup from 'https://esm.sh/rehype-code-group?bundle'
```
## Usage 🚀
### Markdown Syntax
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](https://expressive-code.com/) as a syntax highlighter):
Check this functionalty live: [https://4techloverz.com/wordpress-astro-migration-easy-guide/#initialize-astro-project](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:
```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))
```
### With Astro
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,
],
},
// ...
})
```
## 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
```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",
},
})
```
### Output Example 📄
Given the following input Markdown: [input.md](/test/fixtures/single-md/input.md)
The plugin will produce the following output: [output.html](/test/fixtures/single-md/output.html)
## Contributing 🤝
Contributions are welcome! Please read the contributing guidelines first.
## License 📄
This project is licensed under the MIT License - see the [LICENSE](https://github.com/ITZSHOAIB/rehype-code-group?tab=MIT-1-ov-file) file for details.
---
Happy coding! 🎉