Reveal.js + Markdownで簡単にプレゼン資料を用意する

プレゼン資料を用意するの毎回時間かかるし結構めんどくさいなー。って思ってたらReveal.jsなるものを見つけたので、早速使ってみました。 少し前に流行ってた?みたい。

導入

本家のgithubが丁寧に書かれているのでそれに従ってセットアップ。外部からMarkdownファイルを読み込めるようにしたいため、Node + Grantのフルセットアップを行います。

  1. Node.jsをインストール
  2. Gruntをインストール
  3. reveal.jsをクローンしてきて、インストール。
git clone https://github.com/hakimel/reveal.js.git
cd reveal.js
npm install
  1. grunt servehttp://localhost:8000にアクセスするとスライドが見れます

Markdownの埋め込み

bodydiv class="reveal"内で以下のように記述することで、md/test.mdを読み込んでくれます。

<body>
  <div class="reveal">
<!--ここから! -->
    <!-- Any section element inside of this container is displayed as a slide -->
    <div class="slides">
      <section data-markdown="md/test.md"
            data-separator="---$"
            data-separator-vertical=">>>$"
            data-transition="zoom">
        <script type="text/template">
        </script>
      </section>
    </div>
<!--ここまで! -->
  </div>

test.mdは以下

# これはReveal.jsのテストです

Hello, reveal.js!

---

## Reveal.js& Markdownで
## スライド作り
***

 * Markdownでスライドを作ります

 * index.htmlにファイル名を指定して埋め込みます

 * たのしい✌('ω'✌ )三✌('ω')✌三( ✌'ω')✌ 

>>>

## ここは補足ページなどになります

---

## 利点

* とにかくMarkdownがラク
  * Markdown大好きマンには嬉しい

* 動きがかっこいい

---

## あなたもRevealjs + Markdownでプレゼン作成のストレスを軽減しよう!

テーマの変更

メタタグのthemeを変更することでスライドのテーマを変更できます。

<link rel="stylesheet" href="css/theme/serif.css" id="theme">

各種設定

sectionタグのdata-transitionを変えることでスライドの遷移方法を変えることができます。

  <section data-markdown="md/test.md"
        data-separator="---$"
        data-separator-vertical=">>>$"
        data-transition="zoom">
  • data-separator ページ送りを正規表現で表します。上記例だと---改行でページ送りができます。

  • data-separator-vertical 縦方向のページ送りの正規表現を指定します。

  • data-transition ページ遷移のアクションを指定します。

デモ

ishinfukuoka.github.io

本家デモ

reveal.js – The HTML Presentation Framework