RevealJS Markdown renderer

[sagikazarmark]

I've been using the RevealJS markdown plugin for a while, but I was wondering if it would be possible to render RevealJS code from a Markdown document using Goldmark.

The "syntax" is fairly simple (although it's probably quite different from how markdown works in general):

• There is a horizontal slide separator (eg. \r?\n---\r?\n or \r?\n\r?\n\r?\n: regex, so it works on Windows as well)
• There is a vertical slide separator (eg. \r?\n--\r?\n or \r?\n\r?\n: regex, so it works on Windows as well)
• Slide notes (eg. ^Note:)
• There are element attributes implemented as HTML comments

Here is a simple example:

# My slide title

---

## My first horizontal slide

---

## My second horizontal slide

--

## My first vertical slide under the second horizontal slide

---

## My third horizontal slide

Horizontal slides are rendered as <section> elements (ie. content within a horizontal slide is rendered as usual, except it's wrapped in a <section> element).

For example:

## My slide

- Item 1
- Item 2
- Item 3

becomes

<section>
    <h2>My slide</h2>

    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</section>

Vertical slides technically have a horizontal parent, meaning they are rendered under a top-level horizontal slide.
To do so, all slides (including the top parent) has to be wrapped in yet another <section> element.

For example:

## My slide

--

- Item 1
- Item 2
- Item 3

becomes

<section>
    <section>
        <h2>My slide</h2>
    </section>

    <section>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </section>
</section>

Notes are generated as an <aside class="notes"> element.

For example

## My slide

Note:
This will only display in the notes window.

becomes

<section>
    <h2>My slide</h2>

    <aside class="notes">
        This will only display in the notes window.
    </aside>
</section>

Lastly, element attributes are implemented as HTML comments:

For example:

<!-- .slide: data-background="#ff0000" -->

- Item 1 <!-- .element: class="fragment" data-fragment-index="2" -->
- Item 2 <!-- .element: class="fragment" data-fragment-index="1" -->

becomes

<section data-background="#ff0000">
    <ul>
        <li class="fragment" data-fragment-index="2">Item 1</li>
        <li class="fragment" data-fragment-index="1">Item 2</li>
    </ul>
</section>

I believe Markdown attributes would just work beautifully in this case.

Theoretically, any given block of markdown could be rendered as a RevealJS slide, but for the sake of simplicity let's say that when RevealJS rendering is enabled, the entire markdown document is rendered as a RevealJS slide deck. (Don't know if that makes any sense though)

I'm not familiar with any other Markdown->HTML rendering logic like this (and to tell the truth, I'm not really familiar with Markdown rendering in general).

Do any of the above make any sense? Is it possible to implement a renderer like this? Is it even a good idea?

I'd love to build this (if it's at all possible or if it makes any sense), but any pointers in the right direction would be greatly appreciated.

Thanks!

[sagikazarmark]

Did some more research and from what I can tell implementing this kind of delimiter/separator thing is incredibly hard if not entirely impossible.

A block type separation of slides would work much better.

I also found that some extensions implement attributes which could be a replacement for html comments.

So here is how the actual markup could look like:

---{.my-slide data-background=""}

## My slide

- Item 1

---

I'm not sure whether closing is necessary or the next occurence could signal the next slide.