rehype-attr
v4.1.1TypeScript
New syntax to add attributes to Markdown.
0/weekUpdated 3 months agoMITUnpacked: 38.8 KB
Published by Kenny Wong
npm install rehype-attr
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.
``bash`
npm install rehype-attr
Default Syntax
$3
#### HTML Example
`html`
github
> Output:
> `html`
> github
>
Example Code
`js
import { rehype } from 'rehype';
import rehypeAttrs from 'rehype-attr';
const htmlStr = rehype()
.data('settings', { fragment: true })
.use(rehypeAttrs, { properties: 'attr' })
.processSync(github)`
.toString()
#### Markdown Example
`markdown`
github
> Output:
> `html`
>
> github
>
>
>
Example Code
`js
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)`
.toString()
$3
#### HTML Example
`html`This is a title
> Output:
> `html`
> This is a title
>
Example Code
`js
import { rehype } from 'rehype';
import rehypeAttrs from 'rehype-attr';
const htmlStr = rehype()
.data('settings', { fragment: true })
.use(rehypeAttrs, { properties: 'attr' })
.processSync(
This is a title
)
.toString()
`####
markdown
This is a title
====
`> Output:
>
html
> This is a title
> `markdown
This is a title
`> Output:
>
html
> This is a title
> `$3
####
html
This is a Unicorn
`> Output:
>
html
> This is a Unicorn
> `####
markdown
This is a Unicorn
`> Output:
>
html
> This is a Unicorn
> `$3
####
html
Npm stand for node packet manager.
`> Output:
>
html
> Npm stand for node packet manager.
> `####
markdown
Npm stand for node packet manager.
`> Output:
>
>
html
> Npm stand for node packet manager.
> `$3
markdown
\`js
console.log('')
\`
> Output:
>
>
html
>
>
> console.log('')
>
>
> `$3
####
html
This is the content
`> Output:
>
html
> This is the content
> `####
markdown
This is the content
> Output:
>
>
html
> This is the content
> `$3
markdown
- list
`> Output:
>
>
html
>
> - list
>
>
> `####
js
import { rehype } from 'rehype';
import rehypeAttrs from 'rehype-attr';const htmlStr = rehype()
.data('settings', { fragment: true })
.use(rehypeAttrs, { properties: 'attr' })
.processSync(
github)
.toString()
`Output:
html
This is a title
`####
js
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
const htmlStr = unified()
.use(remarkParse)
.use(remark2rehype, { allowDangerousHtml: true })
.use(rehypeRaw)
.use(rehypeAttrs, { properties: 'attr' })
.use(stringify)
.processSync(mrkStr)
.toString()
Output:
html
`Options
$3
> Default Value:
> Value: data, string, attr$3
Code block passing parameters
> Default Value:
$3
Optional start 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 AlertContributors
As always, thanks to our amazing contributors!
Made with github-action-contributors.
License
MIT © Kenny Wong