2074082686.jpg


为大家介绍一个刚刚开源,但其实自己已经使用超过 5 年的小工具:vue-mark-display。你可以用它把 markdown 格式的文本转换成幻灯片并在浏览器中播放和控制。


开发背景


我自己工作中经常需要准备各式各样的幻灯片,所以逐渐觉得用 PowerPoint 或 Keynote 来做幻灯演示略微显得有些笨重。这体现在板式和样式设计、文件大小、打开、编辑和播放的方式等很多方面。加上我从事的就是前端开发的工作,对语义化的信息格式非常敏感,深刻的认为,那些你表面上想编辑的“样式”其实是信息的“类型”+“配套的样式”罢了。所以决定用 markdown 外加自己扩展的一些小功能,来撰写幻灯片,并研发了相应的工具,也就是最近开源的 vue-mark-display

最早这个工具是用 vue v0.10 写的,当时源代码里还有像 v-attr, v-repeat, v-transition 这样的“古董级”语法,而且还在依赖 Zepto。最近准备开源这个项目的时候,我也基于最新的前端知识和技能进行了重构。所以大家看到的是比较新的版本。

其实在此之前,我也写过很多类似的小工具了,但都没有坚持使用很久,这次开源的 vue-mark-display 我差不多持续使用了 5 年。经历了差不多这 5 年时间,准备过了无数的幻灯片和公开演讲,我想说基于 markdown 以及这些小功能撰写幻灯片真的很酷。如果你也有兴趣试一试用 markdown 为主体来撰写自己的幻灯片,那么不妨了解并体验一下 vue-mark-display

另外,事实上,如果只是像使用它,你是不需要学习任何关于 Vue 的知识的 —— 文章最后会提供一个不需要 Vue 知识的开箱即用的办法 —— 所以它也对 React、Angular 等社区的同学友好 —— 只要你会写 markdown 和简单的 HTML5 代码,你就可以使用 vue-mark-display 制作出非常精美的幻灯片。


基本语法


首先,我们在 markdown 语法的基础上做了一个扩展:通过 ---- 分割线把一整篇 markdown 文档划分成为若干张幻灯片。


# 这里是第一页
以及一些基本的自我介绍
----
## 这里是第二页
- 这里有内容
- 这里有内容
- 这里有内容
----
没了,讲完了
__谢谢__


例如上面的例子就会被生成为三张幻灯片。


https://codesandbox.io/embed/moxv1k071y?fontsize=14&module=%2Fsrc%2FApp.vue


这样你就可以利用 markdown 支持的 h1 - h6 标题、列表、表格、图片、链接、加粗等格式加分页符用极快的速度写出幻灯片了。


通常情况下,你再为自己的幻灯片设置一套全局的 CSS 样式并固化下来成为你的样式风格,基本就可以拿来演示了。以下是我自己喜欢的样式风格:


https://codesandbox.io/embed/61jorw0703?fontsize=14&module=%2Fsrc%2FApp.vue


自定义样式


在这个基础上,我们对 markdown 格式做了一点点进一步的扩展 —— 通过在每一页幻灯片开头撰写 html 注释来设置这页幻灯片的特殊样式。


比如我们为第二页幻灯片换一个不一样的背景,同时正文文字颜色变成白色:


# 这里是第一页

以及一些基本的自我介绍

----



<!-- style: background: #4fc08d; color: white; -->

## 这里是第二页

- 这里有内容

- 这里有内容

- 这里有内容

----

没了,讲完了

__谢谢__


现在翻到第二页看看,背景和文字的颜色就已经改变了


https://codesandbox.io/embed/n734wvx92m?fontsize=14&module=%2Fsrc%2FApp.vue



当然在 markdown 中你也可以撰写任意 HTML5 代码,比如潜入一端 HTML 甚至全局有效的 `<style>` 标签,都可以被解析:


# 这里是第一页



以及一些基本的自我介绍



<div class="notification">Welcome!</div>



----



<!-- style: background: #4fc08d; color: white; -->



## 这里是第二页



- 这里有内容

- 这里有内容

- 这里有内容



----



没了,讲完了



<div class="notification">Thanks!</div>



<style>

.notification {

position: absolute;

top: 20px;

right: 20px;

border-radius: 3px;

padding: 0.25em 1em;

background-color: yellow;

color: #666;

}

</style>


https://codesandbox.io/embed/1z941rj65l?fontsize=14&module=%2Fsrc%2FApp.vue


其它自定义选项


`vue-mark-display` 还提供了一些方便的 prop 配置项和 event 组件事件,如:



同时 `vue-mark-display` 还可以方面得利用第三方手势库支持触摸屏的左右滑动翻页。


上述比较完整的用例可以看这里:


https://codesandbox.io/embed/300xq1mlkp?fontsize=14&module=%2Fsrc%2FApp.vue


One More Thing


`vue-mark-display` 还支持直接导出成为 PDF 格式文件。因为我们的幻灯片有可能通过各式各样的方式进行传播:有可能是一个链接,也可能是一个文件。所以 `vue-mark-display` 利用 W3C 的 CSS Page Media 相关规范满足了这一需求,你只需要简单的打开浏览器的打印对话框,然后选择导出成为 PDF,就可以轻松的把自己的幻灯片发到钉钉好友、微信群、邮件附件等各个地方。


![](https://github.com/Jinjiang/vue-mark-display/raw/master/pdf.png)


最后想说 `vue-mark-display` 已经开源了


欢迎大家试用并提出宝贵的意见,如能一同参与建设和维护,我会更加感激。



同时我也把自己最近在社区分享过的幻灯片全部整理到了这个地址:


https://jinjiang.github.io/slides/


接下里这个项目还有一些规划中的特性会逐步实现并发布,尽请关注。


最后的最后


__如果你不想学 Vue,希望开箱即用,直接把 markdown 导出成在线幻灯片:__


来用 mark2slides 吧,一键导出!


https://www.npmjs.com/package/mark2slides


用法:


npm install --global md2slides
m2s my-slides.md



然后去 `dist` 目录开启一个 web server:


cd dist
npx serve


打开 http://localhost:5000/ ,完毕。


不过这个工具非常初期,还请大家多多提意见,接下来我也会逐步为这个工具增加更多贴心的功能。