This is a 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.
remark-sectionize, given the following markdown:
# Forest elephants## IntroductionIn this section, we discuss the lesser known forest elephants.## HabitatForest elephants do not live in trees but among them.
...remark will output the following HTML:
Forest elephantsIntroductionIn this section, we discuss the lesser known forest elephants.HabitatForest elephants do not live in trees but among them.
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:
To give the
h2-level sections alternating background colors.
If you are invoking
plugin by calling
const remark =const sectionize =const html =const input = `# Hello world!The above heading and this paragraph will be wrapped in a <section> tag.`
If you're using remark from the CLI, you can use sectionize via the
$ remark --use sectionize example.md
Note that for the above to work,
remark-sectionize needs to be installed
remark can find.
Finally, if you're using Webpack and
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):
const sectionize =moduleexports =module:rules:test: /\.$/use:loader: "babel-loader"options:presets: "@babel/preset-react"loader: "mdx-loader"options:mdPlugins: sectionize;
This repository is licensed under the MIT license; see the LICENSE file for details.