更适合程序员体质的PPT制作工具——Slidev

news/2024/12/29 3:28:44/

Slidev简介

Slidev是什么

Slidev是一款基于Vue.js的现代化幻灯片制作工具，它可以帮助用户快速、高效地制作出美观、专业的幻灯片。

目前市面上有很多功能丰富的、通用的、所见即所得的幻灯片制作工具，例如 微软 PowerPoint 或 苹果 Keynote. 它们在制作带有动画、图表和许多其他漂亮的幻灯片方面效果相当好，同时非常直观和容易学习。

那么，为什么要使用 Slidev 呢？

Slidev 旨在为开发者提供灵活性和交互性，通过使用他们已经熟悉的工具和技术，使他们的演示文稿更加有趣、更具表现力和吸引力。

当使用所见即所得的编辑器时，人们很容易被样式选项所干扰。Slidev 通过分离内容和视觉效果来弥补这一点。这使开发者能够一次专注于一件事，同时也能够重复使用社区中的主题。

Slidev 并不寻求完全取代其他幻灯片制作工具。相反，它专注于迎合开发者社区的需求。

Slidev的特点和优势

  • 易于学习和使用：Slidev采用了Vue.js的语法，对于Vue.js开发者来说非常友好，同时也对于没有开发经验的用户来说也非常易于学习和使用。
  • 美观、专业的幻灯片设计：Slidev内置了多种主题和样式，可以帮助用户快速搭建出美观、专业的幻灯片设计。
  • 灵活的布局和排版方式：Slidev支持多种布局和排版方式，用户可以根据自己的需要进行自由的调整和设计。
  • 丰富的插件和扩展功能：Slidev支持多种插件和扩展功能，可以帮助用户添加动画、转场效果、代码演示等多种功能。

为什么更适合程序员使用

  1. 使用扩展的 Markdown 语法编写内容，编写 PPT 就像开发时编写 Markdown 文档一样
  2. 使用 HTML, CSS 来定制每页 PPT 的展示样式，和进行前端开发体验一致
  3. 图表，Slidev 内置 Mermaid, 标记为 mermaid 的代码块会自动转换成图表。平常做技术分享难免需要插入一些类图、流程图、管道图等
  4. 动画，内置了很多动画指令和动画组件
  5. 支持导出为 PDF/PNG
  6. 支持静态部署，你可以把最终制作完成的 PPT 打包成一个单页应用，并将其部署到服务器上，这样就可以让更多人看到你的 PPT
  7. 内置主题并且支持编写自定义主题。一个自定义主题就是一个 npm 包，你可以把它发布到 npm 上进行存储分发，让更多的人使用到你编写的主题

除此以外，Slidev 还支持一些其它强大的功能，但由于在我使用过程中对我帮助不大，所以我没有作为理由提及

各位同学有兴趣，可以自行去 Slidev 的官网查看：Slidev官网

安装Slidev

Slidev 需要 Node.js 的版本 >=14.0.0

使用 NPM：

npm init slidev@latest

在这里插入图片描述

跟随命令行的提示，它将自动为你打开幻灯片，网址是 http://localhost:3030/
在这里插入图片描述

我们可以用左右方向键来切换PPT，Slidev默认也提供了功能丰富的工具栏：

在这里插入图片描述

Slidev的基本使用

扉页配置

我们来打开刚刚创建的Slidev项目，这个slides.md就是我们编写PPT的地方，所有的页面都可以在这个md里完成

在这里插入图片描述

这个文件最前面是关于PPT的扉页配置，这里晒出我自己的配置，具体每行配置的参数含义见注释：

---
theme: light-icons # 主题
image: 'https://source.unsplash.com/collection/94734566/1920x1080' # 首页背景图
title: 'Slidev的使用' # 幻灯片的总标题，如果没有指定，那么将以第一张拥有标题的幻灯片的标题作为总标题
highlighter: 'shiki' # 语法高亮设置，可以使用 'prism' 或 'shiki' 方案
lineNumbers: true # 在代码块中显示行号
info: false # information for your slides, can be a markdown string
transition: slide-left
download: false # 在单页（SPA）构建中启用 pdf 下载，也可以指定一个自定义 url
exportFilename: 'slidev-exported.pdf' # 要导出文件的文件名称
monaco: 'dev' # 启用 monaco 编辑器，可以是 boolean，'dev' 或者 'build'
selectable: true # 控制幻灯片中的文本是否可以选择
record: 'dev' # 启用幻灯片录制，可以是 boolean，'dev' 或者 'build'
colorSchema: 'auto' # 幻灯片的配色方案，可以使用 'auto'，'light' 或者 'dark'
routerMode: 'history' # vue-router 模式，可以使用 'history' 或 'hash' 模式
drawings:enabled: truepersist: falsepresenterOnly: falsesyncAll: true
---

