Reveal.js:把你的 Markdown 文稿变成 PPT

目录
  1. ${ item.innerText }

「马上开学了,暑期实践的 PPT 做好了吗?」

「第四季度怎么规划?做个 PPT 吧。」

从踏入大学、毕业设计到混迹职场,总是避不开做 PPT;科技公司们也热衷做 PPT 或别的演示文稿,而在某些创业圈子里 PPT 甚至成了项目的名片。大家动不动就做 PPT,但是随着应用场景的快速铺开和电子技术的进步,这个老牌的 Office 软件在某些方面开始显得力不从心,我感到了它的笨重、不便,尤其课上的五分钟案情分析,用 PPT 捣鼓是不是牛刀小用了?我倾向于用更轻量的方式做演示文稿。

通过 Reveal.js 这个框架, 我们可以把 Markdown 文件转为类似 PPT 的演示文稿,轻快省力,减少排版上的时间,更专于文字内容;同时,也获得 PPT 所不具有的灵活性。

PowerPoint Out!

PPT,全名 PowerPoint,诨名「力量点数」。

在公众的意识里,它已经成为演讲的标准配备(除非你供职于苹果或锤子之类的公司)。如果你需要和同学或同事协作、确保老师或 BOSS 能不假思索地打开你的文稿,PPT 往往是第一选择。虽然制作 PPT 的时候我希望自己很有力量、很 powerful,事实却是我在一遍遍傻乎乎地双击文本框。

PPT 虽强大,但割据了磁盘的大量空间,运行起来的内存占用也不小;尤其在 macOS 上,跑起 PPT 来就像乘上了上世纪的铁皮小火车。随着 macOS 的普及和动画技术的进步,Keynote、Prezi 等新秀陆续挑战 PPT 的权威,它们实现了各种炫目的动画效果,把演示文稿变成了一场特效电影。

Absolutely,这很酷,但更多时候我们需要的只是简单明了的演示。我尝试过许多「轻量化」的演示文稿制作工具,这些或是在线或是本地的应用各具匠心,但本质上只是简化版或变异版的 PPT。它们的根本问题在于过度依赖图形界面,让用户在版面和动画上花了太多精力,而分散了本应花在文字内容上的时间。

当我不需要和别人协作、或只是做一个简单演讲的时候,我希望有一个更轻量、更灵活的工具,让我专于文字内容、快速完成演示文稿,同时在写文章的同时就完成排版。

你一定想到了 Markdown,而我要介绍的工具也利用了 Markdown 的特性,却不止于此。

Reveal.js 概览

Reveal.js 是一个使用 HTML 语言制作演示文稿的 Web 框架,支持插入多种格式的内容,并以类似 PPT 的形式呈现。在英文中,「reveal」有「启示」的意思,我觉得这一释义恰到体现了演示文稿的本质:

化繁为简地、清晰地启发观众,让他们在最短时间内了解演讲的内容。

Reveal.js 支持 Markdown 语法,我们得以直接在 Markdown 编辑器里做 PPT。你用 Markdown 语法所实现的精美、简洁的版式,在 Reveal.js 里仍能沿用。这是我以前修改所得的一个演示效果:

不同于应用商店里那些界面精美的应用,Reveal.js 给你的只是一堆源码文件。所幸实际使用起来出乎意料的简单,实际上,使用 Reveal.js 做演示文稿时,你就是在制作一个网页,基本上你能找到的文本编辑器都可以胜任,不需要依赖特定的应用,而且你也只需要了解两三个 HTML 语法。

Reveal.js 具有许多优势:

  • 制作灵活、不限应用,只需修改 HTML 文件
  • 发布灵活、不限平台,只需打开 HTML 文件
  • 丰富的特性,支持过渡动画、代码高亮、视频背景、Markdown 语法、导出 PDF 等
  • 极度轻量,占用空间和内存少

试一试

Reveal.js 的源码可以在其 首页 下载到,只有一个不到 2M 的压缩包。建议你多看几遍其官网的演示效果,很流畅简洁,但图文并茂,动画、列表、表格、,该有的一个不少。解压所得文件夹里的 demo.html,就是官网的源码:

一下子几百行代码涌入眼中,让人不免打起退堂鼓。好在里面大多数的代码你都不必理睬,只需关心关系到内容呈现的一小部分。为了方便,我们将拿同一目录下的 index.html 作为模板。用你喜欢的 Markdown 编辑器打开它。

HTML 语法

在开始前,了解 HTML 语法的一点基础会让之后的进程更为顺利。相信初学 Markdown,你最喜欢用的就是那对星号,它们可以将所包含的文字加粗。在 HTML 里,也可以理解为就是这样的标记(正经学 HTML 的话可不能这么想当然)赋予了文字和段落一些属性,只是比 Markdown 更为丰富。

