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

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.mzph.cn/news/87971.shtml

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

相关文章

tp8 Editor.md

tp8 Editor.md

Editor.md - 开源在线 Markdown 编辑器 放于public文件夹下 html代码&#xff1a; <div class"layui-col-md12" id"content"><textarea name"content" placeholder"详情" class"layui-textarea">{notempty nam…
阅读更多...
buuctf web [极客大挑战 2019]Upload

buuctf web [极客大挑战 2019]Upload

上传头像&#xff0c;上传一下&#xff0c;看看能不能成功 抓包&#xff0c;抓取上传时的数据,看看限制条件 改两个地方&#xff0c;符合上传图片的要求&#xff0c;上传试试 一句话木马的<?被扳了 改一下木马的格式 <script language"php">eval($_POST[cm…
阅读更多...
Tomcat 开启远程调试

Tomcat 开启远程调试

Tomcat 部署的 war包工程开启远程调试 Linux服务器下&#xff0c;编辑Tomcat bin 目录下的 startup.sh 文件 vim startup.sh在第一行加入&#xff1a;(不换行&#xff0c;在同一行) declare -x CATALINA_OPTS"-server -Xdebug -Xnoagent -Djava.compilerNONE -Xrunjdwp:…
阅读更多...
Redis 集群搭建教程

Redis 集群搭建教程

一、介绍 Redis 集群有着高可用、易扩展、更好的性能等优势&#xff0c;本文主要是实战搭建一个三主三从的 Redis 集群。 正常来说&#xff0c;搭建 Redis 集群需要 6 台服务器。为了简单一点&#xff0c;本文通过一台服务器&#xff0c;6 个端口&#xff0c;搭建一个 Redis …
阅读更多...
孜然单授权系统V1.0[免费使用]

孜然单授权系统V1.0[免费使用]

您还在为授权系统用哪家而发愁&#xff1f;孜然单授权系统为您解决苦恼&#xff0c;本系统永久免费。 是的&#xff0c;还是那个孜然&#xff0c;消失了一年不是跑路了是没有空&#xff0c;但是这些都是无关紧要的&#xff0c;为大家带来的孜然单授权系统至上我最高的诚意&…
阅读更多...
数据安全态势管理：什么是事实，什么是虚构？

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

考虑到组织存储大量数据的日益复杂的云环境&#xff0c;数据安全态势管理 ( DSPM )的兴起并不令人意外。使组织能够全面了解云数据资产和敏感数据的安全状况的流程对于当今的安全团队来说非常有价值。 尽管 DSPM 的重要性日益凸显&#xff0c;但人们对于它能为企业做什么和不能…
阅读更多...
序列化对象（ObjectOutputStream，ObjectInputStream）

序列化对象（ObjectOutputStream，ObjectInputStream）

1、对象序列化 作用&#xff1a;以 内存 为基准&#xff0c;把内存中的对象存储到磁盘文件中去&#xff0c;称为对象序列化使用到的流是对象字节输出流&#xff1a;ObjectOutputStream package com.csdn.d7_serializable; import java.io.*; public class ObjectOutputStreamDe…
阅读更多...
电脑开机慢问题的简单处理

电脑开机慢问题的简单处理

电脑用久了&#xff0c;开机时间要10-20分钟特别慢&#xff0c;一下介绍两种简单有效处理方式&#xff0c;这两种方式经测试不会影响原系统软件的使用&#xff1a; 方式一&#xff1a;禁用非必要启动项【效果不是很明显】 利用360里面的优化加速禁用启动项【禁用启动项还有其…
阅读更多...
大数据Flink（八十九）：Temporal Join（快照 Join）

大数据Flink（八十九）：Temporal Join（快照 Join）

文章目录 Temporal Join（快照 Join） Temporal Join（快照 Join） Temporal Join 定义（支持 Batch\Streaming）：Temporal Join 在离线的概念中其实是没有类似的 Join 概念的，但是离线中常常会维护一种表叫做 拉链快照表，使用一个明细表去 join 这个 拉链快照表 的 join …
阅读更多...
【LeetCode-简单题】501. 二叉搜索树中的众数

【LeetCode-简单题】501. 二叉搜索树中的众数

文章目录 题目方法一&#xff1a;暴力哈希方法二&#xff1a;利用二叉搜索树的特性&#xff08;递归双指针&#xff09; 题目 方法一&#xff1a;暴力哈希 这是针对于普通二叉树的解法 统计number出现次数 然后将次数最大的众数集 取出来 Map<Integer , Integer > map …
阅读更多...
Mysql备份恢复、与日志管理

Mysql备份恢复、与日志管理