更多详细配置可参考 Slidev扉页配置

分页

既然是用 Markdown 写 PPT，那么PPT的每一页之间是怎么分割的呢？

Slidev提供了非常简单的做法，用三条横线作为分页标识：

---
layout: cover
---# 第 1 页This is the cover page.---# 第 2 页The second page

代码块

我们使用 Slidev 一个非常重要的原因就是为了让代码在幻灯片中拥有正确的高亮，这在Slidev里非常简单，只需要像Markdown里的写法一样就可以了：

```
console.log('hello world!')
```

Slidev支持 Prism 和 Shiki 作为语法高亮器，我们可以在扉页配置里自由切换

Slidev更厉害的地方在于，当你需要在演示文稿中做修改时，只需在语言 id 后添加 {monaco} —— 即可将该代码块变为一个功能齐全的 Monaco 编辑器：

```ts {monaco}
console.log('hello world!')
```

在这里插入图片描述

内联样式

我们还可以在 Markdown 中直接使用 <style> 标签来覆盖当前幻灯片的样式

# This is Red<style> h1 { color: red } </style>---# Next slide is not affected

注意哦，Markdown 中的 <style> 标签均为 scoped

公式图表

Slidev还有一个非常强大实用的功能，就是支持插入公式和图表，包括 Latex、流程图等

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

注意哦，这里的图表可不是直接插入图片，而且使用了Mermaid这个图表工具

具体使用方法可以看Mermaid

备注

我们可以为每张幻灯片编写备注，便于在演讲者模式中供参考

使用方法：在 Markdown 中，每张幻灯片中的最后一个注释块将被视为备注

---
layout: cover
---# 第 1 页This is the cover page.<!-- 这是一条备注 -->---# 第 2 页<!-- 这不是一条备注，因为它在幻灯片内容前 -->The second page<!--这是另一条备注-->

在这里插入图片描述

静态资源

