# rehype-attr
> New syntax to add attributes to Markdown.
Latest version **4.1.3** (published 2026-03-16) · MIT license · 0 weekly downloads
## Install
```sh
npm install rehype-attr
pnpm add rehype-attr
yarn add rehype-attr
bun add rehype-attr
```
## Health
**Score 70/100 (B)** — status: stable.
Positive: has types; esm support; no vulnerabilities; has provenance; high maintenance score; high quality score.
Warnings: low downloads.
## Facts
| | |
|---|---|
| Version | 4.1.3 |
| Published | 2026-03-16 |
| First published | 2021-05-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM |
| Node | >=16 |
| Dependencies | 2 |
| Unpacked size | 38.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 34 |
| Author | Kenny Wong |
| Maintainers | wcjiang |
| Keywords | attributes, rehype, markdown, rehype-attr, javascript, html, ast, unified |
## Links
- npm: https://www.npmjs.com/package/rehype-attr
- Repository: https://github.com/jaywcjlove/rehype-attr
- Homepage: https://jaywcjlove.github.io/rehype-attr
- Issues: https://github.com/jaywcjlove/rehype-attr/issues
- Funding: https://jaywcjlove.github.io/#/sponsor
- npm.io page: https://npm.io/package/rehype-attr
## Dependencies (2)
- [unified](https://npm.io/package/unified.md) ~11.0.0
- [unist-util-visit](https://npm.io/package/unist-util-visit.md) ~5.1.0
## Alternatives
- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads
## Recent versions
- 4.1.3 (latest) — 2026-03-16
- 4.1.2 — 2026-03-16
- 4.1.1 — 2025-10-15
- 4.1.0 — 2025-10-14
- 4.0.2 — 2025-02-20
- 4.0.1 — 2025-01-03
- 4.0.0 — 2025-01-03
- 3.0.3 — 2023-11-26
- 3.0.2 — 2023-11-25
- 3.0.1 — 2023-09-28
- 3.0.0 — 2023-09-28
- 2.1.4 — 2022-12-29
- 2.1.3 — 2022-12-27
- 2.1.2 — 2022-10-23
- 2.1.1 — 2022-09-28
- … 31 more at https://npm.io/package/rehype-attr/versions
## README
rehype-attr
===
[](https://jaywcjlove.github.io/#/sponsor)
[](https://x.com/jaywcjlove)
[](https://www.npmjs.com/package/rehype-attr)
[](https://npmjs.org/package/rehype-attr)
[](https://github.com/jaywcjlove/rehype-attr/actions/workflows/ci.yml)
[](https://jaywcjlove.github.io/rehype-attr/lcov-report/)
[](https://github.com/jaywcjlove/rehype-attr/network/dependents)
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`](https://github.com/arobase-che/remark-attr).
## Installation
This package is [ESM only](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c): Node 12+ is needed to use it and it must be `import` instead of `require`.
```bash
npm install rehype-attr
```
## Default Syntax
### `Links`
#### `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](https://github.com)
```
> 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](https://github.com)`)
.toString()
```
### `Header`
#### `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 Example`
```markdown
This is a title
====
```
> Output:
> ```html
> This is a title
> ```
```markdown
# This is a title
```
> Output:
> ```html
> This is a title
> ```
### `Strong`
#### `HTML Example`
```html
This is a Unicorn
```
> Output:
> ```html
> This is a Unicorn
> ```
#### `Markdown Example`
```markdown
This is a **Unicorn**
```
> Output:
> ```html
> This is a Unicorn
> ```
### `Emphasis`
#### `HTML Example`
```html
Npm stand for node packet manager.
```
> Output:
> ```html
> Npm stand for node packet manager.
> ```
#### `Markdown Example`
```markdown
Npm stand for *node* packet manager.
```
> Output:
>
> ```html
> Npm stand for node packet manager.
> ```
### `Code`
```markdown
\```js
console.log('')
\```
```
> Output:
>
> ```html
>
>
> console.log('')
>
>
> ```
### `Inlne Code`
#### `HTML Example`
```html
This is the content
```
> Output:
> ```html
> This is the content
> ```
#### `Markdown Example`
```markdown
This is the `content`
```
> Output:
>
> ```html
> This is the content
> ```
### `List`
```markdown
- list
```
> Output:
>
> ```html
>
>
> ```
#### `HTML Example`
```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
```
#### `Markdown Example`
```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](https://github.com)`
const htmlStr = unified()
.use(remarkParse)
.use(remark2rehype, { allowDangerousHtml: true })
.use(rehypeRaw)
.use(rehypeAttrs, { properties: 'attr' })
.use(stringify)
.processSync(mrkStr)
.toString()
```
Output:
```html
github
```
## 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: ``
## Related
- [`rehype-video`](https://github.com/jaywcjlove/rehype-video) Add improved video syntax: links to `.mp4` and `.mov` turn into videos.
- [`rehype-rewrite`](https://github.com/jaywcjlove/rehype-rewrite) Rewrite element with rehype.
- [`rehype-ignore`](https://github.com/jaywcjlove/rehype-ignore) Ignore content display via HTML comments, Shown in GitHub readme, excluded in HTML.
- [`remark-github-blockquote-alert`](https://github.com/jaywcjlove/remark-github-blockquote-alert) Remark plugin to add support for [GitHub Alert](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts)
## Contributors
As always, thanks to our amazing contributors!
Made with [github-action-contributors](https://github.com/jaywcjlove/github-action-contributors).
## License
MIT © [Kenny Wong](https://github.com/jaywcjlove)
---
_Source: https://npm.io/package/rehype-attr · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
