Awesome
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
.
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-->
<details> <summary>Example Code</summary>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()
</details>
Markdown Example
[github](https://github.com)<!--rehype:rel=external-->
<details> <summary>Example Code</summary>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()
</details>
<br />
Header
HTML Example
<h1>This is a title</h1><!--rehype:style=color:pink;-->
<details> <summary>Example Code</summary>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()
</details>
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
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!
<a href="https://github.com/jaywcjlove/rehype-attr/graphs/contributors"> <img src="https://jaywcjlove.github.io/rehype-attr/CONTRIBUTORS.svg" /> </a>Made with github-action-contributors.
License
MIT © Kenny Wong