轻松书写,快速生成,即时预览,通用便携。
需求
作为一个老师,我经常需要制作幻灯。
但作为一个懒人,我是不愿意在形式上,花太多时间的。
展示出来的效果,还得让我满意。
至少,得满足以下几点:
- 简洁明快
- 分步显示
- 多媒体支持
尝试过若干种工具后,我最终选择了 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 与数据科学感兴趣,不妨阅读我的系列教程索引贴《如何高效入门数据科学?》,里面还有更多的有趣问题及解法。