和编写 Markdown 的方式一样，我们可以使用本地或远程的 URL 的图片

  • 远程资源：![Remote Image](<https://sli.dev/favicon.png>)
  • 本地资源：![Local Image](/pic.png)（请将资源放置到根路径下的 public文件夹 中）
  • 自定义尺寸样式：<img src="/pic.png" class="m-40 h-40 rounded shadow" />

在这里插入图片描述

点击动画

如需为元素添加点击动画可以使用 v-click 指令或 <v-click> 组件：

<!-- 组件用法：在你按下 “下一步” 之前，这是不可见的 -->
<v-click>Hello World</v-click><v-clicks>
- Item 1
- Item 2
- Item 3
- Item 4
</v-clicks>

v-click-hide与 v-click 相同，但不是让元素出现，而是让元素在点击后不可见

<div v-click-hide>Slidev</div>

v-click="n" 可以规定显示顺序：

<div v-click="0"></div><div v-click="2"></div><div v-click="1"></div>

Slidev也支持自定义点击数量，有时候在页面中引入大量 v-click 可能会导致切换到下一页所花费的点击数量与你所想的不同，这是因为默认情况下，Slidev 会计算进入下一张幻灯片之前需要执行多少步

---
# 在进入下一页之前，需要点击8次
clicks: 8
---

vscode插件

在这里给大家推荐一款Slidev配套的利器

在vscode中有一款专门为Slidev准备的插件，我们在插件市场下载安装一下：

在这里插入图片描述

在这里插入图片描述

直接看安装完成之后的效果，是不是非常方便，侧边栏有PPT的目录还有每页的预览，简直是神器！

Slidev导出

导出PDF

导出为 PDF 或 PNG 的功能基于 Playwright 实现渲染

因此，使用此功能前需要安装 playwright-chromium

接下来我们来安装 playwright-chromium：

npm i -D playwright-chromium

接着使用如下命令即可将PPT导出为 PDF：

slidev export

稍作等待，即可在 ./slides-export.pdf 路径下看到你幻灯片的 PDF 文件

如果你想要导出使用暗色主题的幻灯片，请使用 --dark 选项：

slidev export --dark

默认情况下，Slidev 会将每张幻灯片导出为 1 页，并忽略点击动画。如果想将多个步骤的幻灯片，分解为多个页面，请使用 --with-clicks 选项。

slidev export --with-clicks

在这里插入图片描述

在这里插入图片描述

导出PNG

当为命令传入 --format png 选项时，Slidev 会将每张幻灯片导出为 PNG 图片格式。

slidev export --format png

在这里插入图片描述
在这里插入图片描述

静态部署

当编写完成后，为了让更多人在线看到我们的 PPT，我们可以选择将 PPT 构建为可部署的单页应用。

我们现在将幻灯片构建成可部署的单页应用（SPA）：

slidev build

生成的应用程序会保存在 dist/ 目录下，然后你可以将该目录部署在 GitHub Pages，Netlify，Vercel，等你想部署的任何地方。接着，就可以将你幻灯片的链接分享给任何人。

在这里插入图片描述

总结：

Slidev是一款功能强大、易于使用的幻灯片制作工具，可以帮助开发者快速制作出美观、专业的演示文稿，并且支持多种动画、转场效果和技术细节展示。

如果开发者需要制作汇报、技术分享等主题的演示文稿，Slidev绝对是一个值得尝试的工具。


http://www.ppmy.cn/news/1125215.html

相关文章

删除表中的数据

删除表中的数据

MySQL从小白到总裁完整教程目录:https://blog.csdn.net/weixin_67859959/article/details/129334507?spm1001.2014.3001.5502 语法格式: delete from 表名 where 记录匹配条件; 说明&#xff1a;如果**不写where**子句&#xff0c;表示无条件&#xff0c;删除表中的**所有记…
阅读更多...
Java 21 / JDK 21 (LTS) GA

Java 21 / JDK 21 (LTS) GA

Java 21 / JDK 21 已正式 GA&#xff0c;此版本是继 JDK 17 后的长期支持版本 (LTS)&#xff0c;Oracle 将为其提供至少八年的技术支持和更新。 本版本是Java SE平台21版的参考实现&#xff0c;由Java社区流程中的JSR 396指定。 正式稳定功能 JEP 444&#xff1a;虚拟线程JEP…
阅读更多...
【ODPS 新品发布第 2 期】实时数仓 Hologres：推出计算组实例/支持 JSON 数据/向量计算+大模型等新能力

【ODPS 新品发布第 2 期】实时数仓 Hologres：推出计算组实例/支持 JSON 数据/向量计算+大模型等新能力

云布道师 阿里云 ODPS 系列产品以 MaxCompute、DataWorks、Hologres 为核心&#xff0c;致力于解决用户多元化数据的计算需求问题&#xff0c;实现存储、调度、元数据管理上的一体化架构融合&#xff0c;支撑交通、金融、科研、等多场景数据的高效处理&#xff0c;是目前国内最…
阅读更多...
目标检测YOLO实战应用案例100讲-区域卷积网络在阴影环境目标检测上的研究与应用

目标检测YOLO实战应用案例100讲-区域卷积网络在阴影环境目标检测上的研究与应用

目录 前言 国内外研究现状 阴影检测模型研究现状 基于区域卷积网络的目标检测研究现状
阅读更多...
cheat 命令行帮助 备忘单

cheat 命令行帮助 备忘单

cheat 是一个命令行工具&#xff0c;允许你创建和查看交互式的备忘单&#xff08;cheatsheets&#xff09;。它旨在帮助 *nix 系统管理员记住那些他们经常使用但不常记得的命令选项。 wget https://github.com/cheat/cheat/releases/download/4.4.0/cheat-linux-amd64.gz gunz…
阅读更多...
uvm白皮书练习_ch2_ch222加入factory机制

uvm白皮书练习_ch2_ch222加入factory机制

uvm白皮书练习_ch2_ch222只有factory机制 factory机制的实现被集成在了一个宏中&#xff1a;uvm_component_utils。 这个宏所做的事情非常多&#xff0c;其中之一就是将my_driver登记在UVM内部的一张表中&#xff0c;这张表是factory功能实现的基础。 自动创建一个类的实例并调…
阅读更多...
SpringBoot 学习（一）自动装配

SpringBoot 学习（一）自动装配

本系列文章为【狂神说 Java 】视频的课堂笔记&#xff0c;若有需要可配套视频学习。 1.1 pom.xml (1) 父工程&#xff08; spring-boot-starter-parent &#xff09; 核心依赖&#xff0c;静态资源过滤等配置。编写或导入 springboot 依赖时不需要指定版本号&#xff0c;继承…
阅读更多...
【数据库原理与应用（第3版）】第三章：关系数据库理论（选择与填空）

【数据库原理与应用（第3版）】第三章：关系数据库理论（选择与填空）

目录 一、填空题二、选择题 一、填空题 关系模型用单一的数据结构&#xff0c;即【二维表】来描述实体以及实体之间的联系。关系数据模型中的关系可用二维表来表示&#xff0c;表中的一行对应关系的一个【元组】&#xff0c;表中的一列对应关系的一个【属性】。早期的关系操作…
阅读更多...
最新文章

Copyright @ 2022~2023