mdx-deck:由markdown和react驱动的幻灯片文件

700 阅读4分钟

我已经做了多年的演讲。我和其他许多人一样从PowerPoint开始,因为 "这就是你做演讲的方式"。在我上大学的时候,我开始使用Prezi,我让所有的人都感到惊讶。我不再使用它,因为它对于我所做的各种演示来说,感觉太有噱头了。我试过谷歌幻灯片,那很酷,因为它是网络技术,但有点局限性,而且看起来不那么漂亮。最后我找到了slides.com。在我的整个软件开发演示生涯中,我几乎一直使用幻灯片。你可以在我的幻灯片页面上找到我所做的几乎100%的公开演讲(包括我的第一次聚会演讲)。

我对幻灯片一直很满意,因为它真的很容易创建演示文稿,而且我从来不是一个在幻灯片上花费大量时间的人。我只想快速制作,并专注于练习我的演讲,有效地传达我想要的东西。但它肯定有一些缺点和局限性,所见即所得的界面有一些东西真的让我很不爽。所以我一直在寻找一种更好的创建幻灯片的经验。(现在是承认我从未使用过Keynote的好时机。但我不想为它付费,而且我不认为我愿意花时间在幻灯片上做文章,使它比幻灯片更好)。

幻灯片的局限性真正困扰我的最大例子可能是在页面上加入互动元素的困难。我一直很欣赏那些用HTML、CSS和JS制作幻灯片的人,因为他们可以直接在幻灯片上添加互动演示,这不仅增加了 "惊艳因素",而且一般来说更有吸引力。举个具体的例子,在ChainReact的 "Simply React "主题演讲中,有几个演示是录制的视频,这不是很好,但我也有一个问题,我不能重放视频(请看这里)。所以这些演示有点平淡无奇。

Ken Wheeler大师宣布spectacle时,我超级兴奋!它是如此的令人敬畏!它是如此的令人敬畏。它是如此令人敬畏!但我从来没有接触过它,因为我太懒了,不愿意花时间用React代码做幻灯片,也不愿意把它定制成我想要的样子。因此,虽然我尝试过几次,但它从未真正为我所用。

几个月前,John Otander发布了一个名为MDX的新工具(和规范)的初始版本。几个月后,Tim Neutkens 在Zeit Day 2018的主题演讲中宣布了MDX,全世界的人都被震撼了(例如)。

这里有一个快速的例子,说明MDX的可能性:

import InteractiveGraph from './my-d3-graph'

# Checkout this cool graph!

> This is markdown, for real



**That's right!** We're rendering a **React Component** in Markdown!

这里面有一堆令人敬畏的东西。我想要这样的东西已经有一段时间了!早在我为glamorous(glamorous.rocks)做网站的时候,我就想把所有的文档都做成markdown的形式,以便于国际化,但我也希望能有互动性,所以我想出了一个超级奇怪的语法来实现这个目标。它非常酷,而且实际上在基本层面上与MDX类似(使用一个自定义的花式插件来进行注释),但它很笨拙,而且很有限。这个MDX的东西才是真正的好东西!

最近,(认真地)令人惊讶的布伦特-杰克逊创造并宣布了一些绝对令人惊讶的东西。 mdx-deck

gif showing mdx-deck demo

它有我喜欢的幻灯片的易用性,因为它只是markdown。再也没有比这更容易的了!然后,最重要的是,如果我想让某些东西是互动的,我可以简单地让这个互动的东西成为一个React组件,然后import ,直接进入我的幻灯片!?这有多棒啊!?答案是 "非常棒"!

mdx-deck也有一些很好的功能。

你把它和Netlify惊人的GitHub集成结合起来,把你的幻灯片放在GitHub项目中,你就可以用自动部署的幻灯片来进行比赛了!

我目前正在努力将我的幻灯片移植到"Simply React"。你可以在这里看到目前部署在netlify上的幻灯片的状态(和pdf)。我很高兴能有这样一种简单的方式在浏览器中创建演示文稿,它可以很容易地在本地运行,部署到网络上,创建一个PDF版本,并且完全互动。这实在是太了不起了。

请看一看,在你的下一次演示中试试。我想你会喜欢它的。祝您好运