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

news2024/11/23 0:24:11

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: true
  persist: false
  presenterOnly: false
  syncAll: 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.coloradmin.cn/o/1041726.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

非专业投资者进行现货白银投资，如何开始？

非专业投资者进行现货白银投资，如何开始？

随着现货白银市场的不断发展&#xff0c;现货白银走势在先前一段时间内不断上涨&#xff0c;处于上升趋势&#xff0c;很多投资者顺势做多从中获得利润&#xff0c;近期&#xff0c;现货白银投资不断下跌转为下降趋势&#xff0c;也有很多投资者进行顺势投资。但是对于现货白银…
阅读更多...
1、Elasticsearch 8.X 概述与安装

1、Elasticsearch 8.X 概述与安装

第1章 Elasticsearch 8.X 概述 1.1 Elasticsearch 8.X 距 2019 年 Elasticsearch 上一大版本 7.0 发布至今已经过去了 3 年。2022 年 2 月 11 日&#xff0c;Elasticsearch 发布了全新的 8.0 正式版本&#xff0c;这着实给了我们不 小的惊喜&#xff01;新版本中通过改进 Elas…
阅读更多...
“优化”城市出行体验——山海鲸智慧交通解决方案

“优化”城市出行体验——山海鲸智慧交通解决方案

随着城市化进程的不断加速&#xff0c;城市交通问题也变得日益严重。为了改善城市交通体验、提高出行效率以及减少交通拥堵和环境污染。 山海鲸可视化打造城市智慧交通系列解决方案模板&#xff0c;解决方案以“数字孪生技术”为核心&#xff0c;通过数据分析、人工智能和物联…
阅读更多...
[XR-FRAME] 1.O4 文档导览 || XR-FRAME / 让场景更丰富，环境数据

[XR-FRAME] 1.O4 文档导览 || XR-FRAME / 让场景更丰富，环境数据

[XR-FRAME] 1.O4 文档导览 || XR-FRAME / 让场景更丰富&#xff0c;环境数据 文档导读&#xff0c;知识点整理。 开始 | 微信开放文档 新引入 标签 <xr-env env-data"xr-frame-team-workspace-day" /><xr-env> 描述&#xff1a;定义环境的标签。…
阅读更多...
如何去构建高效软件：耦合、内聚与结构化策略（软件设计师笔记）

如何去构建高效软件：耦合、内聚与结构化策略（软件设计师笔记）

&#x1f600;前言 随着软件开发变得越来越复杂&#xff0c;如何有效、有序地构建和维护这些复杂系统成为了每一个开发者和设计师所面临的挑战。对于这一挑战&#xff0c;结构化开发方法为我们提供了答案。这一方法不仅帮助我们理解如何将大型系统分解为小模块&#xff0c;还为…
阅读更多...
浅谈智能型电动机保护器在孟加拉水泥厂的应用

浅谈智能型电动机保护器在孟加拉水泥厂的应用

摘要&#xff1a;电动机设备是水泥企业中应用较广泛的动力装置&#xff0c;而水泥生产企业属于能耗高、污染大又需要设备连续不间断工作的行业&#xff0c;电动机作为水泥行业设备的动力来源&#xff0c;其安全、稳定可靠的运转对水泥行业的平稳生产起着至关重要的作用。 Abst…
阅读更多...
Linux驱动开发笔记

Linux驱动开发笔记

疑问 file_operation中每个操作函数的形参中inode的作用 设备树中compatible属性中厂商和型号如何填写 file_operation定义了Linux内核驱动的所有的操作函数&#xff0c;每个操作函数与一个系统调用对应&#xff0c;对于字符设备来说&#xff0c;常用的函数有&#xff1a;lls…
阅读更多...
【Vue.js】使用Element中的Mock.js搭建首页导航左侧菜单---【超高级教学】

【Vue.js】使用Element中的Mock.js搭建首页导航左侧菜单---【超高级教学】

一&#xff0c;Mock.js 1.1 认识Mock.js Mock.js是一个用于前端开发中生成随机数据、模拟接口响应的 JavaScript 库。模拟数据的生成器&#xff0c;用来帮助前端调试开发、进行前后端的原型分离以及用来提高自动化测试效率 总结来说&#xff0c;Element中的Mock.js是一个用于…
阅读更多...
数据安全态势管理：什么是事实，什么是虚构？

数据安全态势管理：什么是事实，什么是虚构？

考虑到组织存储大量数据的日益复杂的云环境&#xff0c;数据安全态势管理 ( DSPM )的兴起并不令人意外。使组织能够全面了解云数据资产和敏感数据的安全状况的流程对于当今的安全团队来说非常有价值。 尽管 DSPM 的重要性日益凸显&#xff0c;但人们对于它能为企业做什么和不能…
阅读更多...
Qt中额外复制新类到工程中出现无法解析的外部符号

