Skip to content

Commit

Permalink
chore: updated readme with more installation options
Browse files Browse the repository at this point in the history
  • Loading branch information
ITZSHOAIB committed Nov 16, 2024
1 parent cd85ecf commit db38063
Show file tree
Hide file tree
Showing 2 changed files with 31 additions and 8 deletions.
36 changes: 29 additions & 7 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,13 @@

# 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.
![NPM Version](https://img.shields.io/npm/v/rehype-code-group)
![NPM Downloads](https://img.shields.io/npm/dm/rehype-code-group)
![npm bundle size](https://img.shields.io/bundlephobia/minzip/rehype-code-group)
![NPM License](https://img.shields.io/npm/l/rehype-code-group)

> [!NOTE]
> ** "This package is ***ESM*** only"

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

Expand All @@ -14,12 +17,17 @@ A [Rehype](https://github.com/rehypejs/rehype) plugin for grouping code blocks w
## Features ✨

- Group code blocks with tabs
- Customizable class names for styling
- Automatically adds necessary styles and scripts to the document
- **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 📦
Install the plugin using npm or yarn:

> [!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
Expand All @@ -29,6 +37,20 @@ pnpm add rehype-code-group
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
<script type="module">
import rehypeCodeGroup from 'https://esm.sh/rehype-code-group?bundle'
</script>
```

## Usage 🚀

### Markdown Syntax
Expand Down
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,8 @@
"rehype-code-grouping-block",
"rehype-code-grouping-tabs-block",
"rehype-tabs-block",
"rehype-tab-block"
"rehype-tab-block",
"rehype-code-grouping-tab-block"
],
"author": "Sohab Sk",
"license": "MIT",
Expand Down

0 comments on commit db38063

Please sign in to comment.