lanbos'blog

用markdown快速生成类PPT的html

快速生成

开发者讲ppt的场景不少,但是身为前端开发工程师,拖拖拽拽生成ppt一点都不Geek,最近发现了一款能快速用md生成类PPT的html的库,好用到爆炸:remark

官方事例简介明了:

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!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
.green[
自带语法赋class
]
</textarea>
<script src="https://cdn.bootcss.com/remark/0.14.0/remark.min.js">
</script>
<!-- 换成国内的cdn加载速度更快 -->
<script>
var slideshow = remark.create({
ratio: '16:9',
click: true,
highlightLanguage: 'javascript',
highlightStyle: 'solarized-light',
});
</script>
</body>
</html>

只需在textarea标签里写md就可以了,如果对样式不满足,直接写css,对h1,h2,ul,li等常用标签附样式即可。非常适合快速简单展示内容的场景。

炫酷生成

当然remark虽然很强大使用很便捷,但是当你需要给客户或者在其他较为正式的场合演示的时候,你需要的是炫酷的动画,和抓眼球的交互。这时候你需要的是Reveal.js,至于Reveal.js的使用方法网上教程很多,个人感觉使用起来不如remark 简单,也不够geek。当然通过web方式生成幻灯的库有很多,可详细看几个秒杀PPT的高(zhe)大(teng)上(ren)的幻灯工具