rehype-attr

New syntax to add attributes to Markdown. rehype-attr like remark-attr

Installation

This package is ESM only: Node 12+ is needed to use it and it must be import instead of require.

1npm install rehype-attr

Default Syntax

Links

HTML Example

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

Output:

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

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

Markdown Example

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

Output:

1<p>
2  <a href="https://github.com" rel="external">github</a>
3  <!--rehype:rel=external-->
4</p>

1import { unified } from 'unified';
2import stringify from 'rehype-stringify';
3import rehypeRaw from 'rehype-raw';
4import remark2rehype from 'remark-rehype';
5import remarkParse from 'remark-parse';
6import rehypeAttrs from 'rehype-attr';
7
8const htmlStr = unified()
9  .use(remarkParse)
10  .use(remark2rehype, { allowDangerousHtml: true })
11  .use(rehypeRaw)
12  .use(rehypeAttrs, { properties: 'attr' })
13  .use(stringify)
14  .processSync(`[github](https://github.com)<!--rehype:rel=external-->`)
15  .toString()

Header

HTML Example

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

Output:

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

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

Markdown Example

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

Output:

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

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

Output:

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

Strong

HTML Example

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

Output:

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

Markdown Example

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

Output:

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

Emphasis

HTML Example

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

Output:

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

Markdown Example

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

Output:

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

Code

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

Output:

1<pre data-type="rehyp">
2  <code class="language-js" data-config="[object Object]">
3    console.log('')
4  </code>
5</pre>

Inlne Code

HTML Example

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

Output:

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

Markdown Example

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

Output:

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

List

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

Output:

1<ul style="width:100px;">
2  <li>list</li>
3</ul>
4<!--rehype:style=width:100px;-->

HTML Example

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

Output:

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

Markdown Example

1import { unified } from 'unified';
2import stringify from 'rehype-stringify';
3import rehypeRaw from 'rehype-raw';
4import remarkParse from 'remark-parse';
5import remark2rehype from 'remark-rehype';
6import rehypeAttrs from 'rehype-attr';
7
8const mrkStr = `[github](https://github.com)<!--rehype:rel=external-->`
9const htmlStr = unified()
10  .use(remarkParse)
11  .use(remark2rehype, { allowDangerousHtml: true })
12  .use(rehypeRaw)
13  .use(rehypeAttrs, { properties: 'attr' })
14  .use(stringify)
15  .processSync(mrkStr)
16  .toString()

Output:

1<p>
2  <a href="https://github.com" rel="external">github</a>
3  <!--rehype:rel=external-->
4</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 for GitHub Alert

Contributors

As always, thanks to our amazing contributors!

Made with github-action-contributors.

License

MIT © Kenny Wong