Markdown制作幻灯片

写完博客之后,考虑的就是怎么做幻灯片了。

主要考虑的还是用Markdown语法写幻灯片,调查了很多,从remark.js到landslide,从impress.js到show.js,再到deck.js、Fathom.js、Jmpress.js等,五花八门,眼花缭乱,最后还是随机选了一个,reveal.js。

准备工作

  • reveal.js: Markdown渲染工具
  • gayhub: 上传
  • rawgit: 将Github中的html正常加载,并添加CDN

开始

Clone或者Fork官方Repo
1
git clone https://github.com/<you account id>/reveal.js

README中有很多配置编辑的方式可供参考, 现在有了一个可运行的reveal.js模板,运行根目录下的index.html即可预览

编辑默认index文档

打开index.html,找到slide的标签,<div class="slides">,即为幻灯片正文的开始,在此之下,添加几行代码,打开Markdown的编辑模式:

1
2
3
4
5
< section data-markdown data-separator="---" data-separator-vertical="--">
< script type="text/template">
### 你要写的正文内容
< /script>
< /section>

现在可以用Markdown编辑幻灯片内容了。

基本编辑方式:
  • --- 横向分页
  • -- 纵向分页,通常一列可以作为一个章节。
  • # 标题 - 列表
插入图片

使用基本的m arkdown插图大法就可以完成。考虑到有时候的网络环境,还是保存在本地再添加比较好。
![](upload/pic.jpg)这种格式即可。如果要调整排版和位置,则需要写html的语法。

插入视频

这里时候不早了,电脑上没有视频,也懒得插入,下次会自己做一个的,先借用前人的代码,省去从YouTube上下载。

1
<section data-background-video="your_video_name.webm">

对外访问

将编辑好的reveal.js项目提交到Github上:

1
2
3
git add .
git commit -m "add my slides"
git push origin master

这里本来并不想写git的命令,因为太基础了,不过送佛送西,就这样吧。
然后就可以从网页访问刚刚上传的repo了,我就做了个简单的Helloword。不过到现在位置,我们也仅仅是编辑了一下里面的html,幻灯片并没有被渲染,而是以源代码方式展示出来。这时候使用第三方工具将代码库中的html文件按照期望方式对外暴露使其访问。

  • 打开http://rawgit.com/,输入 https://github.com/<your github id>/cd-in-cloud-reveal-js/blob/master/index.html
  • 得到 production urldevelopment url 两个链接。Production url 是带有 CDN 的,和 github 的同步会存在一定的延迟, developement url 的更新会及时一些,不过访问速度相对会没那么快。

然后就是访问生成的HelloWorld,如下所示。

孤芳自赏,不必捧场。
分享