不用 PPT 和 Keynote,Markdown 编辑器也能做简单的演示文稿

爱数据精选
爱数据精选
爱数据精选
380
文章
0
评论
2021-04-1911:39:24 评论 40 4657字
摘要

从踏入大学、毕业设计到混迹职场,总是避不开做 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 里仍能沿用。这是我以前修改所得的一个演示效果:

不用 PPT 和 Keynote,Markdown 编辑器也能做简单的演示文稿

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

Reveal.js 具有许多优势:

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

三、试一试

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

不用 PPT 和 Keynote,Markdown 编辑器也能做简单的演示文稿

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

四、HTML 语法

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

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

不用 PPT 和 Keynote,Markdown 编辑器也能做简单的演示文稿

在 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 和 Keynote,Markdown 编辑器也能做简单的演示文稿

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

六、Markdown

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

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

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

不用 PPT 和 Keynote,Markdown 编辑器也能做简单的演示文稿

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

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

不用 PPT 和 Keynote,Markdown 编辑器也能做简单的演示文稿

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

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

不用 PPT 和 Keynote,Markdown 编辑器也能做简单的演示文稿

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

不用 PPT 和 Keynote,Markdown 编辑器也能做简单的演示文稿

七、转场动画

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

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

多来几组看看:

不用 PPT 和 Keynote,Markdown 编辑器也能做简单的演示文稿

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

八、背景颜色

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

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

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

不用 PPT 和 Keynote,Markdown 编辑器也能做简单的演示文稿

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

不用 PPT 和 Keynote,Markdown 编辑器也能做简单的演示文稿

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

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

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

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

不用 PPT 和 Keynote,Markdown 编辑器也能做简单的演示文稿

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

九、尾巴

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

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

End.

来源:少数派

本文为转载分享,如果涉及作品、版权和其他问题,请联系我们第一时间删除(微信号:lovedata0520)

  • 我的微信公众号
  • 微信扫一扫
  • weinxin
  • 我的微信公众号
  • 微信扫一扫
  • weinxin
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: