Presentation Slides with Markdown(sli.dev)

    let a=[...document.getElementsByClassName("slide")]
      .map((a,b)=>[a,"slidenote"==(b=a.nextElementSibling)
      ?.className?b:a]),b=0,c=0,d=()=>a[b][c]
      .scrollIntoView(),e=new BroadcastChannel("s"),
      l=a.length-1;d();e.onmessage=({data:a})=>{c^=a.c,
      b=a.b,d()};document.addEventListener("keypress",
      ({key:f})=>{b+=(f=="j")-(f=="k");b=b<0?0:b>l?l:b;
      c^=f=="n";e.postMessage({c,b});d()});

    div.slide, div.slidenote {
        height: 100vh;
        width: 100vw;
        /* Other slide styling options below */
        ...
        ...
    }

    <div class="slide">
      Anything in here is one slide
    </div>
    <div class="slidenote">
      (optional) Anything in here is
      a note for the slide above
    </div>