Help us understand the problem. What is going on with this article?

reveal.js+Markdown

More than 5 years have passed since last update.

お手軽スライド作成

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


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


おわり

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away