# remark-sectionize

> Wrap content below each heading in a element

Latest version **2.1.0** (published 2024-11-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install remark-sectionize
pnpm add remark-sectionize
yarn add remark-sectionize
bun add remark-sectionize
```

## Health

**Score 50/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 2.1.0 |
| Published | 2024-11-18 |
| First published | 2019-02-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 11.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 73 |
| Author | Jake Low |
| Maintainers | jake-low |
| Keywords | remark, plugin, markdown, html, section |

## Links

- npm: https://www.npmjs.com/package/remark-sectionize
- Repository: https://github.com/jake-low/remark-sectionize
- Homepage: https://github.com/jake-low/remark-sectionize#readme
- Issues: https://github.com/jake-low/remark-sectionize/issues
- npm.io page: https://npm.io/package/remark-sectionize

## Dependencies (2)

- [unist-util-visit](https://npm.io/package/unist-util-visit.md) ^4.1.2
- [unist-util-find-after](https://npm.io/package/unist-util-find-after.md) ^4.0.1

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 2.1.0 (latest) — 2024-11-18
- 2.0.0 — 2023-04-18
- 1.1.1 — 2020-02-14
- 1.1.0 — 2019-08-28
- 1.0.1 — 2019-02-02
- 1.0.0 — 2019-02-02

## README

# remark-sectionize

This is a [remark](https://github.com/remarkjs/remark) plugin to wrap each
heading and the content that follows it in a `<section>` tag, allowing you to
style the document sections using CSS.

## Example

When using `remark-sectionize`, given the following markdown:

```md
# Forest elephants

## Introduction

In this section, we discuss the lesser known forest elephants.

## Habitat

Forest elephants do not live in trees but among them.
```

...remark will output the following HTML:

```html
<section>
  <h1>Forest elephants</h1>
  <section>
    <h2>Introduction</h2>
    <p>In this section, we discuss the lesser known forest elephants.</p>
  </section>
  <section>
    <h2>Habitat</h2>
    <p>Forest elephants do not live in trees but among them.</p>
  </section>
</section>
```

One use case of this plugin is to permit the logical sections of a document to
be targeted and styled using CSS. For example, you could do something like
this:

```css
section > section:nth-child(even) {
  background-color: white;
}

section > section:nth-child(odd) {
  background-color: papayawhip;
}
```

To give the `h2`-level sections alternating background colors.

## Usage

If you are invoking `remark` (or `unified`) in JavaScript, you can add this
plugin by calling `use()`:

```js
import { remark } from 'remark'
import html from 'remark-html'
import sectionize from 'remark-sectionize'

const input = `
# Hello world!

The above heading and this paragraph will be wrapped in a <section> tag.
`

remark()
  .use(sectionize)
  .use(html, { sanitize: false })
  .process(input, (err, file) => {
    if (err) {
      console.error(err)
    } else {
      console.log(String(file))
    }
  })
```

If you're using remark from the CLI, you can use sectionize via the `--use`
argument:

```
$ remark --use sectionize example.md
```

Note that for the above to work, `remark-sectionize` needs to be installed
somewhere that `remark` can find.

Finally, if you're using Webpack and
[mdx-loader](https://www.npmjs.com/package/mdx-loader) to import markdown files
from JS, you can modify the loader options in your webpack config file, adding
`sectionize` to your `mdPlugins` list (something like the following):

```js
import sectionize from 'remark-sectionize'

module.exports = {
  module: {
    rules: [
      {
        test: /\.(md|mdx|markdown)$/,
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: ["@babel/preset-react"]
            }
          },
          {
            loader: "mdx-loader",
            options: {
              mdPlugins: [sectionize]
            }
          }
        ]
      }
    ]
  }
};
```

## License

This repository is licensed under the MIT license; see the LICENSE file for details.

---
_Source: https://npm.io/package/remark-sectionize · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._