npmpackage.info

Gathering detailed insights and metrics for rehype-attr

Other packages similar to rehype-attr

esquery

1.6.0

A query library for ECMAScript AST using a CSS selector like query language.

rehype-external-links

3.0.0

rehype plugin to automatically add `target` and `rel` attributes to external links

remark-rehype

11.1.1

remark plugin that turns markdown into HTML to support rehype

rehype-slug

6.0.0

rehype plugin to add `id` attributes to headings

Gathering detailed insights and metrics for rehype-attr

rehype-attr

New syntax to add attributes to Markdown.

3.0.3

MIT

TypeScript

6,952,613 4.2

Installations

npm install rehype-attr

Pull Requests

Open

1

Total

53

Closed

14

Merged

38

Issues

Open

2

Total

3

Closed

1

Releases

v3.0.3

Published on 26 Nov 2023

v3.0.2

Published on 25 Nov 2023

v3.0.1

Published on 28 Sept 2023

v3.0.0

Published on 28 Sept 2023

v2.1.4

Published on 29 Dec 2022

v2.1.3

Published on 27 Dec 2022

View all 35 releases

Developer

jaywcjlove

Developer Guide

BETA

Module System

ESM

Min. Node Version

>=16

Typescript Support

No

Node Version

18.18.2

NPM Version

9.8.1 Statistics

31 Stars

196 Commits

1 Forks

3 Watching

3 Branches

2 Contributors

Updated on 31 Oct 2024

Languages

TypeScript (100%)

Total Downloads

Cumulative downloads

Total Downloads

6,952,613

Last day

21,300

Compared to previous day

Last week

4.9%

108,506

Compared to previous week

Last month

17.7%

440,055

Compared to previous month

Last year

93.6%

4,098,895

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

unified unist-util-visit

Dev Dependencies

rehype rehype-raw rehype-stringify remark-gfm remark-parse remark-rehype tsbb

Versions

rehype-attr

New syntax to add attributes to Markdown. rehype-attr like remark-attr

Installation

This package is ESM only: Node 12+ is needed to use it and it must be import instead of require.

1npm install rehype-attr

Default Syntax

`Links`

`HTML Example`

1<a href="https://github.com">github</a><!--rehype:rel=external&style=color:pink;&data-name=kenny-->

Output:

1<a href="https://github.com" rel="external" style="color:pink;" data-name="kenny">github</a>

Example Code

1import { rehype } from 'rehype';
2import rehypeAttrs from 'rehype-attr';
3
4const htmlStr = rehype()
5  .data('settings', { fragment: true })
6  .use(rehypeAttrs, { properties: 'attr' })
7  .processSync(`<a href="https://github.com">github</a><!--rehype:rel=external-->`)
8  .toString()

`Markdown Example`