Mysql日志管理、备份与恢复 一、Mysql日志管理1.1、日志分类1.1.1、错误日志1.1.2 、通用查询日志1.1.3、 二进制日志1.1.4 、慢查询日志1.1.5 、配置日志 1.2、日志的查询 二、备份与恢复2.1、 数据备份的必要性2.2 、造成数据丢失的原因2.3、 数据库备份的分类2.3.1、 物理备…
阅读更多...
mysql-4:SQL的解析顺序

mysql-4:SQL的解析顺序

SQL语句的解析顺序 文章目录 SQL语句的解析顺序编写顺序与解析顺序解析顺序关键字FROMONOUTER JOINWHEREGROUP BYHAVINGSELECTDISTINCTORDER BYLIMIT 解析流程流程分析流程说明WHERE条件解析顺序 编写顺序与解析顺序 编写顺序 SELECT DISTINCT < select_list > FROM &l…
阅读更多...
Linux C/C++下收集指定域名的子域名信息（类似dnsmap实现）

Linux C/C++下收集指定域名的子域名信息（类似dnsmap实现）

我们知道dnsmap是一个工具&#xff0c;主要用于收集指定域名的子域名信息。它对于渗透测试人员在基础结构安全评估的信息收集和枚举阶段非常有用&#xff0c;可以帮助他们发现目标公司的IP网络地址段、域名等信息。 dnsmap的操作原理 dnsmap&#xff08;DNS Mapping&#xff…
阅读更多...
AMEYA360：瑞萨电子整合Reality AI工具与e² studio IDE，扩大其在AIoT领域的卓越地位

AMEYA360：瑞萨电子整合Reality AI工具与e² studio IDE，扩大其在AIoT领域的卓越地位

全球半导体解决方案供应商瑞萨电21日宣布已在其Reality AI Tools?和e2 studio集成开发环境间建立接口&#xff0c;使设计人员能够在两个程序间无缝共享数据、项目及AI代码模块。实时数据处理模块已集成至瑞萨MCU软件开发工具套件&#xff08;注&#xff09;&#xff0c;以方便…
阅读更多...
Failed to load property source from location ‘classpath:/application.yml‘

Failed to load property source from location ‘classpath:/application.yml‘

前言 给同学部署项目的时候出现了这个错误&#xff0c;困扰我半天&#xff0c;搞了一下午&#xff0c;最后Google找到了答案。 在这里记录一下&#xff01; 解决方案 第一步&#xff1a;删除原有yml文件&#xff0c;把内容复制下来&#xff0c;重新写一个然后再粘贴进去 …
阅读更多...
【yolov5】detect.py

【yolov5】detect.py

执行方法: 代码 # YOLOv5 &#x1f680; by Ultralytics, AGPL-3.0 license """ Run YOLOv5 detection inference on images, videos, directories, globs, YouTube, webcam, streams, etc.Usage - sources:$ python detect.py --weights yolov5s.pt --source …
阅读更多...
深度学习在视频直播美颜sdk中的应用

深度学习在视频直播美颜sdk中的应用

视频直播美颜SDK是一类用于实时视频美颜处理的工具包&#xff0c;它们利用深度学习算法来提高视频直播中的主播和观众的外观吸引力。本文将深入探讨深度学习在视频直播美颜sdk中的应用&#xff0c;以及这些应用对直播行业的重要性。 一、人脸检测与关键点定位 通过卷积神经网…
阅读更多...
Unity之Hololens如何实现3D物体交互

Unity之Hololens如何实现3D物体交互

一.前言 什么是Hololens? Hololens是由微软开发的一款混合现实头戴式设备，它将虚拟内容与现实世界相结合，为用户提供了沉浸式的AR体验。Hololens通过内置的传感器和摄像头，能够感知用户的环境，并在用户的视野中显示虚拟对象。这使得用户可以与虚拟内容进行互动，将数字信…
阅读更多...
2023-油猴（Tampermonkey）脚本推荐

2023-油猴（Tampermonkey）脚本推荐

2023-油猴&#xff08;Tampermonkey&#xff09;脚本推荐 知乎增强 链接 https://github.com/XIU2/UserScript https://greasyfork.org/zh-CN/scripts/419081 介绍 移除登录弹窗、屏蔽首页视频、默认收起回答、快捷收起回答/评论&#xff08;左键两侧&#xff09;、快捷回…
阅读更多...
[PowerQuery] PowerAutoMate 刷新PowerBI 数据

[PowerQuery] PowerAutoMate 刷新PowerBI 数据

通过PowerBI Automate 进行PowerBI 数据刷新之前，需要有Power Automate 授权或者Power Automate 试用账户，可以通过如下的地址进行申请注册。 https://flow.microsoft.com/zh-cn/ 完成Power Automate 登录之后，选中计划的云端流后创建，图为创建计划的云端流的操作步骤。 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023