牛!Markdown还能这么玩?这款开源神器绝了!

Markdown是一款轻量级标记语言，由于它易读易写的特性，很多程序员用它来写项目文档。其实Markdown的功能不止于此，结合一些工具使用还可以用来做PPT，今天带大家使用Markdown来做一个PPT，看看到底有多炫酷！

Slidev简介

安装

在使用Slidev制作PPT之前，我们需要先安装下它的环境。

• 确保电脑上已经安装了NodeJS 14以上版本，然后使用如下命令初始化项目：

• 安装过程中我们需要输入项目名称mall-intro-sldev，安装完成后会自行启动；

• 如果项目被关闭了，也可以使用如下命令运行；

• 当然你也可以安装Slidev的CLI工具后使用slidev命令来运行；

• 安装完成后项目默认运行在3030端口，访问地址：http://localhost:3030/

• 由于是使用Markdown来编写PPT，你可以使用任意的Markdown编辑器，比如Typora或者MarkText，这里使用的是VSCode，因为它有Slidev专属的插件可以使用；

• 
  VSCode的使用这里就不再赘述了，具体可以参考之前的文章推荐一款微软出品的开发神器，体验不输IDEA！
  
• 
  安装完成后直接用VSCode打开Slidev初始化好的文件夹即可，打开默认的PPT文件slides.md，然后打开插件视图即可开始编辑。
  

使用

环境搭建完毕，下面我们就可以开始制作PPT了，这里以mall项目的介绍PPT为例。

使用主题

• 在使用Slidev之前，我们最好选择一个炫酷的主题，Slidev提供的主题还是挺多的，选择一个自己喜欢的就好；

• 这里我们使用Penguin这个主题，使用如下命令安装主题；

• 如果遇到如下提示，需要安装sass；

• 安装完成后，我们在Markdown文档顶部修改theme属性即可使用主题。

使用布局

通过布局我们可以很好地控制PPT中的内容，不同的主题也拥有不同的布局，这里以penguin主题为例。

• 我们先来编写一个PPT的封面页，使用的是intro布局，---符号之间的是页面配置，---之后的是PPT中的内容；

• 由于我们将新的PPT内容放到了mall-slidev.md文件中，因此启动时需要使用slidev mall-slidev.md命令，展示效果如下；

• 我们再来编写一个presenter布局，可用于展示PPT作者的信息；

• 演示者布局展示如下；

• 如果没有特殊需求的话，可以使用默认布局；

• 默认布局展示如下；

• 如果我们想在PPT中同时展示文本和图片，可以使用text-image布局，通过reverse属性我们可以控制图片在左还是在右；

• 文本图片布局展示如下；

• 对于默认布局我们如果不需要配置的话，可以简写成功---；

• 有时候我们需要PPT内容全部居中，可以使用new-section布局；

• 居中布局展示如下；

• 如果你想将某些内容显示在窗口中的话，还可以使用text-window布局，使用::window::来分割在窗口中的内容；

• 文本窗口布局展示如下；

• 如果你想实现双列布局的话，可以使用two-cols布局，使用::right::来分割左右列；

• 双列布局展示如下：

演示功能

• 如果你把鼠标放到PPT的左下角的话，你还会发现Slidev提供了一排功能按钮，可以实现全屏、前进、后退、录制、在线编辑等功能；

• 通过概览功能，我们可以查看所有PPT的概览；

• 通过切换主题功能，我们可以进行主题切换，比如切换到暗色主题；

• 通过画图功能，我们可以对PPT上的重点内容进行标注；

• 通过在线编辑功能，我们可以实现PPT内容的在线修改。

部署

• Slidev实现静态部署也很简单，直接使用如下命令进行打包，可以通过--base指定访问的子路径，在有多个PPT项目需要部署时，使用子路径比较好；

• 打包过程中输出日志如下，注意图片资源最好使用文件存储，不要放在项目目录下；

• 打包完成后，所有静态资源都会输出到dist目录下；

• 然后把dist目录放入Nginx的html目录下，并改名为mall-slidev，访问以下路径即可查看PPT。

总结

参考资料

PPT文件地址