最近很喜欢Markdown, 偶然发现了一篇用网页PPT做的命令教程,看起来好高大上的样子。
就是这样↓
地址在这像黑客一样使用 Linux 命令行
不过因为FGW的原因,google字体影响了很多地方,打开有点慢
这是用Remarkjs做的,Remarkjs是一个JavaScript库,用它可以使用Markdown格式来制作幻灯片。
目前,Remarkjs 提供了如下特性:
- 具有 Presenter 模式,可通过 p 键开启
- 使用左右或上下方向键进行翻页
- 支持语法加亮
- 能够对幻灯进行缩放
- 支持智能手机、平板等触屏设备
- 因为直接在浏览器中播放,所以可以跨平台
可是这个要求对CSS比较熟,看来我又要重拾CSS了,真是麻烦。
不过反正我就是喜欢没事找事的。
他的模板文件是用的google fonts,做出来难免加载慢,我略改了下
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
| <!DOCTYPE html> <html> <head> <title>Title</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <style type="text/css"> @import url(http://fonts.useso.com/css?family=Yanone+Kaffeesatz); @import url(http://fonts.useso.com/css?family=Droid+Serif:400,700,400italic); @import url(http://fonts.useso.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="http://gnab.github.io/remark/downloads/remark-latest.min.js" type="text/javascript">
</script> <script type="text/javascript"> var slideshow = remark.create(); </script> </body> </html>
|
在<textarea>
标签之间,添加Markdown内容就行,以---
分页
如果不喜欢原模版样式,可以自己设计CSS。