背??景，作为开发人员，每次用PPT或者Word写简历或者求职报告，都非常痛苦。这些应用程序不适合显示代码。但是今天来的家人是有福的。一个名为slidev的库在其官网地址上露出了坏坏的笑容。Slidev（slide+dev，/sl??d?v/）是一个基于网络的幻灯片创建和演示工具。它旨在让开发人员专注于用Markdown编写内容，同时具有支持HTML和Vue组件的能力，并且可以呈现像素完美的布局，并且还在您的演示文稿中内置了交互式演示示例。下面直接上动图吧：其实官网已经很完整了，但是之所以写这篇文章是因为官网的一些写法其实是有bug的，很多官网都是有代码没有效果图的，而且官方文档写的顺序有点不友好，看得有点晕。1.安装npminitslidev可以认为是用create-react-app:yarndev创建一个react项目2.模块分页和动画slidev每页按比例缩放，每页不能滚动，所以每页的内容页数有限。这点需要注意：slidev有点奇怪，项目启动后默认使用外层的slidev.md作为解析的入口文件：我们可以先清空slidev.md文件的内容，因为在官网的例子，几乎所有的页面代码都写在这里，显得乱七八糟写代码很容易跑来跑去，所以这里建议先学习如何划分页面模块：---src:./pages/1:Homepage.md------src:./pages/2:CodeDisplay.md------src:./pages/3:Picture.md---在里面添加一个md文件pages文件夹中的在slidev的语法中，“---”通常会包裹一些全局设置，如果你单独写“---”类似于“”标签的样式，但是注意这里有个bug：---#---src:./pages/1:Homepage.md---上面的代码直接导致页面崩溃，因为即使是被注释掉的“---”仍然会被误读，我们不会当我们在评论中写其他文字时会报错，这里要注意！！这时候我们可以点击下方的方向键进行页面切换，或者使用键盘上的左右键进行切换。我们增加页面切换的动画，比如在首页.md中添加如下代码，表示当前页面在下一页之上：---transition:slide-up---#我是首页page第一页的默认布局上下居中，我们给第一页设置一个背景图案：---transition:slide-upbackground:https://source.unsplash.com/collection/94734566/1920x1080---#我是首页这里是背景图片的url由官网提供。图片是随机的，每时每刻都不同。设置背景后的效果：3.代码高亮步骤这里我说一下对于开发者来说非常重要的能力，代码展示和渐进高亮，我以快速排序的代码为例：{2-4|6|7|all}表示将代码分成4段，前2~4行高亮，以此类推，最后全部高亮，但要注意{2-4|6|7|all}如果这里只多写了一个空格，那么这条语句就不会生效。可以看到每点击next按钮，显示状态会依次切换，url会拼接clicks=n，其中n为当前页面点击next的次数，而slidev文档中提到的点击事件都是点击url的变化，而不是真正点击某个元素。我们只需要添加{monaco}就可以让代码可以修改了：我们也可以贴出一些链接，和Markdown一样的写法：[代码地址](https://segmentfault.com/u/lulu_up)4.图片华丽ppt当然离不开图片了。之前我们写了背景图片，这里需要写图片标签和图片布局：
