More than 5 years have passed since last update.

reveal.js+Markdown

Last updated at 2013-06-19Posted at 2013-06-18

お手軽スライド作成

@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で書かれています。

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

おわり

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up