如何用 Markdown 做幻灯？

轻松书写，快速生成，即时预览，通用便携。

需求

作为老师，我经常需要制作幻灯。

但作为一个懒人，我是不愿意在形式上，花太多时间的。

展示出来的效果，还得让我满意。

至少，得满足以下几点：

简洁明快
分步显示
多媒体支持

尝试过若干种工具后，我最终选择了 reveal.js 作为幻灯工具。

它生成的幻灯，其实就是 HTML5 网页。因此各种链接和媒体格式（包括图片、声音和视频等），都支持得很好。

由于是网页，只需要浏览器，就可以演示，因此做出来的幻灯能应对各种操作系统。走到哪儿去，带一个优盘（和翻页器），就够了。

如果让我一页页写 HTML 代码，我才不要。

我希望的，是只列出想要表达的内容。所有格式问题，都由软件自动化处理。

发现了黑魔法 Pandoc 以后，我的这个目标基本达成。

现在，我只需要写一个简单的 Markdown 文件（特别简单的轻量标记文本），它就是幻灯了。

可手动运行 pandoc 脚本，输入一堆参数。我也觉得很麻烦。

嗯，就是懒到这种地步。

于是，我用 Python 写了个脚本。

每次运行的时候，只需要填写 Markdown 文件名，就可以轻松转换成幻灯。

我用曾经用这个脚本，给你提供了思维导图转换成幻灯功能。

大家很喜欢这个工具，可惜它有以下两个缺陷：

首先，它是用 Python 2.7 写的。今天，大多数人都用 Python 3 了，二者缺乏足够的兼容性。

其次，因为使用了 Automator ，它只能在苹果自家的 macOS 运行。很多 Windows 用户表示，也很想使用。

因为它完全满足我个人需求，因此我一直懒得改动。

最近，因为开设 INFO 5731 课程，我又得开始大规模做新幻灯了。

在这个过程中，我发现了原先工具的一些问题，于是决心加以改进。

改进的方向包括：

首先要使用 Python 3 ，这样可以更好处理 utf-8 编码，而且还能上 pathlib 等一些新的功能。

其次要跨平台，开放 Python 脚本给不同操作系统上的用户使用。

第三，我还把代码使用面向对象（Object Oriented Programming, OOP）方式进行了重构。如果你熟悉 Python ，可以更加轻松地对它进行扩展，快速增添你自己想要的功能。

其实，是为了顺带复习一下面向对象编程，好在课程里讲授。

用这个工具，你只需要写简单的几行文本，说明内容和媒体链接。然后，只一行 Python 语句，你就能获得以下效果：

想不想尝试一下？

环境

为了使用咱们的工具，你需要在电脑上安装 Anaconda，Visual Studio Code 和 Pandoc 。

下面我们来说说步骤。

首先，到这个链接（http://t.cn/RW92Dcn）下载最新版的 Anaconda 。系统会自动给你显示适合你操作系统的版本。注意一定要选择 Python 3.x 版。

然后，根据提示，一步步进行安装即可。

如果你之前没有安装过 Anaconda ，或者对使用终端命令行方式没有经验，没关系。

我这里有一段视频教程，从头演示给你。

请点击这个链接，查看视频。

到了 Anaconda 安装的末尾，它会提示你是否安装 Visual Studio Code。如果你的电脑上还没有安装，请勾选一并安装好。

之后，请到这个链接（http://t.cn/E5h4tQj）下载 Pandoc 的最新安装文件，也是根据提示一步步安装就好。

工具

有了运行环境，咱们下载工具。

我把工具放在了 Github 上。访问这个链接（http://t.cn/E5PXpoC）就可以看到。

如果你觉得好用，别忘了在页面上给我加一个 Star ，谢谢！

如果你对 Github 的使用很熟悉，可以直接使用 git clone 命令下载。或者，请点击这个链接，直接下载压缩包。

把压缩包解压后，你会在其中看到以下内容。

其中的 config.json 文件，和 example 目录下文会讲解到。 reveal.js 目录是生成幻灯的支撑环境。

工具准备好了，下面我们来看看使用方法。

配置

首先要做一下配置，非常简单，打开解压后目录中的 config.json 即可。你只需要配置一次。

用 Visual Studio Code 打开 config.json 。

可以看到，只有以下 5 行内容。

代码语言：javascript复制

{
  "revealjs_export_dir": "export",
  "author_name_english": "Shuyi Wang",
  "author_name_chinese": "王树义",
  "revealjs_theme": "league",
  "revealjs_transition": "convex"
}

一一解释一下。

"revealjs_export_dir" 是幻灯最终输出的目录。这里默认的，是当前目录下，会新建一个 export 目录。你可以修改它，设置成硬盘上的任意路径；
"author_name_english" ，填写你的英文名；
"author_name_chinese" ，填写你的中文名；
"revealjs_theme"，是 reveal.js 幻灯的主题样式。你可以点击这个链接，查看都有哪些可选项，以及显示效果如何；
"revealjs_transition"，是幻灯页面间过场动画效果，你可以查看这个链接，看都有哪些选项。

总结一下，你需要把中英文名字设置成自己的，其余各项可以保留默认值。

说明一下，为什么这里会要求你输入中文英文两个姓名？

因为这个转换工具会根据你幻灯主标题里是否包含中文，自动选择使用你的英文或者中文名字，而且加入对应的日期语言和格式。

怎么样？挺智能吧？

编辑

我为你做了一个 Markdown 源文件样例，在 example 目录下，叫做 myslide.md 。

在 Markdown 文件旁边，还有一个目录，叫做 assets 。打开看看。

这就是图片、视频、音频等媒体的建议放置路径了。

里面我放了一张图片，和一段视频。你可以分别打开浏览一下。

好了，回到 example 目录。

请使用 Visual Studio Code 打开 myslide.md 文件。

这就是我们的样例幻灯 Markdown 源文件了。

如果你对 Markdown 的语法不熟悉，我这里简要给你说一下。

# 后面的内容，代表一级标题。在咱们的幻灯样例里，它代表你的幻灯题目，会显示在首页上；
## 后面的内容，代表二级标题。这里，你可以把幻灯组织成几个不同的部分（Section）。二级标题，就代表了每个部分的名称；
### 后面的内容，代表三级标题。我们的样例里，它会作为一页幻灯的标题部分；
两个 ### 之间的内容，代表了一页幻灯要显示的东西。你可以直接写文字，那就会显示在最终的幻灯里。如果你在文字前面加上 - 的标记，它就会作为一个条目，顺次出现；
![] 后面加上圆括号的标记，是图片。把你的链接，填写到圆括号中，就可以了。可以用绝对链接，例如 /Users/yourname/Downloads/screenshot.png ，也可以用相对链接。例如你看到样例中的 assets/2019-01-16-20-20-09.png 。这里要保证 assets 和 Markdown 文件在相同目录中。另外，你还可以用网络链接，例如样例中的https://upload-images.jianshu.io/upload_images/64542-ffa6aaec43eff788.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/1000/format/webp；。