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 url 和 development url 两个链接。Production url 是带有 CDN 的，和 github 的同步会存在一定的延迟， developement url 的更新会及时一些，不过访问速度相对会没那么快。

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

分享
匿名评论