^{Usingmy app is also a way tosupport me:}

rehype-attr

This plugin adds support for custom attributes in Markdown. Attributes can be added using HTML comment syntax, but they won’t appear in the preview, similar toremark-attr.

Installation

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

npminstall rehype-attr

Default Syntax

Links

HTML Example

<ahref="https://github.com">github</a><!--rehype:rel=external&style=color:pink;&data-name=kenny-->

Output:

<ahref="https://github.com"rel="external"style="color:pink;"data-name="kenny">github</a>

import{ rehype}from'rehype';importrehypeAttrsfrom'rehype-attr';const htmlStr=rehype().data('settings',{fragment:true}).use(rehypeAttrs,{properties:'attr'}).processSync(`<a href="https://github.com">github</a><!--rehype:rel=external-->`).toString()

Markdown Example

[github](https://github.com)<!--rehype:rel=external-->

Output:

<p><ahref="https://github.com"rel="external">github</a><!--rehype:rel=external--></p>

import{ unified}from'unified';importstringifyfrom'rehype-stringify';importrehypeRawfrom'rehype-raw';importremark2rehypefrom'remark-rehype';importremarkParsefrom'remark-parse';importrehypeAttrsfrom'rehype-attr';const htmlStr=unified().use(remarkParse).use(remark2rehype,{allowDangerousHtml:true}).use(rehypeRaw).use(rehypeAttrs,{properties:'attr'}).use(stringify).processSync(`[github](https://github.com)<!--rehype:rel=external-->`).toString()

Header

HTML Example

<h1>This is a title</h1><!--rehype:style=color:pink;-->

Output:

<h1style="color:pink;">This is a title</h1>

import{ rehype}from'rehype';importrehypeAttrsfrom'rehype-attr';const htmlStr=rehype().data('settings',{fragment:true}).use(rehypeAttrs,{properties:'attr'}).processSync(`<h1>This is a title</h1><!--rehype:style=color:pink;-->`).toString()

Markdown Example

This is a title====<!--rehype:style=color:pink;-->

Output:

<h1style="color:pink;">This is a title</h1>

# This is a title<!--rehype:style=color:pink;-->

Output:

<h1style="color:pink;">This is a title</h1>

Strong

HTML Example

This is a<strong>Unicorn</strong><!--rehype:style=color: grey-->

Output:

This is a<strongstyle="color:grey">Unicorn</strong>

Markdown Example

This is a**Unicorn**<!--rehype:style=color: grey-->

Output:

<p>This is a<strongstyle="color:grey">Unicorn</strong><!--rehype:style=color: grey--></p>

Emphasis

HTML Example

Npm stand for<em>node</em><!--rehype:style=color: red--> packet manager.

Output:

Npm stand for<emstyle="color:red">node</em> packet manager.

Markdown Example

Npm stand for*node*<!--rehype:style=color: red--> packet manager.

Output:

<p>Npm stand for<emstyle="color:red">node</em><!--rehype:style=color: red--> packet manager.</p>

Code

<!--rehype:title=Rehype Attrs&abc=1&hello=2-->\```jsconsole.log('')\```

Output:

<predata-type="rehyp"><codeclass="language-js"data-config="[object Object]">    console.log('')</code></pre>

Inlne Code

HTML Example

This is the<code>content</code><!--rehype:style=color:pink;-->

Output:

This is the<codestyle="color:pink;">content</code>

Markdown Example

This is the`content`<!--rehype:style=color:pink;-->

Output:

<p>This is the<codestyle="color:pink;">content</code><!--rehype:style=color:pink;--></p>

List

- list<!--rehype:style=width:100px;-->

Output:

<ulstyle="width:100px;"><li>list</li></ul><!--rehype:style=width:100px;-->

HTML Example

import{ rehype}from'rehype';importrehypeAttrsfrom'rehype-attr';const htmlStr=rehype().data('settings',{fragment:true}).use(rehypeAttrs,{properties:'attr'}).processSync(`<a href="https://github.com">github</a><!--rehype:rel=external-->`).toString()

Output:

<h1style="color:pink;">This is a title</h1>

Markdown Example

import{ unified}from'unified';importstringifyfrom'rehype-stringify';importrehypeRawfrom'rehype-raw';importremarkParsefrom'remark-parse';importremark2rehypefrom'remark-rehype';importrehypeAttrsfrom'rehype-attr';const mrkStr=`[github](https://github.com)<!--rehype:rel=external-->`const htmlStr=unified().use(remarkParse).use(remark2rehype,{allowDangerousHtml:true}).use(rehypeRaw).use(rehypeAttrs,{properties:'attr'}).use(stringify).processSync(mrkStr).toString()

Output:

<p><ahref="https://github.com"rel="external">github</a><!--rehype:rel=external--></p>

Options

properties

Default Value:data
Value:data,string,attr

codeBlockParames

Code block passing parameters

Default Value:true

commentStart

Optional start delimiter for comments @example\\{\\*

Default Value:<!--

commentEnd

Optional end delimiter for comments @example\\*\\}

Default Value:-->

Related

• rehype-video Add improved video syntax: links to.mp4 and.mov turn into videos.
• rehype-rewrite Rewrite element with rehype.
• rehype-ignore Ignore content display via HTML comments, Shown in GitHub readme, excluded in HTML.
• remark-github-blockquote-alert Remark plugin to add support forGitHub Alert

Contributors

As always, thanks to our amazing contributors!

Made withgithub-action-contributors.

License

MIT ©Kenny Wong