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

• Content
• What is this?
• When should I use this?
• Install
• Use
  • Options
    • addClass?: boolean | string
    • levels: number[]

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>

Options

addClass?: boolean | string

This option adds a class corresponding to the heading to the injected section.

• string <name>, e.g. section to add classes section section--h1, ...
• false to disable class addition completely
• default: true, adds classes h1, h2, ...

levels: number[]

Heading levels to wrap into sections

• e.g. [ 2, 3 ] for only levels 2 & 3
• default: all