Tbpgr Blog

Employee Experience Engineer tbpgr(てぃーびー) のブログ

Reveal.js | 使用手順

概要

Reveal.js の使用手順

手順

reveal.jsの取得
# reveal.js の GitHub リポジトリから tar.gz を取得
$ wget https://github.com/hakimel/reveal.js/archive/2.6.2.tar.gz
$ tar xvf 2.6.2.tar.gz
$ rm 2.6.2.tar.gz
$ mv reveal.js-2.6.2 sample_slide
index.htmlの編集

class名がslidesのdivタグの中にスライド内容を記述します。
記述はHTMLでも、Markdownでも可能。
今回はMarkdownで記述します。

編集前

<div class="reveal">
  <div class="slides">
    <!--この間を編集する-->
  </div>
</div>

編集後

				<section data-markdown>
					<script type="text/template">
## Reveal.js で楽々スライドショー作成
					</script>
				</section>
				<section data-markdown>
					<script type="text/template">
## Page1
* page1 1
* page1 2
					</script>
				</section>
				<section data-markdown>
					<script type="text/template">
## Page2
* page2 1
* page2 2
					</script>
				</section>
				<section data-markdown>
					<script type="text/template">
## Wrap Up
まとめ
					</script>
				</section>

完成スライドキャプチャ





補足

他のツールと連携していろいろと便利な使い方ができるようだけど、
ひとまずシンプルに Reveal.js 単体の手順だけにします。