【メモ】 Markdown Preview Enhanced で作ったHTMLを即席でスライド化する

Markdown Preview Enhanced で HTML を出力したものを使って、
即席プレゼン資料を作りたいとき用。

まず、資料を作る段階で、ページ分けしたい場所を --- で区切る。

あああああああ
あああ
あああああああああああああああああ
ああああああああああああ

---

- [x] ああああああああああああああ
- [x] あああああああああああああああああああああ
- [x] ああああああああ
- [ ] ああああああああああああああああああああああああ

---

| AAAAAAAAAAAA                | AAAAAAAAAAAAA                |
| --------------------------- | ---------------------------- |
| AAAAAAAAAAAAAAAAAAA         | AAAAAAAAAAAAAAAAAAA          |
| AAAAAAAAAAAAAAAAAAAAAAAAAAA | AAAAAAAAAAAAAAAAAAAAAAAAAAAA |

つぎにブラウザで HTML を開き、 DevTools でコンソールを開く。
そして、次のコードを実行

let page = 0;
const list = [
  ...document.querySelectorAll(".markdown-preview > div > *"),
  0,
].reduce(
  ({ p, mem }, c) =>
    c.tagName === "HR" || !c
      ? ((c.hidden = true), { p: [...p, mem], mem: [] })
      : ((c.style.display = "none"), { p, mem: [...mem, c] }),
  { mem: [], p: [] }
).p;
const show = ({ key } = {}) => {
  if (key) {
    if (key === "ArrowLeft" && page !== 0) page--;
    if (key === "ArrowRight" && page !== list.length - 1) page++;
  }
  list.forEach((els, index) =>
    els.forEach((el) => (el.style.display = index === page ? "block" : "none"))
  );
};
show();
window.addEventListener("keydown", show, true);

これで矢印キーでページ遷移が可能な即席スライドが完成する。
ただ、スタイルが左寄りのままなので、かなり改良の余地あり。

ブックマークレット版

javascript:(()=>{let page=0;const list=[...document.querySelectorAll(".markdown-preview > div > *"),0].reduce(({p:p,mem:mem},c)=>"HR"!==c.tagName&&c?(c.style.display="none",{p:p,mem:[...mem,c]}):(c.hidden=!0,{p:[...p,mem],mem:[]}),{mem:[],p:[]}).p,show=({key:key}={})=>{key&&("ArrowLeft"===key&&0!==page&&page--,"ArrowRight"===key&&page!==list.length-1&&page++),list.forEach((els,index)=>els.forEach(el=>el.style.display=index===page?"block":"none"))};show(),window.addEventListener("keydown",show,!0);})()