一份完整的 HTML 文件源码,有两部分组成。一对<head> </head>标签里面是一些关于该文档的说明,在使用 Reveal.js 时已经设置好,不需要再做修改;接下来的一对<body> </body>标签之间就是演示的主要内容。

在 index.html 里,你可以看到,一对<body> </body>之间嵌套了一对<div class="reveal"> </div>,后者之间还套了一组<div class="slides"> </div>,大意理解为它们所包含的内容,要用 Reveal.js 的方式来呈现。只有黄框内的,才是我们的编辑对象,看起来代码多,实际改动的很少。

虽然乱糟糟的一堆代码也能用,但最好注意一下行首的缩进(就是按下 Tab 键出来的效果),保证每组标签都靠左对齐,因为它们之间可能嵌套另一组或几组标签,等内容多了你自己都不知道自己在干什么。

也有的标签,所包含内容非常简短,直接在一行内就可以解决,使用这样的形式:<标签名>你的内容</标签名>。无论是那类标签组,前后标签名需一致,后一个标签名之前加上斜杠「/」表示这对标签到此为止。记得有始有终,即使七夕过了,标签也务必成对出现。

分页

Reveal.js 里页面有两种页面类型,横向的一级页面、纵向的子页面。后者务必嵌套在前者里面。所谓的纵横比较好理解,键盘上的左右箭头控制一级页面,上下键移动子页面。

一级页面用以下代码实现:

	<section>
用户邮箱为何频收广告
</section>

或者简单一些,把它们写在一行内:

	<section>通知中心为何深夜惨叫</section>

把任意一串代码嵌套进之前黄框所示位置,就能实现一个页面。

而子页面则像俄罗斯套娃一样:

	<section>
<section>这是付费教程的升级</section>
<section>还是下一个圈钱手段</section>
</section>

组合着使用它们,可以实现两级子母页面的效果:

PPT 最基本的样子就有了。多数的线性演讲,用方向键按顺序切换页面,这样的结构已经足够;如果你讲得很跳跃、随性,需要临场发挥、让演示文稿随你而动,也许 Prezi 更适合你(和 Reveal.js 类似的 impress.js 也可以实现)。

Markdown

支持 Markdown 是我使用 Reveal.js 最直接的原因。写文章的同时就做好了排版工作,无需假借鼠标点点选选,不亦乐乎?我们还是通过一对标签把 Markdown 文稿转为 PPT 样式:

	<section data-markdown>
# 震惊!国内某数字消费资讯网站竟提供这种服务
* 🔧 效率工具推荐 & 生产力技巧
* 💰 这些产品值得买
* 🔭 这个技术你会懂
* 👍 什么是最好的?
</section>

<section> 标签里添加data-markdown 属性,表示该段内容用 Markdown 引擎解析。它呈现了 Markdown 语法简洁清晰的排版效果:

既然支持了 Markdown,仅仅拿来展示文字未免大材小用。你在 Markdown 里怎么插入图片,这里也是一样的做法——只不过,两端套上了 HTML 标签:

	<section data-markdown>
![14d56de5-7c09-b0fb-002c-f9957997a038.jpg](/Users/Min/Desktop/14d56de5-7c09-b0fb-002c-f9957997a038.jpg.png)
</section>

图片的地址可以是一个 URL,也能是本地的路径。当采用后一种的时候,即使没有网络,Reveal.js 照样可以正常播放。至于序列表、表格、代码块,这些 Markdown 能呈现的效果,Reveal.js 也当仁不让。

其实把 Markdown 转 PPT 的核心操作就是这么一组标签,为了方便,可以把编辑过的 index.html 文件保存一下,下次直接往里面粘贴文字内容。当然还有更加偷懒的,像我这样把源码丢进 Drafts 里,随时随地撸 PPT:

你会发现,在手机上输入特殊符号是一件痛苦的事。所以我修改得到了一个快速输入 HTML 标签的 Drafts keyboard extensions,第一次点击时它会输入 <section> 标签并标上data-markdown 属性,键入完页面内容后再点一次,它会自带补全后一个 </section>标签。你可以下载原作者 @Rob Malanowski 的 keyboard extensions,把原本要输入的括号改成 HTML 标签即可:

转场动画

PPT 素来以丰富的演示效果著称,Reveal.js 也不甘落后。通过 CSS 样式和 javascript 它几乎可以实现任何特效,可惜对大多数用户而言这不是那么直观的操作。好在 Reveal.js自带了一些转场动画,使用起来非常简单,和之前调用 Markdown 渲染引擎一样,只需要为<section>标签data-transition属性就能实现:

	<section data-transition="参数">
别眨眼!
</section>

多来几组看看:

这样的动画生动而不落窠臼,在厌倦 PPT 的漩涡特效后,何不转向简单一些的动画换换口味。转场动画支持多种切换效果,你可以选择这些参数:fede,slide,convex,concave,zoom,或者停用动画:none(在你没有设置时,Reveal.js 默认采用 slide 动画)。特别注意的是,参数一定要小写,否则不生效。

