remark.js使ってスライドを作る
remark.jsとは
マークダウンでスライドショーが作れるというツールのことです。
上記のリンク先を見ると、スタイリッシュなスライドを作れることが分かる。
早速使ってみるべく、githubへ。
https://github.com/gnab/remark
スマホ対応もしてます。
以下のコードをコピペして、ローカルに「sample.html」とか適当な名前で
保存して開いてみるとスライドが出来ています。
<!DOCTYPE html> <html> <head> <title>Title</title> <meta charset="utf-8"> <style> @import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz); @import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic); @import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic); body { font-family: 'Droid Serif'; } h1, h2, h3 { font-family: 'Yanone Kaffeesatz'; font-weight: normal; } .remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; } </style> </head> <body> <textarea id="source"> class: center, middle # Title --- # Agenda 1. Introduction 2. Deep-dive 3. ... --- # Introduction </textarea> <script src="https://gnab.github.io/remark/downloads/remark-latest.min.js"> </script> <script> var slideshow = remark.create(); </script> </body> </html>
「---」がページの区切りになるみたいですね。