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;
  }