Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/jaywcjlove/rehype-rewrite

Rewrite element with rehype.
https://github.com/jaywcjlove/rehype-rewrite

html markdown rehype rehype-plugin rewrite

Last synced: about 19 hours ago
JSON representation

Rewrite element with rehype.

Host: GitHub
URL: https://github.com/jaywcjlove/rehype-rewrite
Owner: jaywcjlove
License: mit
Created: 2021-05-16T07:06:11.000Z (over 3 years ago)
Default Branch: main
Last Pushed: 2024-06-25T03:45:43.000Z (5 months ago)
Last Synced: 2024-10-29T11:13:51.599Z (18 days ago)
Topics: html, markdown, rehype, rehype-plugin, rewrite
Language: TypeScript
Homepage: https://jaywcjlove.github.io/rehype-rewrite
Size: 194 KB
Stars: 21
Watchers: 3
Forks: 1
Open Issues: 1
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE

Awesome Lists containing this project

README

        rehype-rewrite

===

[![Buy me a coffee](https://img.shields.io/badge/Buy%20me%20a%20coffee-048754?logo=buymeacoffee)](https://jaywcjlove.github.io/#/sponsor)

[![Downloads](https://img.shields.io/npm/dm/rehype-rewrite.svg?style=flat)](https://www.npmjs.com/package/rehype-rewrite)

[![NPM version](https://img.shields.io/npm/v/rehype-rewrite.svg?style=flat)](https://npmjs.org/package/rehype-rewrite)

[![Build](https://github.com/jaywcjlove/rehype-rewrite/actions/workflows/ci.yml/badge.svg)](https://github.com/jaywcjlove/rehype-rewrite/actions/workflows/ci.yml)

[![Coverage Status](https://jaywcjlove.github.io/rehype-rewrite/badges.svg)](https://jaywcjlove.github.io/rehype-rewrite/lcov-report/)

[![npm bundle size](https://img.shields.io/bundlephobia/minzip/rehype-rewrite)](https://bundlephobia.com/result?p=rehype-rewrite)

[![Repo Dependents](https://badgen.net/github/dependents-repo/jaywcjlove/rehype-rewrite)](https://github.com/jaywcjlove/rehype-rewrite/network/dependents)

Rewrite element with [rehype](https://github.com/rehypejs/rehype).

## Installation

This package is [ESM only](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c): Node 12+ is needed to use it and it must be `import` instead of `require`.

```bash

npm install rehype-rewrite

```

## Usage

> 🚧  Migrate from rehype-rewrite ~~v2.x~~ to `v3.x`.

> 

> ```diff

> rehype()

> - .use(rehypeRewrite, (node, index, parent) => {})

> + .use(rehypeRewrite, {

> +   rewrite: (node, index, parent) => {}

> + })

> ```

```js

import { rehype } from 'rehype';

import rehypeRewrite from 'rehype-rewrite';

import stringify from 'rehype-stringify';

const html = `
header`;

const htmlStr = rehype()

  .data('settings', { fragment: true })

  .use(rehypeRewrite, {

    rewrite: (node, index, parent) => {

      if(node.type == 'text' && node.value == 'header') {

        node.value = ''

      }

    }

  })

  .use(stringify)

  .processSync(html)

  .toString()

```

> ```html

> 
header

> ```

> **`Output:`** 

> 

> ```html

> 

> ```

> 

## Options

```ts

import { Plugin } from 'unified';

import { Root, Element, ElementContent, RootContent } from 'hast';

/** Get the node tree source code string */

export declare const getCodeString: (data?: ElementContent[], code?: string) => string;

export declare type RehypeRewriteOptions = {

  /**

   * Select an element to be wrapped. Expects a string selector that can be passed to hast-util-select ([supported selectors](https://github.com/syntax-tree/hast-util-select/blob/master/readme.md#support)).

   * If `selector` is not set then wrap will check for a body all elements.

   */

  selector?: string;

  /** Rewrite Element. */

  rewrite(node: Root | RootContent, index: number | null, parent: Root | Element | null): void;

};

declare const remarkRewrite: Plugin<[RehypeRewriteOptions?], Root>;

export default remarkRewrite;

```

### `selector?: string;`

Select an element to be wrapped. Expects a string selector that can be passed to hast-util-select ([supported selectors](https://github.com/syntax-tree/hast-util-select/blob/master/readme.md#support)). If `selector` is not set then wrap will check for a body all elements.

### `rewrite(node, index, parent): void;`

Rewrite element.

## Example

### Example 1

```js

import { rehype } from 'rehype';

import rehypeRewrite from 'rehype-rewrite';

import stringify from 'rehype-stringify';

const html = `
header
header
header`;

const htmlStr = rehype()

  .data('settings', { fragment: true })

  .use(rehypeRewrite, {

    selector: 'h1',

    rewrite: (node) => {

      if (node.type === 'element') {

        node.properties.className = 'test';

      }

    }

  })

  .use(stringify)

  .processSync(html)

  .toString()

```

> ```html

> 
header

> header

> header

> ```

> **`Output:`** 

> 

> ```html

> header

> header

> header

> ```

>

### Example 2

```js

import { rehype } from 'rehype';

import rehypeRewrite from 'rehype-rewrite';

import stringify from 'rehype-stringify';

const html = `
header`;

const htmlStr = rehype()

  .use(rehypeRewrite, {

    rewrite: (node) => {

      if (node.type == 'element' && node.tagName == 'body') {

        node.properties = { ...node.properties, style: 'color:red;'}

      }

    }

  })

  .use(stringify)

  .processSync(html)

  .toString()

```

> ```html

> 
header

> ```

> **`Output:`** 

> 

> ```html

> header

> ```

>

### Example 3

```js

import { rehype } from 'rehype';

import rehypeRewrite from 'rehype-rewrite';

import stringify from 'rehype-stringify';

const html = `
hello`;

const htmlStr = rehype()

  .data('settings', { fragment: true })

  .use(rehypeRewrite, {

    rewrite: (node) => {

      if (node.type == 'element' && node.tagName == 'h1') {

        node.children = [ ...node.children, {

          type: 'element',

          tagName: 'span',

          properties: {},

          children: [

            {type: 'text', value: ' world'}

          ]

        }]

      }

    }

  })

  .use(stringify)

  .processSync(html)

  .toString()

```

> ```html

> 
hello

> ```

> **`Output:`** 

> 

> ```html

> hello world



> ```

> 

### Example 4

```js

import { unified } from 'unified';

import remarkParse from 'remark-parse';

import rehypeRaw from 'rehype-raw';

import remark2rehype from 'remark-rehype';

import rehypeRewrite from 'rehype-rewrite';

import stringify from 'rehype-stringify';

const html = `
hello`;

const htmlStr = unified()

  .use(remarkParse)

  .use(remark2rehype, { allowDangerousHtml: true })

  .use(rehypeRaw)

  .use(rehypeRewrite, {

    rewrite: (node) => {

      if (node.type == 'element' && node.tagName == 'h1') {

        node.properties = { ...node.properties, style: 'color:red;' }

      }

    }

  })

  .use(stringify)

  .processSync(html)

  .toString()

```

> ```html

> 
hello

> ```

>

> **`Output:`** 

> 

> ```html

> Hello World!

> ```

> 

## Related

- [`rehype-video`](https://github.com/jaywcjlove/rehype-video) Add improved video syntax: links to `.mp4` and `.mov` turn into videos.

- [`rehype-attr`](https://github.com/jaywcjlove/rehype-attr) New syntax to add attributes to Markdown.

- [`rehype-ignore`](https://github.com/jaywcjlove/rehype-ignore) Ignore content display via HTML comments, Shown in GitHub readme, excluded in HTML.

- [`remark-github-blockquote-alert`](https://github.com/jaywcjlove/remark-github-blockquote-alert) Remark plugin to add support for GitHub Alert.

## Contributors

As always, thanks to our amazing contributors!



  



Made with [action-contributors](https://github.com/jaywcjlove/github-action-contributors).

## License

MIT © [Kenny Wong](https://github.com/jaywcjlove)