# remark-attributes

> remark plugin to support attributes like markdown-it-attrs

Latest version **0.4.4** (published 2026-05-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install remark-attributes
pnpm add remark-attributes
yarn add remark-attributes
bun add remark-attributes
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.4.4 |
| Published | 2026-05-29 |
| First published | 2023-08-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 24.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 10 |
| Author | Manuel Meister |
| Maintainers | manuelmeister |
| Keywords | unified, remark, remark-plugin, plugin, mdast, markdown, generic, directive, attribute, attrs |

## Links

- npm: https://www.npmjs.com/package/remark-attributes
- Repository: https://github.com/manuelmeister/remark-attributes
- Issues: https://github.com/manuelmeister/remark-attributes/issues
- npm.io page: https://npm.io/package/remark-attributes

## Dependencies (5)

- [unified](https://npm.io/package/unified.md) ^11.0.5
- [md-attr-parser](https://npm.io/package/md-attr-parser.md) ^1.3.0
- [unist-util-visit](https://npm.io/package/unist-util-visit.md) ^5.1.0
- [micromark-util-symbol](https://npm.io/package/micromark-util-symbol.md) ^2.0.1
- [mdast-util-from-markdown](https://npm.io/package/mdast-util-from-markdown.md) ^2.0.3

## Alternatives

- [@mdxeditor/editor](https://npm.io/package/@mdxeditor/editor.md) — 962.4K weekly downloads
- [mmdb-lib](https://npm.io/package/mmdb-lib.md) — 680.9K weekly downloads
- [playcanvas](https://npm.io/package/playcanvas.md) — 36.2K weekly downloads
- [@glw907/cairn-cms](https://npm.io/package/@glw907/cairn-cms.md) — 967 weekly downloads
- [markdown-to-confluence](https://npm.io/package/markdown-to-confluence.md) — 103 weekly downloads

## Recent versions

- 0.4.4 (latest) — 2026-05-29
- 0.4.3 — 2026-05-29
- 0.4.2 — 2026-05-29
- 0.4.1 — 2026-05-29
- 0.4.0 — 2026-05-29
- 0.3.2 — 2024-11-19
- 0.3.1 — 2024-01-12
- 0.3.0 — 2024-01-12
- 0.2.6 — 2023-10-24
- 0.2.5 — 2023-08-19
- 0.2.4 — 2023-08-19
- 0.2.3 — 2023-08-19
- 0.2.2 — 2023-08-19
- 0.2.1 — 2023-08-19
- 0.2.0 — 2023-08-19
- … 2 more at https://npm.io/package/remark-attributes/versions

## README

# remark-attributes

[![Build][build-badge]][build]
[![Coverage][coverage-badge]][coverage]
[![Downloads][downloads-badge]][downloads]

[**remark**][remark] plugin to support the attributes syntax
(`paragraph{.font-ultrabold}`, `[linktext](/url){target=_blank}`, and
such).

> [!WARNING]
> This plugin is a work in progress.
> It may have bugs, breaking changes and is not fully compatible with markdown-it-attrs.
>
> If you want to help to stabilize this plugin, you are welcome to contribute.

## Contents

*   [What is this?](#what-is-this)
*   [Install](#install)
*   [Use](#use)
*   [API](#api)
    *   [`unified().use(remarkAttributes)`](#unifieduseremarkattributes)
*   [Syntax](#syntax)
*   [Syntax tree](#syntax-tree)
*   [Contribute](#contribute)
*   [License](#license)

## What is this?

This package is a [unified][] ([remark][]) plugin to add support for attributes.

**unified** is a project that transforms content with abstract syntax trees
(ASTs).
**remark** adds support for markdown to unified.
**mdast** is the markdown AST that remark uses.
**micromark** is the markdown parser we use.
This is a remark plugin that adds support for the directives syntax and AST to
remark.

This plugin also 'supports' attributes syntax inside mdx.
But beware to escape the curly braces with a backslash.

## Install

This package is [ESM only](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c).
In Node.js (version 12.20+, 14.14+, or 16.0+), install with [npm][]:

```sh
npm install remark-attributes
```

## Use

Say we have the following file, `example.md`:

```markdown
lorem ipsum [link](https://ecamp3.ch){target=_blank} color ludum dorem

- very good
- easy
- a bit compatible to markdown-it-attrs

{.custom-list}
```

And our module, `example.js`, looks as follows:

```js
import {read} from 'to-vfile'
import {unified} from 'unified'
import remarkParse from 'remark-parse'
import remarkAttributes from 'remark-attributes'
import remarkRehype from 'remark-rehype'
import rehypeFormat from 'rehype-format'
import rehypeStringify from 'rehype-stringify'
import {visit} from 'unist-util-visit'
import {h} from 'hastscript'

main()

async function main() {
  const file = await unified()
    .use(remarkParse)
    .use(remarkAttributes)
    .use(remarkRehype)
    .use(rehypeFormat)
    .use(rehypeStringify)
    .process(await read('example.md'))

  console.log(String(file))
}
```

Now, running `node example` yields:

```html
<p>lorem ipsum <a href="https://ecamp3.ch" target="_blank">link</a> color ludum dorem</p>
<ul class="custom-list">
  <li>very good</li>
  <li>easy</li>
  <li>a bit compatible to markdown-it-attrs</li>
</ul>
```

## Use in mdx

```mdx
const thisIsAMdxExpressionAndNotAnAttribute = true;

lorem ipsum [link](https://ecamp3.ch)\{target=_blank\} color ludum dorem

- very good {thisIsAMdxExpressionAndNotAnAttribute ? 'yes' : 'I tried at least'}
- easy
- a bit compatible to markdown-it-attrs

\{.custom-list\}
```

You need to set mdx to true to enable the escaped mode:
```js
remarkPlugins: [[remarkAttributes, {mdx: true}]]
```

Result:

```html
<p>lorem ipsum <a href="https://ecamp3.ch" target="_blank">link</a> color ludum dorem</p>
<ul class="custom-list">
  <li>very good yes</li>
  <li>easy</li>
  <li>a bit compatible to markdown-it-attrs</li>
</ul>
```
> **Note**
> Currently the result has a stray comment in front of the expression.


## API

This package exports no identifiers.
The default export is `remarkAttributes`.

### `unified().use(remarkAttributes)`

## Syntax

This plugin applies the syntax of <https://github.com/arobase-che/md-attr-parser>
used by the markdown-it-attrs plugin.

## Syntax tree

This plugin applies one mdast utility to build and serialize the AST.

## Contribute

See [`contributing.md`][contributing] in [`remarkjs/.github`][health] for ways
to get started.
See [`support.md`][support] for ways to get help.

This project has a [code of conduct][coc].
By interacting with this repository, organization, or community you agree to
abide by its terms.

## License

[MIT][license] © [Manuel Meister][author2] & [Titus Wormer][author]

<!-- Definitions -->

[build-badge]: https://github.com/manuelmeister/remark-attributes/workflows/main/badge.svg

[build]: https://github.com/manuelmeister/remark-attributes/actions

[coverage-badge]: https://img.shields.io/codecov/c/github/manuelmeister/remark-attributes.svg

[coverage]: https://codecov.io/github/manuelmeister/remark-attributes

[downloads-badge]: https://img.shields.io/npm/dm/remark-attributes.svg

[downloads]: https://www.npmjs.com/package/remark-attributes

[npm]: https://docs.npmjs.com/cli/install

[health]: https://github.com/remarkjs/.github

[contributing]: https://github.com/remarkjs/.github/blob/HEAD/contributing.md

[support]: https://github.com/remarkjs/.github/blob/HEAD/support.md

[coc]: https://github.com/remarkjs/.github/blob/HEAD/code-of-conduct.md

[license]: license

[author]: https://wooorm.com

[author2]: https://meister.id

[unified]: https://github.com/unifiedjs/unified

[remark]: https://github.com/remarkjs/remark

[create-plugin]: https://unifiedjs.com/learn/guide/create-a-plugin/

---
_Source: https://npm.io/package/remark-attributes · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._