1[github](https://github.com)<!--rehype:rel=external-->

Output:

1<p>
2  <a href="https://github.com" rel="external">github</a>
3  <!--rehype:rel=external-->
4</p>

Example Code

1import { unified } from 'unified';
2import stringify from 'rehype-stringify';
3import rehypeRaw from 'rehype-raw';
4import remark2rehype from 'remark-rehype';
5import remarkParse from 'remark-parse';
6import rehypeAttrs from 'rehype-attr';
7
8const htmlStr = unified()
9  .use(remarkParse)
10  .use(remark2rehype, { allowDangerousHtml: true })
11  .use(rehypeRaw)
12  .use(rehypeAttrs, { properties: 'attr' })
13  .use(stringify)
14  .processSync(`[github](https://github.com)<!--rehype:rel=external-->`)
15  .toString()

`Header`

`HTML Example`

1<h1>This is a title</h1><!--rehype:style=color:pink;-->

Output:

1<h1 style="color:pink;">This is a title</h1>

Example Code

1import { rehype } from 'rehype';
2import rehypeAttrs from 'rehype-attr';
3
4const htmlStr = rehype()
5  .data('settings', { fragment: true })
6  .use(rehypeAttrs, { properties: 'attr' })
7  .processSync(`<h1>This is a title</h1><!--rehype:style=color:pink;-->`)
8  .toString()

`Markdown Example`

1This is a title
2====
3<!--rehype:style=color:pink;-->

Output:

1<h1 style="color:pink;">This is a title</h1>

1# This is a title
2<!--rehype:style=color:pink;-->

Output:

1<h1 style="color:pink;">This is a title</h1>

`Strong`

`HTML Example`

1This is a <strong>Unicorn</strong><!--rehype:style=color: grey-->

Output:

1This is a <strong style="color: grey">Unicorn</strong>

`Markdown Example`

1This is a **Unicorn**<!--rehype:style=color: grey-->

Output:

1<p>This is a <strong style="color: grey">Unicorn</strong> <!--rehype:style=color: grey--></p>

`Emphasis`

`HTML Example`

1Npm stand for <em>node</em><!--rehype:style=color: red--> packet manager.

Output:

1Npm stand for <em style="color: red">node</em> packet manager.

`Markdown Example`

1Npm stand for *node* <!--rehype:style=color: red--> packet manager.

Output:

1<p>Npm stand for <em style="color: red">node</em><!--rehype:style=color: red--> packet manager.</p>

`Code`

1<!--rehype:title=Rehype Attrs&abc=1&hello=2-->
2\```js
3console.log('')
4\```

Output:

1<pre data-type="rehyp">
2  <code class="language-js" data-config="[object Object]">
3    console.log('')
4  </code>
5</pre>

`Inlne Code`

`HTML Example`

1This is the <code>content</code><!--rehype:style=color:pink;-->

Output:

1This is the <code style="color:pink;">content</code>

`Markdown Example`

1This is the `content`<!--rehype:style=color:pink;-->

Output:

1<p>This is the <code style="color:pink;">content</code><!--rehype:style=color:pink;--></p>

`List`

1- list
2<!--rehype:style=width:100px;-->

Output:

1<ul style="width:100px;">
2  <li>list</li>
3</ul>
4<!--rehype:style=width:100px;-->

`HTML Example`

1import { rehype } from 'rehype';
2import rehypeAttrs from 'rehype-attr';
3
4const htmlStr = rehype()
5  .data('settings', { fragment: true })
6  .use(rehypeAttrs, { properties: 'attr' })
7  .processSync(`<a href="https://github.com">github</a><!--rehype:rel=external-->`)
8  .toString()

Output:

1<h1 style="color:pink;">This is a title</h1>

`Markdown Example`

1import { unified } from 'unified';
2import stringify from 'rehype-stringify';
3import rehypeRaw from 'rehype-raw';
4import remarkParse from 'remark-parse';
5import remark2rehype from 'remark-rehype';
6import rehypeAttrs from 'rehype-attr';
7
8const mrkStr = `[github](https://github.com)<!--rehype:rel=external-->`
9const htmlStr = unified()
10  .use(remarkParse)
11  .use(remark2rehype, { allowDangerousHtml: true })
12  .use(rehypeRaw)
13  .use(rehypeAttrs, { properties: 'attr' })
14  .use(stringify)
15  .processSync(mrkStr)
16  .toString()

Output:

1<p>
2  <a href="https://github.com" rel="external">github</a>
3  <!--rehype:rel=external-->
4</p>

Options

`properties`

Default Value: data
Value: data, string, attr

`codeBlockParames`

Code block passing parameters

Default Value: true

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 Alert

Contributors

As always, thanks to our amazing contributors!

Made with github-action-contributors.

License

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

10

License

Determines if the project has defined a license.

10

Packaging

Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 0

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/jaywcjlove/rehype-attr/ci.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/jaywcjlove/rehype-attr/ci.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:47: update your workflow using https://app.stepsecurity.io/secureworkflow/jaywcjlove/rehype-attr/ci.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:53: update your workflow using https://app.stepsecurity.io/secureworkflow/jaywcjlove/rehype-attr/ci.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:59: update your workflow using https://app.stepsecurity.io/secureworkflow/jaywcjlove/rehype-attr/ci.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:62: update your workflow using https://app.stepsecurity.io/secureworkflow/jaywcjlove/rehype-attr/ci.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:69: update your workflow using https://app.stepsecurity.io/secureworkflow/jaywcjlove/rehype-attr/ci.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:77: update your workflow using https://app.stepsecurity.io/secureworkflow/jaywcjlove/rehype-attr/ci.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:84: update your workflow using https://app.stepsecurity.io/secureworkflow/jaywcjlove/rehype-attr/ci.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pull_request.yml:9: update your workflow using https://app.stepsecurity.io/secureworkflow/jaywcjlove/rehype-attr/pull_request.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pull_request.yml:10: update your workflow using https://app.stepsecurity.io/secureworkflow/jaywcjlove/rehype-attr/pull_request.yml/main?enable=pin
Warn: npmCommand not pinned by hash: .github/workflows/ci.yml:21
Warn: npmCommand not pinned by hash: .github/workflows/ci.yml:44
Warn: npmCommand not pinned by hash: .github/workflows/pull_request.yml:15
Info: 0 out of 4 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 7 third-party GitHubAction dependencies pinned
Info: 0 out of 3 npmCommand dependencies pinned

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

Score

4.2

/10

Last Scanned on 2024-11-18

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to rehype-attr

Other packages similar to rehype-attr

rehype-attr

Installations

Pull Requests

1

53

14

38

Issues

2

3

1

Releases

Developer

Developer Guide

ESM

>=16

No

18.18.2

9.8.1

Statistics

Languages

Total Downloads

6,952,613

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Dev Dependencies

rehype-attr

Installation

Default Syntax

Links

HTML Example

Markdown Example

Header

HTML Example

Markdown Example

Strong

HTML Example

Markdown Example

Emphasis

HTML Example

Markdown Example

Code

Inlne Code

HTML Example

Markdown Example

List

HTML Example

Markdown Example

Options

properties

codeBlockParames

Related

Contributors

License

10

10

10

10

10

0

0

0

0

0

0

0

0

4.2

/10

`Links`

`HTML Example`

`Markdown Example`

`Header`

`HTML Example`

`Markdown Example`

`Strong`

`HTML Example`

`Markdown Example`

`Emphasis`

`HTML Example`

`Markdown Example`

`Code`

`Inlne Code`

`HTML Example`

`Markdown Example`

`List`

`HTML Example`

`Markdown Example`

`properties`

`codeBlockParames`