speaker notes in presentation mode

[ff6347]

As said in #13. It would be great to have speaker notes for presentations

[grahamc]

One thing I found (probably a dirty secret) is you can embed HTML in to your slides. For my presentation, I've used the aside tag, and can disable it for presenting, while keeping the source open locally.

Like this:

<!-- $theme: default -->
<style>
aside::before { 
    content: "Speaker notes:";
    font-weight: bold;
}
aside {
    width: 850px;
    border: 1px black solid;
    padding: 5px 5px 5px 5px;
    font-size: 12px;
    line-height: 15px;
    background-color: #EFEFEF;
    display: none;
    position: absolute;
    bottom: 15px;
}


</style>
---

# My Cool Slide

<aside>

 - foo
 - bar

</aside>

[will-hart]

I've found you can also do HTML style comments as a work around:

<!-- this is a "speaker note" -->

[metbril]

@will-hart You should add a reference to speaker notes through html comments in example.md.

[ebridges]

Currently Marp overloads HTML comments to use for Directives. I'd suggest to be in line with other tools (e.g. md2googleslides) that Marp stick with HTML comments only for speaker notes, and use YAML front matter for directives.

[vittorioromeo]

I've hacked in speaker note support in my fork (which also has presentation mode). PRs and improvements welcome. The notes are displayed in a separate window, so that the slides window can be fullscreen,

https://github.com/SuperV1234/marp

[yhatt]

In marp-team/marpit#82, we are considering the format of presenter notes for Marp Next.

We would use HTML comments based on the discussion, but it has overloading to directives like he says in #30 (comment). We are planning to recognize comment as the presenter note only if its text had failed parse as an object YAML for Marp (Marpit) directives.

# Directives

<!-- theme: gaia -->
<!-- class: invert -->

---

# Presenter notes

<!-- This is a presenter note for this page. -->
<!-- EXAMPLE: An EXAMPLE directive is not defined in Marp/Marpit, so this works as presenter notes. -->

---

# <!--fit--> Extra case on marp-core

`<!--fit-->` is not a presenter note. marp-core's comment for fitting header should also ignore.

In addition, we need to consider about whether implementing text formatting by inline markdown. At first release, we would support only plain text. But formatting like md2googleslides might be valuable.

[yhatt]

Marpit framework (The base framework for Marp Next tools) can parse HTML comments. So community-driven tools can use collected comments as presenter note.

marp-vue-slide is a practical example.

In addition, Marp Next's PPTX conversion is available the support of conversion speaker notes written in HTML comment.