reveal.js+Markdown

LT練習することになりMarkdownでアウトライン書き終えたところで力尽きたので、センターに「ばーんばーん」でいいからスライドにならないかなと思って探してみた。

reveal.js

HTMLベースのプレゼンテーションフレームワークgithub.com

Setup

フルセットアップ(おすすめ)する。

# クローンして
$ git clone git@github.com:hakimel/reveal.js.git

# nodejs環境を構築
$ npm install

# サーバ起動
$ grunt serve

# ローカルサーバが起動してついでにブラウザも立ち上がる

これでサンプルのスライドが表示されると思います。

基本的にはスペースキーでパンパン次のスライドに進めますが、Markdownで記述出来るようにしてついでに別ファイル化するために index.html を変更します。

index.html オリジナル

<div class="reveal">
  <div class="slides">
    <!-- ここにスライドスライドの内容が書かれている -->
  </div>
</div>

index.html 変更後

<div class="reveal">
  <div class="slides">
    <!-- 外部ファイル化するために書き換える -->
    <section data-markdown="md/index.md"
          data-separator="---$"
          data-separator-vertical=">>>$">
      <script type="text/template">
      </script>
    </section>
  </div>
</div>

md/index.md

# reveal.js 
***
試してみた

>>>
補足情報

---
*あった方が*<!-- .element: class="fragment" -->
*メリハリが出る*<!-- .element: class="fragment" -->
*こういう機能とか*<!-- .element: class="fragment" -->

---
**打ち消しとか**<!-- .element: class="strike fragment" -->

その他色々なオプション

実際のデモを触ってもらうのが一番わかりやすいと思います。
Markdownで箇条書きしたものを話の流れに合わせて演出変えた等するだけで十分な見栄えになりました。

個人的に特に気に入ってる機能

Sキーで開くSpeakerViewは元のウィンドウと同期して次のスライドや経過時刻が見れるのでLTなどで便利そうです。

おまけ

スライド時に音。

<audio data-autoplay src="sound.mp3"></audio>