reveal.jsで簡単スライド

会社ではwindowsなんですが、スライド作るのにパワポ使うのめんどくさいなーと思っていたら、テキストエディタだけでスライドを作れる「reveal.js」というものを見つけました。

https://github.com/hakimel/reveal.js/ こちらに上がっているのでダウンロードします。

あとはそのフォルダの中のindex.htmlを編集するだけ。

こんな感じでsectionで1スライドを作るイメージです。
htmlのタグはもちろん、data-markdownと書けばマークダウンで書くこともできます。

※section data-markdown=""となってますがsection data-markdownが正しいです。

Title
text text text



# Title
text text text

sectionを入れ子にすると、縦にスライドを設置することができます。

※section data-markdown=""となってますがsection data-markdownが正しいです。

 

 # title
 

 

 text text
 

 

 text text  
 text
 

あとは、マークダウンの書き方で書いていけばあっという間にスライド完成です。
よく使いそうなのを下に書いてみました。参考までに。

※section data-markdown=""となってますがsection data-markdownが正しいです。

# h1
## h2
### h3
p



# ul
- aaa
- bbb
- ccc



# ol
1. aaa
2. bbb
3. ccc



# table
|item01|item02|item03|
|:-|-:|:-:|
|ひだり|みぎ|まんなか|



# img
![画像](image/img.jpg)

PDFにして印刷したい場合（2018.07.10追記）

chromeでURLに ?print-pdf を追加する。
こんな感じ

index.html?print-pdf#/

そのURLの状態で、印刷ダイアログを表示
下記設定にして保存。

送信先 -> 変更 -> PDFに保存
余白 -> なし
オプション -> 背景のグラフィックにチェック

Adobe Acrobat で開く
Acrobat Reader ではなく、編集のできる Acrobat の方です。
いらないスライドが間に1枚ずつ入るので下記の作業で削除。

ツール -> ページを整理

画像とか使っていてPDFが重い場合は下記作業で軽くできる。

ファイル -> その他の形式で保存 -> サイズが縮小されたPDF