Plugin to indent Markdown header section
MDX - remark-sectionize
remark-sectionize is a remark plugin to wrap each heading and the content that follows it in a section tag. It allows you to indent each section.
- https://github.com/jake-low/remark-sectionize
- Issue: H1 > H2 > H1: H1(last) still be indented by the first H1.
Install
-
Install package.
npm install remark-sectionize
-
Modify
next.config.mjs
// next.config.mjs import remarkSectionize from 'remark-sectionize'; const withMDX = require('@next/mdx')({ extension: /\.mdx?$/, options: { // ... remarkPlugins: [remarkSectionize], // ... }, })
-
Indent header section using CSS style.
-
e.g. import remark-sectionize.css from _
/* remark-sectionize.css */ /****************************** remark-sectionize ******************************/ /* Indent each <section> */ section > section { padding-left: 1em; } div#__next > section > h1 { color: orange; } /* Zebra-striped each <section>: https://stackoverflow.com/a/57491039 */ div#__next > section:nth-of-type(odd) { background-color: #f2f2f2; }