reveal.js+Markdown #JavaScript

お手軽スライド作成

@siguremon
/twitter
/github
/Qiita

reveal.jsって

HTMLで書けるプレゼンツールです

reveal.js - The HTML Presentation Framework

特徴

スライドが横だけでなく、縦にも配置できる
Overviewがみれて、プレゼンの途中で行ったり来たりできる(Escキー)
コードスニペットが書ける上にsyntax highlightもしてくれる
Pdfにも出力できる

reveal.jsの簡単な使い方

このページが詳しいので以下略

(reveal.jsで作ったスライドによる説明)

reveal.jsを使ってみた

スライドを作る

でもhtmlをせっせと書くのはめんどくさい…

hamlとかmarkdownで書けるといいなー

同じようなことを考えた先人たちがいました

でも実は公式の機能そのままでできます！

markdownでスライドを作る

通常は以下のようにhtmlタグで書きます

<div class="slides">
    <section>
        <h2>スライドタイトル</h2>
        <p>
        本文　本文　本文　本文　本文
        本文　本文　本文　本文　本文
        本文　本文　本文　本文　本文
        </p>
    </section>
    <section>
        <h2>スライドタイトル</h2>
        <p>
        ...
        </p>
    </section>
</div>

こんな感じでページの内容をmarkdownで書けます

ただし、markdownの中に</script>があるとだめなようです(markdown.jsの制約？)

<div class="slides">
    <section date-markdown>
        <script type="text/template">
        ## スライドタイトル

        本文　本文　本文　本文　本文
        本文　本文　本文　本文　本文
        本文　本文　本文　本文　本文

        <//script><!-- そのままだと書けないので/を余計に書いています -->
    </section>  
</div>

さらに、以下のようにページ区切りの文字列を指定すると

複数ページをmarkdownで書けます

<div class="slides">
  <section data-markdown 
           data-separator="\n---\n$"
           data-vertical="\n--\n">
    <script type="text/template">
        ## スライドタイトル

        本文　本文　本文　本文　本文

        ---

        ## 2ページめ

        本文　本文　本文　本文　本文
    <//script><!-- そのままだと書けないので/を余計に書いています -->
  </section>
</div>

さらにさらに、data-markdownにファイル名を指定することで、
スライドの中身を別ファイルに切り出すことができます

<div class="slides">
  <section data-markdown="revealjs.md"
           data-separator="\n---\n$"
           data-vertical="\n--\n">
  </section>
</div>

ちなみに、このスライド（ページ）もmarkdownで書かれています。

こんな感じでお手軽にスライドを作ることができるので、
使ってみてはいかがでしょうか

reveal.js+Markdown

お手軽スライド作成

reveal.jsって

特徴

reveal.jsの簡単な使い方

スライドを作る

markdownでスライドを作る

おわり