REVEAL.JSでMarddownスライド資料を作成

reveal.jsを使ってMarkdown形式でスライド資料を作成する。
参照するドキュメント * hakimel / reveal.js の Get Started * Markdown

環境構築

  • OS macOS Big Sur (11.6)
  • node v16.13.0
  • npm 8.1.0

Full Setup

  • Install Node.js (10.0.0 or later)

  • Clone the reveal.js repository

$ cd ~/dev
$ git clone https://github.com/hakimel/reveal.js.git
Cloning into 'reveal.js'...
remote: Enumerating objects: 14829, done.
remote: Total 14829 (delta 0), reused 0 (delta 0), pack-reused 14829
Receiving objects: 100% (14829/14829), 16.79 MiB | 7.09 MiB/s, done.
Resolving deltas: 100% (8452/8452), done.
  • Move to the reveal.js folder and install dependencies
$ cd reveal.js && npm install
  • Serve the presentation and monitor source files for changes
$ npm start

  • Open http://localhost:8000 to view your presentation

  • Alternate method to view presentation
    ブラウザでで/path/to/reveal.js/index.htmlを直接開く方法でも行けることを確認済。

Change Port

Default port is 8000, you can change the port using the following methos

$ npm start -- --port=8001

外部Markdownファイルの読み込み

<div class="reveal">
    <div class="slides">
        <section data-markdown="md/slide.md"
            data-separator="^---$"
            data-separator-vertical="^>>>$">
        </section>
    </div>
</div>

注意：

外部Markdownファイルを読み込む時には、index.htmlファイルをブラウザから開くだけでは反映されない！ 必ずhttp://localhost:8000にて見ること。

PDF化

http://localhost:8000/?print-pdf#/ にアクセスすると、PDFとして出力される。
※ブラウザで直接index.htmlファイルを開いて、/path/to/reveal.js/index.html?print-pdf#/の方法でもPDF化できる。

参考資料（THX!）