一个section是一页幻灯片。
如果你将多个 <section>放到另一个<section>的内部，它们将会以垂直幻灯片的方式显示。第一个垂直幻灯片是其它的 “root（根）”
怎么理解呢？ 可以这样理解：横向的幻灯片代表一章，纵向的幻灯片代表一章中的一节。那么横向的幻灯片在播放时是左右切换的，而纵向的幻灯片是上下切换的。
For example:
其他具体内容请查询下节 参考 引用。
1、 reveal.js-一个专门用来做 HTML 演示文稿的框架
2、 HTML5幻灯片库reveal.js使用
3、 使用reveal.js制作一个酷炫的网页ppt
4、 Reveal.js：把你的 Markdown 文稿变成 PPT
新建一个文件夹dome,
在文件下新建一个文件夹img 放入5张名称为1,2,3,4,5 格式为“.jpg”的图片文件。
在新建一个dome.html 文件 内容如下：
<html>
<head>
<meta charset="UTF-8"/>
<title></title>
<style type="text/css">
*{margin: 0padding: 0}
#a1{
width: 600px
height: 500px
border: 10px silver solid
animation:backgroundImg 5s infinite
-webkit-animation:backgroundImg 5s infinite
}
@keyframes backgroundImg{
0%{background-color: #0000FF}
25%{background-color: #0099FF}
50%{background-color: #00FFFF}
75%{background-color: #99FFFF}
100%{background-color: #FFFFFF}
}
@-webkit-keyframes backgroundImg{
0%{background-color: #0000FF}
25%{background-color: #0099FF}
50%{background-color: #00FFFF}
75%{background-color: #99FFFF}
100%{background-color: #FFFF00}
}
#backImg{
width: 500px
height: 490px
/*border: 5px red solid*/
margin-left:45px
z-index: 100
background-size:100% 100%
}
a:hover{
background-color:#0000FF
border: 5px springgreen solid
width: 20px
}
a{
display: block
z-index:
width: 30px
height: 30px
text-align: center
line-height: 30px
color: beige
font-weight: 300
border-radius:50%
font-size: 2em
background-color:#0099FF
position: absolute
top: 255px
box-shadow: none
}
#right{
left:580px
}
span{
display: block
width: 50px
height: 10px
background-color: #99FFFF
float: right
margin-left: 20px
position: relative
bottom: 50px
right: 100px
}
#show{
width: 200px
height: 100px
border: 1px red solid
position: absolute
bottom: 230px
right: 150px
background-size:100% 100%
}
</style>
</head>
<body>
<div id="a1">
<a id="left"><</a>
<a id="right">></a>
<div id="backImg"></div>
<div id="foot"></div>
</div>
<script type="text/javascript">
var div=document.getElementById("a1")
var backImg=document.getElementById("backImg")
var a_left=document.getElementById("left")
var a_right=document.getElementById("right")
var i=0
function backImage(){
i++
backImg.style.backgroundImage="url(img/" +i+".jpg)"
setTimeout(backImage,7000)
if(i>=5){
i=0
}
}
backImage()
a_left.onclick=function(){
i--
if(i<=0||i>5){
i=5
}
backImg.style.backgroundImage="url(img/" +i+".jpg)"
}
a_right.onclick=function(){
i++
if(i<=0||i>5){
i=1
}
backImg.style.backgroundImage="url(img/" +i+".jpg)"
}
for (var j = 0j <3j++) {
var span=document.createElement("span")
span.id="span_"+j
div.appendChild(span)
span.onmouseover=function(){
show(event)
}
}
function show(e) {
backImg.style.opacity="0.5"
var span = e.target
var div = document.createElement("div")
div.id = "show"
span.parentNode.appendChild(div)
console.log(span.id)
if(span.id=="span_2"){
i-=1
console.log(i)
if(i<=0||i>5){
i=5
}
div.style.backgroundImage="url(img/" +i+".jpg)"
}else if(span.id=="span_1"){
div.style.backgroundImage="url(img/" +i+".jpg)"
}else if(span.id=="span_0"){
i+=1
if(i<=0||i>5){
i=1
}
div.style.backgroundImage="url(img/" +i+".jpg)"
}
span.onmouseout = function() {
backImg.style.opacity="initial"
this.parentNode.removeChild(div)
}
span.onclick=function(){
backImg.style.backgroundImage="url(img/" +i+".jpg)"
}
}
</script>
</body>
</html>
npm install -g i5ting_toc
i5ting_toc 命令默认readme.md
i5ting_toc -f sample.md -o
pandoc
pandoc -s -S --toc -c github2.css index.md -o index.html
生成幻灯片
转换输出PDF幻灯片格式的文件:（中文可能乱码）
pandoc -t beamer habits.md -o habits.pdf
幻灯结构：
slide level ： 页面组织结构中，紧接着文章内容的最高header等级
幻灯页划分规则：
幻灯片的结构化
slide level: 默认情况下，slide level由文章的组织结构中，以紧接着文章内容(而不是另一个标题)的最高的header等级决定。在上面的例子中，一级标题总是紧跟着二级标题，二级标题后会跟着实际内容，因此slide level是2。这由文章组织结构内容决定的slide level可由pandoc 的 –slide-level选项覆盖。
文章内容根据以下规则划分为不同的幻灯片页:
如果你不是很在意将幻灯片划分为多个sections和subsections的话，那么你可以在所有的幻灯片页中只使用一级标题(这样的话，slide level等于1)，当然你也可以像上述示例一样将其划分为不同的sections。
Note: 在reveal.js类型的幻灯片中，如果slide level等于2，那么产生的幻灯片会是一个二维的布局，一级标题会产生水平控制阅读的幻灯片，二级标题会产生垂直方向控制的幻灯片。另外，不建议使用reveal.js写slide level大于2的幻灯片内容。
增量式列表
默认情况下，pandoc转换输出的列表都是一次性显示出来。你可以在转换输出幻灯片时使用-i选项使列表一次只显示一个列表项。如果你想让某一个特定的列表显示与默认的不一样，也就是: 没有使用-i选项的时候使某一列表增量显示，或者，使用-i选项的时候使某一列表一次性显示出来，你可以将该特定列表放置于 block quote 中, 如下所示:
1 2 >- Eat spaghetti >- Drink wine
插入停顿
你可以在幻灯片页中添加停顿，该功能通过在幻灯片页中插入包含3个点的段落实现，且该三个点间以空格隔开，如下所示:
1 2 3 4 5 6 7 # Slide with a pause
content before the pause
. . .
content after the pause
定义幻灯片样式
你可以通过将自定义CSS文件放置于用户数据目录(DATADIR下来改变HTML的样式，对于S5而言，该目录是)DATADIR/s5/defaultSlidy: (DATADIR/slidySlideous:)DATADIR/slideous$DATADIR指的是数据目录，参考–data-dir选项说明。
对于reveal.js，幻灯片主题可通过设置theme变量指定，如下所示:
-V theme=moon
或者可以通过–css选项指定自定义的CSS样式表.
定义beamer幻灯片的样式时，可使用-V选项，指定其“theme”或者“colortheme”:
pandoc -t beamer habits.md -V theme:Warsaw -o habits.pdf
Note: pandoc在转换输出为HTML格式的幻灯片时,header的属性值会变为幻灯片页的属性(在
或者
标签中)，这样就可以通过css自定义单一的幻灯片页的样式了。如下:
转化****HTML slide shows****常用参数
eg:
