Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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: about 2 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 (almost 4 years ago)
Default Branch: main
Last Pushed: 2024-06-25T04:12:46.000Z (8 months ago)
Last Synced: 2024-10-29T22:02:31.919Z (4 months 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

        rehype-attr

===

[![Buy me a coffee](https://img.shields.io/badge/Buy%20me%20a%20coffee-048754?logo=buymeacoffee)](https://jaywcjlove.github.io/#/sponsor) 

[![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)

New syntax to add attributes to Markdown. `rehype-attr` like [`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`  

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