Ninja Power Manifesto

    rehype-attr
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.8 • Public • Published

    rehype-attr

    Downloads NPM version Build Coverage Status npm bundle size

    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.

    npm install rehype-attr

    Default Syntax

    Links

    HTML Example

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

    Output:

    <a href="https://github.com" rel="external" style="color:pink;" data-name="kenny">github</a>
    Example Code
    import { rehype } from 'rehype';
    import rehypeAttrs from 'rehype-attr';
    
    const htmlStr = rehype()
      .data('settings', { fragment: true })
      .use(rehypeAttrs, { properties: 'attr' })
      .processSync(`<a href="https://github.com">github</a><!--rehype:rel=external-->`)
      .toString()

    Markdown Example

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

    Output:

    <p>
      <a href="https://github.com" rel="external">github</a>
      <!--rehype:rel=external-->
    </p>
    Example Code
    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)<!--rehype:rel=external-->`)
      .toString()

    Header

    HTML Example

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

    Output:

    <h1 style="color:pink;">This is a title</h1>
    Example Code
    import { rehype } from 'rehype';
    import rehypeAttrs from 'rehype-attr';
    
    const htmlStr = rehype()
      .data('settings', { fragment: true })
      .use(rehypeAttrs, { properties: 'attr' })
      .processSync(`<h1>This is a title</h1><!--rehype:style=color:pink;-->`)
      .toString()

    Markdown Example

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

    Output:

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

    Output:

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

    Strong

    HTML Example

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

    Output:

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

    Markdown Example

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

    Output:

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

    Emphasis

    HTML Example

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

    Output:

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

    Markdown Example

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

    Output:

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

    Code

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

    Output:

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

    Inlne Code

    HTML Example

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

    Output:

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

    Markdown Example

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

    Output:

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

    List

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

    Output:

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

    HTML Example

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

    Output:

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

    Markdown Example

    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)<!--rehype:rel=external-->`
    const htmlStr = unified()
      .use(remarkParse)
      .use(remark2rehype, { allowDangerousHtml: true })
      .use(rehypeRaw)
      .use(rehypeAttrs, { properties: 'attr' })
      .use(stringify)
      .processSync(mrkStr)
      .toString()

    Output:

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

    Options

    properties

    Default Value: data
    Value: data, string, attr

    Related

    License

    MIT © Kenny Wong

    Install

    npm i rehype-attr

    DownloadsWeekly Downloads

    17,998

    Version

    2.0.8

    License

    MIT

    Unpacked Size

    26.4 kB

    Total Files

    11

    Last publish

    Collaborators

    • wcjiang