Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork3
New syntax to add attributes to Markdown.
License
jaywcjlove/rehype-attr
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
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.
This package isESM only: Node 12+ is needed to use it and it must beimport instead ofrequire.
npm install rehype-attr
<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>
Example Code
import{rehype}from'rehype';importrehypeAttrsfrom'rehype-attr';consthtmlStr=rehype().data('settings',{fragment:true}).use(rehypeAttrs,{properties:'attr'}).processSync(`<a href="https://github.com">github</a><!--rehype:rel=external-->`).toString()
[github](https://github.com)<!--rehype:rel=external-->
Output:
<p><ahref="https://github.com"rel="external">github</a><!--rehype:rel=external--></p>
Example Code
import{unified}from'unified';importstringifyfrom'rehype-stringify';importrehypeRawfrom'rehype-raw';importremark2rehypefrom'remark-rehype';importremarkParsefrom'remark-parse';importrehypeAttrsfrom'rehype-attr';consthtmlStr=unified().use(remarkParse).use(remark2rehype,{allowDangerousHtml:true}).use(rehypeRaw).use(rehypeAttrs,{properties:'attr'}).use(stringify).processSync(`[github](https://github.com)<!--rehype:rel=external-->`).toString()
<h1>This is a title</h1><!--rehype:style=color:pink;-->
Output:
<h1style="color:pink;">This is a title</h1>
Example Code
import{rehype}from'rehype';importrehypeAttrsfrom'rehype-attr';consthtmlStr=rehype().data('settings',{fragment:true}).use(rehypeAttrs,{properties:'attr'}).processSync(`<h1>This is a title</h1><!--rehype:style=color:pink;-->`).toString()
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>
This is a<strong>Unicorn</strong><!--rehype:style=color: grey-->
Output:
This is a<strongstyle="color: grey">Unicorn</strong>
This is a**Unicorn**<!--rehype:style=color: grey-->
Output:
<p>This is a<strongstyle="color: grey">Unicorn</strong><!--rehype:style=color: grey--></p>
Npm stand for<em>node</em><!--rehype:style=color: red--> packet manager.
Output:
Npm stand for<emstyle="color: red">node</em> packet manager.
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>
<!--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>
This is the<code>content</code><!--rehype:style=color:pink;-->
Output:
This is the<codestyle="color:pink;">content</code>
This is the`content`<!--rehype:style=color:pink;-->
Output:
<p>This is the<codestyle="color:pink;">content</code><!--rehype:style=color:pink;--></p>
- list<!--rehype:style=width:100px;-->
Output:
<ulstyle="width:100px;"><li>list</li></ul><!--rehype:style=width:100px;-->
import{rehype}from'rehype';importrehypeAttrsfrom'rehype-attr';consthtmlStr=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>
import{unified}from'unified';importstringifyfrom'rehype-stringify';importrehypeRawfrom'rehype-raw';importremarkParsefrom'remark-parse';importremark2rehypefrom'remark-rehype';importrehypeAttrsfrom'rehype-attr';constmrkStr=`[github](https://github.com)<!--rehype:rel=external-->`consthtmlStr=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>
Default Value:
data
Value:data,string,attr
Code block passing parameters
Default Value:
true
Optional start delimiter for comments @example\\{\\*
Default Value:
<!--
Optional end delimiter for comments @example\\*\\}
Default Value:
-->
rehype-videoAdd improved video syntax: links to.mp4and.movturn into videos.rehype-rewriteRewrite element with rehype.rehype-ignoreIgnore content display via HTML comments, Shown in GitHub readme, excluded in HTML.remark-github-blockquote-alertRemark plugin to add support forGitHub Alert
As always, thanks to our amazing contributors!
Made withgithub-action-contributors.
MIT ©Kenny Wong
About
New syntax to add attributes to Markdown.
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Sponsor this project
Uh oh!
There was an error while loading.Please reload this page.
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors4
Uh oh!
There was an error while loading.Please reload this page.