如何用 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 行内容。

{
  "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%7CimageView2/2/w/1000/format/webp； 。

好了，这几乎就是你需要的全部 Markdown 语法知识了。做一般的幻灯，这些基本上够用了。如果你还需要插入代码、引言和数学公式等，请参考这个链接（http://t.cn/zHRA1bn）。

如果你想即时看看，图片插入得是否正确。可以在 Visual Studio Code 中使用 "Cmd + k, v" ，进行预览。

运行

一通编辑过后，假设目前的 myslide.md 文件，就是你要的幻灯内容了。

下面你可以用一行语句，生成幻灯。

使用 Anaconda Prompt ，进入到命令行状态，并且采用 cd 命令，到达解压后的 markdown2slides-master 目录下面。

如果你对上述命令不熟悉，没关系，复习一下我专门为你制作的 Anaconda 安装和命令行运行教程。链接在这里。

执行下面这一条语句：

python3 md2slide.py example/myslide.md

如果一切正常，你会看到浏览器自动弹出，并且打开你的幻灯进行预览。点击 f 按键，可以进入全屏演示。如下方视频所示。

结果

生成的文件呢？

如果你没有改动 config.json 里面的输出位置，此时在你的目录下，会有一个 export 文件夹。

打开这个文件夹。

其中的 assets 目录，包含了全部的媒体文件，例如图片和视频。就连你原先指定的网上链接图片，也一并为你下载了，存储在里面。

这个 export 目录里，已经包含了你需要拷贝到优盘带走的全部内容了。

拿着它，用你精湛的演讲艺术，让观众惊艳吧。

讨论

你尝试过后，效果如何？

如果遇到了问题，欢迎你反馈给我。如果你有改进的建议，也欢迎一并告诉我。期待能为你提供更好的 Markdown 幻灯转换工具。

祝顺利！

喜欢请点赞和打赏。还可以微信关注和置顶我的公众号“玉树芝兰”(nkwangshuyi)。

如果你对 Python 与数据科学感兴趣，不妨阅读我的系列教程索引贴《如何高效入门数据科学？》，里面还有更多的有趣问题及解法。

由于微信公众号外部链接的限制，文中的部分链接可能无法正确打开。如有需要，请点击文末的“阅读原文”按钮，访问可以正常显示外链的版本。

知识星球入口在这里：