Remark-sectionize-headings NPM

remark-sectionize-headings

remark plugin to wrap markdown headings and the following paragraphs in HTML section elements.

An alternative could be remark-sectionize, but this plugin offers a few more options and adds a CSS class according to the heading level to the resulting section.

Content

What is this?

This package is a remark plugin.

When should I use this?

If you want to style sections of your document according to heading levels and need to wrap markdown headings and the following paragraphs in HTML section elements.

Install

This package is ESM only. In Node.js (version 12.20+, 14.14+, or 16.0+), install with npm:

npm install remark-sectionize-headings

Use

const file = await unified()
  .use(remarkParse)
  .use(sectionize)
  .use(remarkRehype)
  .use(rehypeStringify)
  .process(markdown);

This uses the default options, where all headings are wrapped according to their level.

This markdown:

## Deprecated

- **remark-astro-auto-layout** - despite being the most successful plugin thus far, you should use the `remark-astro-frontmatter` plugin instead to define your common layout.

would yield this HTML:

<section class="h2">
  <h2 id="deprecated">Deprecated</h2>
  <ul>
    <li>
      <strong>remark-astro-auto-layout</strong> - despite being the most successful plugin thus far,
      you should use the <code>astro-m2dx</code> plugin instead to define your common layout.
    </li>
  </ul>
</section>