轻松记录您
灵感和创意

如何用 Markdown 做幻灯?

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

需求

结果

生成的文件呢?

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

打开这个文件夹。

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

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

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

讨论

你尝试过后,效果如何?

如果遇到了问题,欢迎你反馈给我。如果你有改进的建议,也欢迎一并告诉我。期待能为你提供更好的 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 按键,可以进入全屏演示。如下方视频所示。

未经允许不得转载:坚果之云 Markdown » 如何用 Markdown 做幻灯?
分享到: 更多 (0)

坚果云Markdown轻松记录您 灵感和创意

坚果云Markdown下载坚果云Markdown介绍