jaywcjlove/rehype-rewritePublic

NotificationsYou must be signed in to change notification settings
Fork1
Star24

Rewrite element with rehype.

License

MIT license

24 stars 1 fork Branches Tags Activity

Star

Notifications

You must be signed in to change notification settings

Branches Tags

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 109 Commits
.github		.github
src		src
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
package.json		package.json
renovate.json		renovate.json
tea.yaml		tea.yaml
tsconfig.json		tsconfig.json

Repository files navigation

^Using my app is also a way tosupport me:

rehype-rewrite

Rewrite element withrehype.

Installation

This package isESM only: Node 12+ is needed to use it and it must beimport instead ofrequire.

npm install rehype-rewrite

Usage

🚧 Migrate from rehype-rewrite~~v2.x~~ tov3.x.

rehype()- .use(rehypeRewrite, (node, index, parent) => {})+ .use(rehypeRewrite, {+   rewrite: (node, index, parent) => {}+ })

import{rehype}from'rehype';importrehypeRewritefrom'rehype-rewrite';importstringifyfrom'rehype-stringify';consthtml=`<h1>header</h1>`;consthtmlStr=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()

<h1>header</h1>

Output:

<h1></h1>

Options

import{Plugin}from'unified';import{Root,Element,ElementContent,RootContent}from'hast';/** Get the node tree source code string */exportdeclareconstgetCodeString:(data?:ElementContent[],code?:string)=>string;exportdeclaretypeRehypeRewriteOptions={/**   * 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;};declareconstremarkRewrite:Plugin<[RehypeRewriteOptions?],Root>;exportdefaultremarkRewrite;

`selector?: string;`

Select an element to be wrapped. Expects a string selector that can be passed to hast-util-select (supported selectors). Ifselector is not set then wrap will check for a body all elements.

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

Rewrite element.

Example

Example 1

import{rehype}from'rehype';importrehypeRewritefrom'rehype-rewrite';importstringifyfrom'rehype-stringify';consthtml=`<h1>header</h1><h1>header</h1><h1>header</h1>`;consthtmlStr=rehype().data('settings',{fragment:true}).use(rehypeRewrite,{selector:'h1',rewrite:(node)=>{if(node.type==='element'){node.properties.className='test';}}}).use(stringify).processSync(html).toString()

<h1>header</h1><h1>header</h1><h1class="title3">header</h1>

Output:

<h1class="test">header</h1><h1class="test">header</h1><h1class="test">header</h1>

Example 2

import{rehype}from'rehype';importrehypeRewritefrom'rehype-rewrite';importstringifyfrom'rehype-stringify';consthtml=`<h1>header</h1>`;consthtmlStr=rehype().use(rehypeRewrite,{rewrite:(node)=>{if(node.type=='element'&&node.tagName=='body'){node.properties={ ...node.properties,style:'color:red;'}}}}).use(stringify).processSync(html).toString()

<h1>header</h1>

Output:

<html><head></head><bodystyle="color:red;"><h1>header</h1></body></html>

Example 3

import{rehype}from'rehype';importrehypeRewritefrom'rehype-rewrite';importstringifyfrom'rehype-stringify';consthtml=`<h1>hello</h1>`;consthtmlStr=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()

<h1>hello</h1>

Output:

<h1>hello<span> world</span></h1>

Example 4

import{unified}from'unified';importremarkParsefrom'remark-parse';importrehypeRawfrom'rehype-raw';importremark2rehypefrom'remark-rehype';importrehypeRewritefrom'rehype-rewrite';importstringifyfrom'rehype-stringify';consthtml=`<h1>hello</h1>`;consthtmlStr=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()

<h1>hello</h1>

Output:

<h1style="color:red;">Hello World!</h1>

rehype-video Add improved video syntax: links to.mp4 and.mov turn into videos.
rehype-attr New syntax to add attributes to Markdown.
rehype-ignore Ignore content display via HTML comments, Shown in GitHub readme, excluded in HTML.
remark-github-blockquote-alert Remark plugin to add support for GitHub Alert.