4.nodeppt书写
nodeppt只要是符合markdown语法即可，也支持HTML混编
4.2 总的配置
title: 这是title，网页名称
speaker: 演讲者名称
url:
transition: 全局转场动效
files: 引入的js和css文件，多个以半角逗号隔开
theme: 皮肤样式
highlightStyle: 代码高亮样式，默认monokai_sublime
usemathjax: yes 启用MathJax渲染公式
4.2 每一页间隔[slide]
nodeppt用[slide]来区分每一页PPT
[slide]
第一页
[slide]
第二页
[slide]
4.3 样式
基于GFM的markdown语法编写 {:&.rollIn}
需要改变样式的话后面直接加{:&.flexbox.vleft}(该样式为居左)
4.4 背景图片
完全style写法，更加灵活，视频背景、repeat背景更不在话下
[slide style=”background-image:url(‘/img/bg1.png’)”]
4.5 上下分界线
四个”-“是上下分界线
4.6 表格
| Less | Sass | Stylus | |
|---|---|---|---|
| 环境 | js/nodejs | Ruby(这列右对齐) | nodejs(高亮) {:.highlight} |
| 扩展名 | .less | .scss/.sass | .styl |
| 特点 | 老牌，用户多，支持js解析 | 功能全，有成型框架，发展快 | 语法多样，小众 |
| 案例/框架 | Bootstrap | Compass Bootstrap Foundation Bourbon Base.Sass |
1 | | Less | Sass | Stylus |
4.7 text文字样式
如图所示：
展示如图效果1
2
3
4
5
6
7
8
9
10<span class="text-danger">.text-danger</span> <span class="text-success">.text-success</span><span class="text-primary">.text-primary</span>
<span class="text-warning">.text-warning</span><span class="text-info">.text-info</span><span class="text-white">.text-white</span><span class="text-dark">.text-dark</span>
<span class="blue">.blue</span><span class="blue2">.blue2</span><span class="blue3">.blue3</span><span class="gray">.gray</span><span class="gray2">.gray2</span><span class="gray3">.gray3</span>
<span class="red">.red</span><span class="red2">.red2</span><span class="red3">.red3</span>
<span class="yellow">.yellow</span><span class="yellow2">.yellow2</span><span class="yellow3">.yellow3</span><span class="green">.green</span><span class="green2">.green2</span><span class="green3">.green3</span>
4.8 label
如图所示：
展示如图效果1
2
3
4
5<span class="label label-primary">.label.label-primary</span><span class="label label-warning">.label.label-warning</span><span class="label label-danger">.label.label-danger</span>
<span class="label label-default">.label.label-default</span><span class="label label-success">.label.label-success</span><span class="label label-info">.label.label-info</span>
<a href="#">link style</a> <mark>mark</mark>
4.9 blockquote
blockquote ：
如图所示：
1
2nodeppt可能是迄今为止最好用的web presentation <small>三水清</small>
这是一个class是：pull-right的blockquote <small>small一下</small> {:&.pull-right}
4.10 buttons
如图所示：
1
2
3
4
5
6<button class="btn btn-default">.btn .btn-default</button> <button class="btn btn-primary">.btn.btn-lg.btn-primary</button> <button class="btn btn-warning">.btn.btn-waring</button> <button class="btn btn-success">.btn.btn-success</button> <button class="btn btn-danger">.btn.btn-danger</button>
<button class="btn btn-lg btn-default">.btn.btn-lg.btn-default</button> <button class="btn btn-xs btn-success">.btn.btn-xs.btn-success</button> <button class="btn btn-sm btn-primary">.btn.btn-sm.btn-primary</button> <button class="btn btn-rounded btn-warning">.btn.btn-rounded.btn-waring</button> <button class="btn btn-danger" disabled="disabled">disabled.btn.btn-danger</button>
<button class="btn btn-success"><i class="fa fa-share mr5"></i></button>
4.11 icons
如图所示：
1
2
3
4
5
6
7
8
9
10
11<i class="fa fa-apple"></i>
<i class="fa fa-android"></i>
<i class="fa fa-github"></i>
<i class="fa fa-google"></i>
<i class="fa fa-linux"></i>
<i class="fa fa-css3"></i>
<i class="fa fa-html5"></i>
<i class="fa fa-usd"></i>
<i class="fa fa-pie-chart"></i>
<i class="fa fa-file-video-o"></i>
<i class="fa fa-cog"></i>
4.12 代码格式化
使用 highlightjs 进行语法高亮
如图所示：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26<div class="columns-2">
<pre><code class="javascript">(function(window, document){
var a = 1;
var test = function(){
var b = 1;
alert(b);
};
//泛数组转换为数组
function toArray(arrayLike) {
return [].slice.call(arrayLike);
}
}(window, document));
</code></pre>
<pre><code class="javascript">(function(window, document){
var a = 1;
var test = function(){
var b = 1;
alert(b);
};
//泛数组转换为数组
function toArray(arrayLike) {
return [].slice.call(arrayLike);
}
}(window, document));
</code></pre>
</div>
4.13 语法混编
使用 highlightjs 进行语法高亮
如图所示：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19<div class="file-setting">
<p>这是html</p>
</div>
<p id="css-demo">这是css样式</p>
<p>将html代码直接混编到**markdown**文件中即可</p>
我是js控制的颜色 black {:#testScriptTag}
<script>
function testScriptTag(){
document.getElementById('testScriptTag').style.color = 'black';
}
</script>
<style>
#css-demo{
color: red;
}
</style>
4.14 iframe
如图所示：
1
<iframe data-src="http://www.baidu.com" src="about:blank;"></iframe>
4.15 链接标签
链接到百度1
[链接到百度](https://www.baidu.com)
5.效果设置
5.1 多种皮肤
修改url可以改变皮肤
如图所示：
也可以通过代码点击实现1
2
3
4
5
6
7<div class="columns6">
<a href="?theme=color" >color</a>
<a href="?theme=blue">blue</a>
<a href="?theme=dark">dark</a>
<a href="?theme=green">green</a>
<a href="?theme=light">light</a>
</div>
5.1 单页面转场设置
[magic]中data-transition属性设置转场效果
[magic][/magic]中间用========隔开两个div1
2
3
4
5
6
7
8
9
10
11
12
13
14[magic data-transition="earthquake"]
<div class="columns3">
<img src="/girl.jpg" height="450">
<img src="/girl.jpg" height="450">
<img src="/girl.jpg" height="450">
</div>
========
<div class="columns4">
<img src="/girl.jpg" height="320">
<img src="/girl.jpg" height="320">
<img src="/girl.jpg" height="320">
<img src="/girl.jpg" height="320">
</div>
[/magic]
5.2 相同页面转场设置
- 列表支持渐显动效哦 {:&.动效类型}
- markdown列表第一条加上：{:&.动效类型}
- markdown列表第一条加上：
- markdown列表第一条加上：
- 动效类型
- fadeIn淡出淡入 {:&.动效类型}
- rollIn从后向前放大
- bounceIn弹出并震动
- moveIn
- zoomIn从后向前放大
5.3 全局设置
前面说过在PPT开头
transition: glue
5.4 页面之间设置
在每个页面可以设置自己的转场效果
[slide data-transition=”zoomin”]
5.5 转场url设置
在url后加上?transition=newspaper
如图所示
slide/slide2/slide3
newspaper
glue
kontext/vkontext
move/circle
horizontal/horizontal3d
vertical3d
zoomin/zoomout
cards
earthquake/pulse/stick
这些转场效果慢慢试吧
最后更新： 2018年11月10日 16:58