Qt中额外复制新类到工程中出现无法解析的外部符号

无法解析的外部符号 “public: virtual struct QMetaObject const * __cdecl FormCloudFilter::metaObject(v 错误原因&#xff1a;在C项目中&#xff0c;新添加了类之后&#xff0c;编译出现错误&#xff0c;原因是我们新添加的类未被Qt编译成moc文件。 解决方法&#xff1a; …
阅读更多...
SpringCloud 学习（三）Ribbon 和 Feign

SpringCloud 学习（三）Ribbon 和 Feign

4. Netflix.Ribbon 4.1 简介 (1) 概念 Spring Cloud Ribbon 是基于 Netflix Ribbon 实现的一套客户端负载均衡工具。 (2) 负载均衡&#xff08;LB&#xff1a;LoadBalance&#xff09;和集群架构 应用集群&#xff1a;将同一应用部署到多台机器上&#xff0c;组成处理集群&…
阅读更多...
文档升级 | iTOP-RK3568开发板ADB工具的安装和使用

文档升级 | iTOP-RK3568开发板ADB工具的安装和使用

iTOP -RK3568开发板使用手册更新&#xff0c;后续资料会不断更新&#xff0c;不断完善&#xff0c;帮助用户快速入门&#xff0c;大大提升研发速度。 《iTOP-3568开发板ADB使用手册》进行了文档升级&#xff0c;对ADB工具的安装和使用进行了更全面的步骤介绍。 第1章 安装adb工…
阅读更多...
git revert 撤销之前的提交

git revert 撤销之前的提交

git revert 用来撤销之前的提交&#xff0c;它会生成一个新的 commit id 。 输入 git revert --help 可以看到帮忙信息。 git revert commitID 不编辑新的 commit 说明 git log 找到需要撤销的 commitID &#xff0c; 然后执行 git revert commitID &#xff0c;会提示如下…
阅读更多...
DataGrip初始化设置

DataGrip初始化设置

DataGrip初始化设置 自定义设置 具体配置项 Customize —> Allsettins… 外观 退出IDE之前无需确认 启动IDE自动打开之前的项目 Appearance & Behavior —> System Settings —> Confirm before exiting the IDE Appearance & Behavior —> System Settin…
阅读更多...
写一个Chrome浏览器插件（manifest v3）

写一个Chrome浏览器插件（manifest v3）

目录 1、创建manifest.json 文件 2、开始写popup页面以及对应的逻辑。 2.1 popup 页面 2.2 后台运行 background.js 2.3 content.js 2.4 popup页面的js文件 3、chrome 浏览器加载本项目 4、参考文档 1、创建manifest.json 文件 首先需要在项目的根目录下创建manifes…
阅读更多...
深入剖析Redis系列- Redis数据结构之哈希

深入剖析Redis系列- Redis数据结构之哈希

1.11.5哈希类型(hash) Redis的hash 是一个string类型的key和value的映射表&#xff0c;这里的value是一系列的键值对&#xff0c;hash特别适合用于存储对象。 哈希类型的数据操作总的思想是通过key和field操作value&#xff0c;key是数据标识&#xff0c;field是域&#xff0c;…
阅读更多...
基于SSM+Vue的舞蹈网站

基于SSM+Vue的舞蹈网站

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用Vue技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…
阅读更多...
大二上Redis学习笔记

大二上Redis学习笔记

redis非关系型数据库NOSQL&#xff0c;用c语言编写的,基于内存的数据库&#xff0c;每秒支持十几万的读写操作&#xff0c;性能远超数据库&#xff0c;还支持集群、分布式、主从同步等配置。 Redis基本功能 1 发布订阅系统 2 地图信息分析 3 计时器和计数器 redis运行的图形界…
阅读更多...
【腾讯云TDSQL-C Serverless 产品体验】使用 Python向TDSQL-C添加读取数据实现词云图

【腾讯云TDSQL-C Serverless 产品体验】使用 Python向TDSQL-C添加读取数据实现词云图

关于TDSQL-C Serverless介绍 TDSQL-C 是腾讯云自主研发的新一代云原生关系型数据库。 它融合了传统数据库、云计算和新硬件技术的优势,100%兼容 MySQL,为用户提供具有极致弹性、高性能、高可用性、高可靠性和安全性的数据库服务。 TDSQL-C 实现了超过百万每秒的高吞吐量,支持…
阅读更多...
SpringCloud 学习（四）Hystrix

SpringCloud 学习（四）Hystrix

6. Netflix.Hystrix 6.1 简介 ● 扇出 多服务之间调用&#xff0c;若微服务 A 调用微服务 B 和微服务 C&#xff0c;微服务 B 和 微服务 C 又调用其他微服务&#xff0c;这就是扇出 ● 服务雪崩 若扇出的链路上某个微服务的调用响应时间过长或者不可用&#xff0c;么此扇出…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023