This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

@mdxvac/remark-sectionize-headings

DEPRECATED: Please consider using the plugin astro-m2dx, which bundles all features from the @mdxvac plugins in one plugin (completely opt-in).

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.

Dust off your MDX
MDX Vacuum is a set of plugins allowing you to write clean markdown, while still using all the great features of MDX.
Use Astro 🚀 and these plugins to build your publishing pipeline for Markdown/MDX.

Have a look at the other @mdxvac plugins on NPM.

Content

• Content
• What is this?
• When should I use this?
• Install
• Use
  • Options
    • 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.

This is a pure remark plugin and can be used outside of an Astro context.

Install

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

npm install -D @mdxvac/remark-sectionize-headings

Use

In your astro.config.mjs

import { defineConfig } from 'astro/config';

import mdx from '@astrojs/mdx';
import sectionizeHeadings from '@mdxvac/remark-sectionize-headings';
//                              ^^^

// https://astro.build/config
export default defineConfig({
  integrations: [mdx()],
  markdown: {
    remarkPlugins: [sectionizeHeadings],
    //              ^^^
    extendDefaultPlugins: true,
  },
});

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>remark-astro-frontmatter</code> plugin instead to define your common
      layout.
    </li>
  </ul>
</section>

Options

levels: number[]

Heading levels to wrap into sections

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