Hrule delimited sections for slides.

[DougInAMug]

Several markdown-to-slides frameworks interpret the markdown hrule --- as a delimiter for slides. Until now I was using the confusingly named remarkjs which wraps nodes between hrules in a div. It is possible to use CSS scroll snap to provide slide-like transitions without JS. I am looking for pointers on the easiest/best way to convert markdown to html with this adaption. For example, from:

# Welcome to my slide show
---
## Slide 1
---
## Slide 2

... to:

<section>
  <h1>Welcome to my slide show</h1>
</section>
<section>
  <h2>Slide 1</h2>
</section>
<section>
  <h2>Slide 2</h2>
<section>

[sueun-dev]

--- already parses as a thematicBreak, so remark-rehype hands you an <hr>; the only missing piece is grouping. No need to touch micromark or the parser. A small rehype plugin that walks the root children, splits on each hr, and wraps each group in a section gets your exact shape:

function rehypeSections() {
  return (tree) => {
    const groups = [[]]
    for (const n of tree.children) {
      if (n.type === 'element' && n.tagName === 'hr') groups.push([])
      else groups[groups.length - 1].push(n)
    }
    tree.children = groups
      .filter((g) => g.some((n) => n.type !== 'text' || n.value.trim()))
      .map((children) => ({type: 'element', tagName: 'section', properties: {}, children}))
  }
}

Ran it through unified().use(remarkParse).use(remarkRehype).use(rehypeSections).use(rehypeStringify) on your exact input and got three <section> blocks, no stray <hr>. Add CSS scroll-snap and there's no runtime JS.

One gotcha: a plain text line right above --- parses as a setext <h2>, not a break, so keep a blank line before separators (headings like your example are fine).

[DougInAMug]

Thank you for the swift reply! I need to get around to implementing it - holding off to marking as answer until I test myself.