reveal.js 3.7.0でチャプターごとに見出しを用意する

はい

使うのはreveal.jsとgit。
reveal.jsのバージョンは3.7.0で、gitのバージョンは2.18.0。

やるぞ

とりあえず、reveal.jsのリポジトリからreveal.jsを持ってくる。

git clone https://github.com/hakimel/reveal.js

そしたら、クローンしてできたreveal.jsディレクトリの中にあるindex.htmlを開いて、スライドを作る。たとえばこんな感じ。ここで、data-chapter属性には各スライドで表示したいチャプター名を設定すること。

<div class="reveal">
    <div class="slides">
        <section data-chapter="スライドかも">Slide 1</section>
        <section>
            <section data-chapter="スライドかな？(疑問編)">Slide 2-1</section>
            <section data-chapter="スライドかな？(解決編)">Slide 2-2</section>
        </section>
        <section data-chapter="スライドになりたい" data-markdown>
            <textarea data-template>
                ## Slide 3

                suraido ni naritai.
            </textarea>
        </section>
    </div>
</div>

そしたら、下のソースコードを追記する。

class ChapterHeader {
    constructor() {
        ChapterHeader.initHeader();
        ChapterHeader.updateChapter();
        document.addEventListener("slidechanged", () => {
            ChapterHeader.updateChapter();
        }, false);
    }

    static initHeader() {
        const header = document.createElement("header"),
            h2 = document.createElement("h2");
        header.setAttribute("id", "chapter-header");
        h2.setAttribute("id", "chapter-heading");
        header.appendChild(h2);
        document.querySelector(".reveal").insertBefore(header, document.querySelector(".slides"));
    }

    static updateChapter() {
        const currentSlide = Reveal.getCurrentSlide();
        document.getElementById("chapter-heading").textContent = currentSlide.getAttribute("data-chapter");
    }
}

window.addEventListener("load", () => {
    new ChapterHeader();
}, false);

あとは、ブラウザからindex.htmlを開いてみれば、各スライドに設定したチャプター名がスライド上部に表示されるようになってる。もし実際に使うときは、適宜h2要素にスタイルを追加したりしてカスタマイズする。