https://github.com/r4ai/rehype-custom-code

https://github.com/r4ai/rehype-custom-code

rehype-plugin

Last synced: 20 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/r4ai/rehype-custom-code
• Owner: r4ai
• License: mit
• Created: 2023-11-22T15:36:25.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-04-16T20:18:03.000Z (9 months ago)
• Last Synced: 2024-04-20T08:51:19.446Z (9 months ago)
• Topics: rehype-plugin
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/rehype-custom-code
• Size: 312 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# rehype-custom-code (WIP)

This plugin is intended to facilitate the creation of your own custom code blocks using custom components such as React by outputting metadata as Props. Therefore, this plugin is headless and only outputs Props based on the input given as metadata. Styling should be done with custom components based on these Props.

This plugin also supports syntax highlighting with shiki by adding `options.shiki` to the plugin options.

## Features

- [ ] Metadata parsing and output as Props

  - [x] Custom Key-Value Pairs e.g. `title="Hello, World!"`, `caption=main.js`

  - [x] Numeric Range e.g. `{1-5}`, `{1,2,3,4,5}`

  - [ ] Word Range e.g. `/hello/`, `/helloworld/3-5`

- [x] Code block syntax highlighting with shiki

- [ ] Inline code syntax highlighting with shiki

- [ ] ANSI syntax highlighting

- [x] Line numbers

- [x] Line based diff highlighting

## Installation

```sh

# npm

npm install rehype-custom-code

# pnpm

pnpm add rehype-custom-code

# bun

bun add rehype-custom-code

```

## Usage

### Generate HTML

This is the most basic example and is usually used in conjunction with rehype-react or mdx, with the pre tag replaced by its own component. To allow customization with your own components, this plugin is designed to pass metadata information as Props; in the case of HTML output, this is output as HTML attributes.

```ts

import {

  rehypeCustomCode,

  type RehypeCustomCodeMeta,

} from "rehype-custom-code";

const md = `

  \`\`\`javascript title="Hello, World!" {1-5}

  console.log("Hello, World!");

  \`\`\`

`;

// You can define your own typescript type to the metadata.

type Meta = RehypeCustomCodeMeta & {

  someKey: string;

};

const html = await unified()

  .use(remarkParse)

  .use(remarkRehype)

  .use(rehypeCustomCode, {

    shiki: {

      propsPrefix: "data", // for JSX like languages, use `propsPrefix: ""`

      themes: {

        light: "github-light",

        dark: "one-dark-pro",

      },

    },

  })

  .use(rehypeStringify)

  .process(md);

console.log(html.toString());

```

Yields:

```html


  

    console.log("Hello, World!");

  



```


## Options

See [RehypeCustomCodeOptions](https://r4ai.github.io/rehype-custom-code/api/types/index.RehypeCustomCodeOptions.html) for available options.

## Development

### Commands

| Command                       | Description                                       |

| ----------------------------- | ------------------------------------------------- |

| `bun install`                 | Install dependencies                              |

| `bun run build`               | Build the project                                 |

| `bun run test`                | Run tests with watch mode                         |

| `bun run check`               | Lint and format                                   |

| `npm publish --dry-run`       | Check locally for products to be published to npm |

| `npm publish --access public` | Publish to npm                                    |

### Publish

1. Update version in `package.json`

2. commit with tag `vX.X.X`

3. push to GitHub