https://github.com/jaywcjlove/rehype-attr

New syntax to add attributes to Markdown.
https://github.com/jaywcjlove/rehype-attr

ast html javascript markdown rehype rehype-plugin remark unified

Last synced: 3 months ago
JSON representation

New syntax to add attributes to Markdown.

• Host: GitHub
• URL: https://github.com/jaywcjlove/rehype-attr
• Owner: jaywcjlove
• License: mit
• Created: 2021-05-14T10:43:06.000Z (about 5 years ago)
• Default Branch: main
• Last Pushed: 2024-06-25T04:12:46.000Z (almost 2 years ago)
• Last Synced: 2024-10-29T22:02:31.919Z (over 1 year ago)
• Topics: ast, html, javascript, markdown, rehype, rehype-plugin, remark, unified
• Language: TypeScript
• Homepage: https://jaywcjlove.github.io/rehype-attr
• Size: 308 KB
• Stars: 32
• Watchers: 3
• Forks: 1
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

          


  Using my app is also a way to support me:

  


  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  





rehype-attr

===

[![Buy me a coffee](https://img.shields.io/badge/Buy_Me_a_Coffee-ffdd00?logo=buy-me-a-coffee&logoColor=black)](https://jaywcjlove.github.io/#/sponsor)

[![Follow On X](https://img.shields.io/badge/Follow%20on%20X-333333?logo=x&logoColor=white)](https://x.com/jaywcjlove)

[![Downloads](https://img.shields.io/npm/dm/rehype-attr.svg?style=flat)](https://www.npmjs.com/package/rehype-attr)

[![NPM version](https://img.shields.io/npm/v/rehype-attr.svg?style=flat)](https://npmjs.org/package/rehype-attr)

[![Build](https://github.com/jaywcjlove/rehype-attr/actions/workflows/ci.yml/badge.svg)](https://github.com/jaywcjlove/rehype-attr/actions/workflows/ci.yml)

[![Coverage Status](https://jaywcjlove.github.io/rehype-attr/badges.svg)](https://jaywcjlove.github.io/rehype-attr/lcov-report/)

[![Repo Dependents](https://badgen.net/github/dependents-repo/jaywcjlove/rehype-attr)](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

> 


>   
list

> 

> 

> ```


#### `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)