Rewrite elements with rehype.
This package is ESM only: Node 12+ is needed to use it and it must be import instead of require.
npm install rehype-multi-rewrite🚧 Migrate from rehype-rewrite
rehype() - .use(rehypeRewrite, (node, index, parent) => {}) - .use(rehypeRewrite, { - rewrite: (node, index, parent) => {} - }) + .use(rehypeMultiRewrite, { + '': (node, index, parent) => {} + })
import { rehype } from 'rehype';
import rehypeMultiRewrite from 'rehype-multi-rewrite';
import stringify from 'rehype-stringify';
const html = `<h1>header</h1>`;
const htmlStr = rehype()
.data('settings', { fragment: true })
.use(rehypeMultiRewrite, {
'': (node, index, parent) => {
if(node.type == 'text' && node.value == 'header') {
node.value = ''
}
}
})
.use(stringify)
.processSync(html)
.toString()<h1>header</h1>
Output:<h1></h1>
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;
/**
* Select elements to be wrapped. Expects string selectors that can be passed to hast-util-select ([supported selectors](https://github.com/syntax-tree/hast-util-select/blob/master/readme.md#support)).
*/
export declare type RehypeMultiRewriteOptions = {
[selector: string]: (
node: Root | RootContent,
index?: number,
parent?: Root | Element
) => void;
};
declare const remarkMultiRewrite: Plugin<[RehypeMultiRewriteOptions?], Root>;
export default remarkMultiRewrite;Select an element to be wrapped. Expects a string selector that can be passed to hast-util-select (supported selectors). If selector is an empty string then wrap will check for a body all elements.
Rewrite element.
import { rehype } from 'rehype';
import rehypeMultiRewrite from 'rehype-multi-rewrite';
import stringify from 'rehype-stringify';
const html = `<h1>header</h1><h1>header</h1><h1 class="title3">header</h1>`;
const htmlStr = rehype()
.data('settings', { fragment: true })
.use(rehypeMultiRewrite, {
'h1': (node) => {
if (node.type === 'element') {
node.properties.className = 'test';
}
}
})
.use(stringify)
.processSync(html)
.toString()<h1>header</h1> <h1>header</h1> <h1 class="title3">header</h1>
Output:<h1 class="test">header</h1> <h1 class="test">header</h1> <h1 class="test">header</h1>
import { rehype } from 'rehype';
import rehypeMultiRewrite from 'rehype-multi-rewrite';
import stringify from 'rehype-stringify';
const html = `<h1>header</h1>`;
const htmlStr = rehype()
.use(rehypeMultiRewrite, {
'body': (node) => {
node.properties = { ...node.properties, style: 'color:red;'}
}
})
.use(stringify)
.processSync(html)
.toString()<h1>header</h1>
Output:<html><head></head><body style="color:red;"><h1>header</h1></body></html>
import { rehype } from 'rehype';
import rehypeMultiRewrite from 'rehype-multi-rewrite';
import stringify from 'rehype-stringify';
const html = `<h1>hello</h1>`;
const htmlStr = rehype()
.data('settings', { fragment: true })
.use(rehypeMultiRewrite, {
'h1': (node) => {
node.children = [ ...node.children, {
type: 'element',
tagName: 'span',
properties: {},
children: [
{type: 'text', value: ' world'}
]
}]
}
})
.use(stringify)
.processSync(html)
.toString()<h1>hello</h1>
Output:<h1>hello<span> world</span></h1>
import { unified } from 'unified';
import remarkParse from 'remark-parse';
import rehypeRaw from 'rehype-raw';
import remark2rehype from 'remark-rehype';
import rehypeMultiRewrite from 'rehype-multi-rewrite';
import stringify from 'rehype-stringify';
const html = `<h1>hello</h1>`;
const htmlStr = unified()
.use(remarkParse)
.use(remark2rehype, { allowDangerousHtml: true })
.use(rehypeRaw)
.use(rehypeMultiRewrite, {
'h1': (node) => {
node.properties = { ...node.properties, style: 'color:red;' }
}
})
.use(stringify)
.processSync(html)
.toString()60B1<h1>hello</h1>
Output:<h1 style="color:red;">Hello World!</h1>
rehype-videoAdd improved video syntax: links to.mp4and.movturn into videos.rehype-attrNew syntax to add attributes to Markdown.rehype-ignoreIgnore content display via HTML comments, Shown in GitHub readme, excluded in HTML.remark-github-blockquote-alertRemark plugin to add support for GitHub Alert.
As always, thanks to our amazing contributors!
Made with action-contributors.
MIT © Kenny Wong