Markdown+Reveal.js+Github——用Markdown制作演示文稿并发布到网页

今天搞一个特别酷炫的东西。

将Markdown文件转换为演示文稿（可以理解为PPT），再发布到网页上。

而且全程只在命令行和vs code中操作。

用Markdown转成Reveal.js可以用简单的代码（看到代码这两个字，不要打退堂鼓，试过一次之后就能体会到有多方便）创造出美观的演示文稿。

虽然市面上XMIND等一些软件，可以直接将思维导图直接转换成PPT，还有我极力推荐ProcessOn这个网站还能在线编辑生成的PPT，但都是要花钱的，不是免费的。

这个方法呢，是免费的，而且最关键的是，逼格很高！！！！！！😎
这个方法呢，是免费的，而且最关键的是，逼格很高！！！！！！😎
这个方法呢，是免费的，而且最关键的是，逼格很高！！！！！！😎

重要的事情说三遍，还加粗😝

想象一下，若你在下面听别人的演讲，可以边听边用markdown文档记录你的想法，当别人演讲结束时，一键转换生成演示文稿，并且最重要的是还制作成了网页。
你只需很酷炫😎的上台，打开浏览器，输入网址，按f全屏播放，就可以开始你的表演了。

1. 环境准备

1. 安装VS code
2. VS code中安装一个插件Markdown Preview Enhanced（安装方式很简单，直接点击安装就可以了，详情可见该网址）
3. 当然你得有个github账号

说明：我这篇博客所介绍的方法，思路上是在你在本地写好markdown文档后，利用vs code的Markdown Preview Enhanced插件，将其转换成html文件。这时候，我们可以利用GitHub Pages可以作为项目的一个网站的特性，创建一个网页。

1. 注意这里虽然我前面说演示文稿/PPT，但其实他的框架是reveal.js，关于这个框架，你可以在reveal.js官网上学习一下。所以在编写markdown文档时，reveal.js的语法规则也得学习一下。
2. 对于Markdown Preview Enhanced插件，这个插件功能挺强大的，我也只探索了一小部分，若你想深入学习，可以看Markdown Preview Enhanced官方指导，官方指导很人性化，自带中文翻译。
3. 关于GitHub Pages，哈哈哈，建议还是看Github Pages官网，官网有一步一步的过程，还带截图说明。

2. 创建github仓库

在桌面上创建一个文件夹demo，进入之后执行github-create命令（这里需要注意：github-create该命令是我添加到~/.zshrc文件中的，如果没有添加的话，是会报错的，具体如何添加可见我的这篇博客）

注：如果在使用github-create这条命令时出现curl错误，开启科学上网 再试试😀

接着查看当前文件夹，发现多了.git和README.md文件

至此，第一步算完成了，这时你打开你的github主页，可以发现多了一个demo的repository。（不详细介绍了，具体可见我另一篇博客）

3. 在VS code中编写Markdown文件

可以直接在命令行输入code ~/Desktop/demo在VS code中打开该文件夹（别忘了把~/Desktop/demo换成你自己创建的文件夹）

好了，这下我们可以看到文件夹下有一个README.md文件。
我们接下来创建一个index.md文件，在这里面写下你的内容。（我直接就用markdown-preview-enhanged插件中的示例md了）

接着右键open preview to the side

就可以看到markdown写的演示文稿预览了。

接着在预览的位置右键，选择HTML > HTML(cdn hosted)（注意：一定要在预览处右键，我之前在文本编辑处右键了好多次都没有出现😥，还有就是要选择cdn hosted，若是你只用离线在自己电脑上查看，选offline，这样只会生成一个html，若想要在服务器上显示，则选择cdn hosted，这样还会生成一个文件夹）

接着，你就可以发现在该文件夹下生成了一个html文件和一个文件夹

至此，你的网页也就做好了，下一步就是发布在github pages上了。

4. 发布网页

经过上面的步骤，你可以发现在左侧git上显示有4条信息（若是1说明是网络有些慢，再等一等）

若是没有变成4，再等一等，在等的期间，我们在命令行创建一个gh-pages分支，命令为

git checkout -b gh-pages

注意：这里的分支不要用其他名字

分支创建好后，我们再回到VS code，选择暂存所有更改

可以看到上面的输入框中为在gh-pages中提交

这里可以随便输入

接着，可以看到更改处为0了

接下来就是最后一步了，在源代码的右边，有三个点，选择推送。
会弹出一个对话框，选择确定就可以啦。


等待推送结束后，就可以打开网址http://username.github.io/demo可以看到你做好的样子啦。

之后，你就可以随时随地，只要电脑上装有浏览器，你就可以很炫酷的输入网址，直接开始你的表演😎

5. 一些补充

1. 上面创建markdown文件时，我建议将文档名称命名为index.html，这样你在后面输入网址时就可以直接输入username.github.io+你的repository名就可以了，若改为其他名字，例如aa.html，那么在之后你输网址时在上面的基础上还得加上/aa.html。
2. 我们当时有一个创建分支gh-pages的操作，其实，这个分支不是必须建的，如果不建继续用master分支的话，GitHub Pages默认是关闭的，你得手动打开它，浏览器进入到你创建的那个repository中去，打开setting，找到GitHub Pages，接着将None改为master，选择保存，是很麻烦的。所以，我建议直接创建一个分支gh-pages，在这个分支创建时，自动会开启GitHub Pages。
3. 在最后一张图中也许你会注意到我输入的网址时dyqdzh.com/demo/，这是因为我之前做了域名转换，dyqdzh.com其实也就是dyqdzh.github.io，不用过多纠结。
4. 最后再说一下吧，虽然看起来这篇幅很长，但实践一遍后就会发现，除了写markdown花费的时间之外，剩下的你都可以在1分钟之内解决！！！

最后放上一些我的参考文章吧，希望对你们也有些帮助。

1. reveal.js官网
2. Markdown Preview Enhanced官方指导
3. Github Pages官网
4. 知乎：GitHub Pages 使用入门
5. 少数派：如何用 Github 免费在线播放你的幻灯？