rehype-attr

^{Using my app is also a way to support 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 to remark-attr.

Installation

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

npm install rehype-attr

Default Syntax

Links

HTML Example

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

Output:

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

import { rehype } from 'rehype';
import rehypeAttrs from '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>
  <a href="https://github.com" rel="external">github</a>
  <!--rehype:rel=external-->
</p>

import { unified } from 'unified';
import stringify from 'rehype-stringify';
import rehypeRaw from 'rehype-raw';
import remark2rehype from 'remark-rehype';
import remarkParse from 'remark-parse';
import rehypeAttrs from '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:

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

import { rehype } from 'rehype';
import rehypeAttrs from '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:

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

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

Output:

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

Strong

HTML Example

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

Output:

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

Markdown Example

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

Output:

<p>This is a <strong style="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 <em style="color: red">node</em> packet manager.

Markdown Example

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

Output:

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

Code

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

Output:

<pre data-type="rehyp">
  <code class="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 <code style="color:pink;">content</code>

Markdown Example

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

Output:

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

List

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

Output:

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

HTML Example

import { rehype } from 'rehype';
import rehypeAttrs from '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:

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

Markdown Example

import { unified } from 'unified';
import stringify from 'rehype-stringify';
import rehypeRaw from 'rehype-raw';
import remarkParse from 'remark-parse';
import remark2rehype from 'remark-rehype';
import rehypeAttrs from '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>
  <a href="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 for GitHub Alert

Contributors

As always, thanks to our amazing contributors!

Made with github-action-contributors.

License

MIT Kenny Wong