agentofuser / rehype-section

Wraps headings and their contents in `<section>` elements.
https://npm.im/@agentofuser/rehype-section
7 stars 1 forks source link
rehype rehype-plugin typescript typescript-library unist

rehype-section

Downloads ![Chat][chat-badge]

Wraps headings and their contents in <section> elements.

Installation

npm:

npm install @agentofuser/rehype-section

Usage

Say we have the following file, fragment.html:

<h1>h1</h1>
  <h2>h2a</h2>
    <h3>h3ai</h3>
      <p>text3ai</p>
    <h3>h3aj</h3>
      <p>text3aj</p>
  <h2>h2b</h2>
    <h3>h3bi</h3>
      <h4>h4bix</h4>
        <p>text4bix</p>
  <h2>h2c</h2>
    <h3>h3ci</h3>
      <p>text3ci</p>

And our script, example.js, looks as follows:

var fs = require('fs')
var rehype = require('rehype')
var section = require('rehype-section')

rehype()
  .data('settings', { fragment: true })
  .use(section)
  .process(fs.readFileSync('fragment.html'), function(err, file) {
    if (err) throw err
    console.log(String(file))
  })

Now, running node example yields:

<section class="h0Wrapper headingWrapper">
  <section class="h1Wrapper headingWrapper">
    <h1>h1</h1>
    <section class="h2Wrapper headingWrapper">
      <h2>h2a</h2>
      <section class="h3Wrapper headingWrapper">
        <h3>h3ai</h3>
        <p>text3ai</p>
      </section>
      <section class="h3Wrapper headingWrapper">
        <h3>h3aj</h3>
        <p>text3aj</p>
      </section>
    </section>
    <section class="h2Wrapper headingWrapper">
      <h2>h2b</h2>
      <section class="h3Wrapper headingWrapper">
        <h3>h3bi</h3>
        <section class="h4Wrapper headingWrapper">
          <h4>h4bix</h4>
          <p>text4bix</p>
        </section>
      </section>
    </section>
    <section class="h2Wrapper headingWrapper">
      <h2>h2c</h2>
      <section class="h3Wrapper headingWrapper">
        <h3>h3ci</h3>
        <p>text3ci</p>
      </section>
    </section>
  </section>
</section>

API

rehype().use(section)

Wraps headings and their contents in <section> elements.

Contribute

See contributing.md in rehypejs/rehype for ways to get started.

This organisation has a Code of Conduct. By interacting with this repository, organisation, or community you agree to abide by its terms.

License

MIT © Agent of User

[chat-badge]: https://img.shields.io/badge/join%20the%20community-on%20spectrum-7b16ff.svg