remark-simple-sections

This is a simple remark plugin that wraps every <h2> and all following content (until next <h2> or parent ends) in <section>.

How does it work?

• It goes through the whole Markdown document looking for <h2>. When the first encounter happens, it then wraps the found <h2> in <section> alongside with all following content until another <h2> is found, the document ends, or the parent element of this <h2> ends.

Why is this useful?

• This plugin might help you in styling your Markdown content because it creates blocks of content that all might serve different purpose and therefore require unique styling.
• Or maybe you just like it when the HTML has nicer structure.

Examples

Example 1

Lorem ipsum.

## Dolor sit amet
Hello sir

## Hello World
The world shines so brightly today.

## No content here

gets transformed into

<p>Lorem ipsum.</p>
<section>
  <h2>Dolor sit amet</h2>
  <p>Hello sir</p>
</section>
<section>
  <h2>Hello world</h2>
  <p>The world shines so brightly today.</p>
</section>
<section>
  <h2>No content here</h2>
</section>

Example 2

Bla gla.

## Bye, world.
Guuuuu

will be translated into

<p>Bla gla.</p>
<section>
  <h2>Bye, world.</h2>
  <p>Guuuuu</p>
</section>

Example 3

Diva

<div>
Hello sir

## Not again
nevermore

## vzum

</div>

Rum!

turns into

<p>Diva</p>
<div>
  <p>Hello sir</p>
  <section>
    <h2>Not again</h2>
    <p>nevermore</p>
  </section>
  <section>
    <h2>vzum</h2>
  </section>
</div>
<p>Rum!</p>

Suggestions

• Plugin remark-normalize-headings might be useful in combination with this plugin as it might create more <h2> headings that could be wrapped.

Possible improvements

• Add the option to select which level of heading should be wrapped (i.e. wrap e.g. <h4> headings instead of <h2>)
• Or the option to wrap all headings within each other.

License

MIT © Adrián Zámečník