Skip to content

Latest commit

 

History

History
136 lines (83 loc) · 2.47 KB

index.md

File metadata and controls

136 lines (83 loc) · 2.47 KB
Raw

Reveal.jsとは？

HTML5で書けるプレゼンツール

Markdown もサポート

使い方

GitHubからclone して npm

$ git clone https://github.com/hakimel/reveal.js.git 
$ cd reveal.js
$ npm install
$ npm start

ブラウザで http://localhost:8000 を開くとスライドが表示される

できる事の詳細はコードについてくる demo が参考になる

書き方

コード一式を持ってきてindex.hml を好きなように編集する

<div class="reveal">
  <div class="slides">
    <section>Single Horizontal Slide</section>
      <section>Vertical Slide 1</section>
      <section>Vertical Slide 2</section>
    </section>
  </div>
</div>

※公式のREADMEより引用

Markdownの書き方

  • <textarea> を使う
  • *.md の外部ファイルを参照させる
<section data-markdown="example.md"
  data-separator="^¥\n\n\n"  
  data-separator-vertical="^\n\n"  
  data-separator-notes="^Note :"  
  data-charset="iso-8859-15">
</section>

※公式のREADMEより引用

例）Qiitaっぽく ---- でページを区切る場合

<section data-markdown="index.md"
  data-separator="^\n----\n$">
</section>

その他の表現方法

fragment表示

- Item 1 <!-- .element: class="fragment" data-fragment-index="1" -->
- Item 2 <!-- .element: class="fragment" data-fragment-index="2" -->
  • Item 1
  • Item 2

色を変える

<!-- .slide: data-background="#0000ff" -->

もっとこだわりたい場合はHTML5やCSSを使う

※詳細は公式のREADME参照

https://github.com/hakimel/reveal.js

おまけ

PDFにエクスポート

上記にアクセスしてブラウザの印刷機能でPDFに保存する（Chromeの場合）

※オプションで「背景のグラフィック」にチェックを入れる

END

サンプルコード：https://github.com/radiocat/reveal.js-sample

REFERENCES