This package has been deprecated

Author message:

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

@astro-m2dx/remark-sectionize-headings

Astro M²DX - Remark plugin to wrap headings in sections

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

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

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.

Astro M²DX is a set of plugins allowing you to define an Astro 🚀 publishing pipeline for Markdown/MDX documents with full MDX features, but without the technical fuss, i.e. you and your non-tech editors can write clean markdown.

Have a look at the other astro-m2dx plugins.

Content

• What is this?
• When should I use this?
• Install
• Use
  • Options

What is this?

This package is a remark plugin to wrap markdown headings and the following paragraphs in HTML sections. It does not make any assumptions on the use of Astro.

When should I use this?

If you want to style sections of your document according to heading levels.

This is a pure remark plugin and can be used easily 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 @astro-m2dx/remark-sectionize-headings

Use

In your astro.config.mjs

import { defineConfig } from 'astro/config';

import mdx from '@astrojs/mdx';
import sectionizeHeadings from '@astro-m2dx/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.

Options

If you want to wrap only headings on particular levels, you can pass the levels option (number[]) like so:

remarkPlugins: [[sectionizeHeadings, {levels: [2]}]],

which would wrap only heading level 2.