Edited at

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


こんな感じでお手軽にスライドを作ることができるので、

使ってみてはいかがでしょうか



おわり