背景颜色

如果你不喜欢 Reveal.js 那一黑到底的背景,那就自己定义它。我们在标签里添加data-background属性来自定义背景颜色:

	<section data-background="十六进制颜色码">
这个服务好不好?群内作者说真相
</section>

背景颜色属性只支持十六进制颜色码,我一般用 这个在线工具 把 RGB 颜色码转为十六进制颜色码。至于怎么获得 RGB 颜色码?Photoshop、macOS 自带的数码测色计,你有的是工具可用;在无暇自己配色时,挑一个 Material Design 的色板则是不过不失的选择。言归正传,看看实际效果:

当然,只有纯色背景是不是太单调了?我倒是觉得蛮扁平蛮简洁的(还不是懒)……那把视频当作背景怎么样:

	<section data-background-video="视频地址">
Shut up and take my Money!
</section>

插入视频仍然只是一条参数的功夫,对于追求视觉效果的制作者,不可谓不简单。和图片一样,视频地址也支持 URL 和本地路径, 我建议插入本地的视频,如果演讲时在线资源播放失败,可就弄巧成拙矣。我测得 mp4 和 mov 是支持的,其他格式似乎不可以。把视频当作背景,有没有觉得自己的演示文稿蓬荜生辉了?

如果还嫌不够,顺便说一句,Reveal.js 支持 javascript,所以其应用场景可不限于传统的演示文稿——如果你想做一个现场投票、幸运转盘抽奖,都没问题。这些有趣的拓展功能都内嵌在你的 Reveal.js 版「PPT」里,和演讲无缝衔接,听起来很酷是不是?

更多的功能和应用场景,请君自己探索吧。

稍等,你是不是意识到这份教程中的例子蕴含了一些难言之隐?是的,我们不能言说的东西,请看整份 Reveal.js 演示自行体会:

我想我达到了「轻松排版,专于内容」的效果🤣

尾巴

当传统的工具解决不了或不是最优解决方案之时,理应拥抱新的工具。

Reveal.js 只是 PPT 替代品的一种,更加适合轻量的应用场景,而在一些传统领域,PPT 仍然老当益壮。其实从演讲的角度俯瞰,各种工具也是择适者而用,并无优劣之分。

读大学时,大一尚未结束我就先后给团委、党委、创业学院做过演示文稿,作品还多次在省赛和国赛拿奖;目前我和国内最大的几家汽车公司合作,为他们做过几次项目展示的 PPT。但无论我设计了多么炫目的动画、精美的排版,我始终坚持演示文稿的本质是简单明了地说明内容,一切都是为内容服务的。PPT 固然强大,但演示并不是唯 PPT 论,更不应该唯动画论;做演示的时候,应该从内容出发,这之外的东西权作锦上添花。

我从 2013 年开始学做 PPT,靠它当饭碗不过一年多时间,作为一个涉世不深的青年,我所提倡的「反 PPT」曾遭到业内老前辈的批评,在论战之中我也对这个软件有了更多的认识;但是应用毕竟分场景,我只是建议不要局限于 PPT,绝非全盘弃之。一年前我尚处于创业初的艰苦之中,字里行间透着一丝愤世嫉俗和矫枉过正;那时提倡 HTML 代替 PPT 的文章发在简书和一些公众号,不幸碰了 PPT 付费课程提供者的红线,遭到狂轰滥炸。

而在少数派,我相信这里的读者更理智——你们总不会把少数派当鸡汤喝吧?所以,我重新写了这个选题,希望能帮到被 PPT 折磨的你。

小子的文章不是芙丽嘉的苹果,你读了并不能圆月入十万的美梦;甚至连刺激多巴胺分泌的迷情巧克力也算不上,不用期许在这里找成功的幻觉,升值加薪凭的还是脚踏实地,只靠 PPT 上台风光一把是远远不够的。

共勉。


参考链接:

ps:Reveal.js 也提供了图形界面,有一个在线编辑器供君使用。窃以为这脱离了其本意,使用代码(其实和 Markdown 一样简单易学)、专注演示内容才是其精髓——何况它的在线版一点也不流畅。

pps:最后播放时,请把 index.html 放置在 reveal.js-master 文件夹内。



127

Minja

Minja

平面设计,汉字输入,macOS 自动化

已关注 关注

${ r.name }

¥ ${ r.details[0].price/100 } ¥ ${ r.details[0].price/100 } ¥ ${r.details[0].cost_price/100}
App 打开

商务合作

bd@sspai.com

网站反馈

feedback@sspai.com

根据国家网信办规定,互联网账号需要实名认证才能发布信息。请先验证手机号码,再进行评论或撰写文章。

取 消 点击去验证