Slidev

官网

介于官网有相应文档，一些东西不会很详细，主打的是个人使用的坑之类的。

安装使用

本地安装

1. 安装node.js

略

2.安装Slidev

使用 NPM：

1
$ npm init slidev@latest

使用Yarn：

1
$ yarn create slidev

跟随命令行的提示，它将自动为你打开幻灯片，网址是 http://localhost:3030/。

同时包含了一些基本配置和简单的 demo，为你说明如何开始使用 Slidev。

构建单网页应用

因为build完之后可以在 dist 目录下将你的幻灯片生成静态 HTML 文件。

所以怎么放都可以

硬放到服务器上

  1. 完成PPT
  2. 执行命令slidev --base 你需要部署到的位置
  3. 粘（传）到服务器上（dist目录内所有），配置nginx。
  4. 访问相应IP或域名
例子
1
2
3
4
5
slidev --base /slidev

配置完nginx后访问:
 IP/slidev
 域名/slidev (配置域名)

导出（PDF）

安装 playwright-chromium：

1
$ npm i -D playwright-chromium

接着，使用如下命令即可将你的幻灯片导出为 PDF：

1
$ slidev export

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

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

1
$ slidev export --dark

导出点击步骤

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

1
$ slidev export --with-clicks

PNGs

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

1
$ slidev export --format png

VSCode插件推荐：slidev

slidev插件网址

优点：

  1. 代码中显示这是 第几页 幻灯片
  2. 侧边栏上半：可以显示每一页幻灯片名字及快速转到某一页幻灯片
  3. 侧边栏下半：slidev打开后可以实时显示幻灯片（VSCode内，不用再开浏览器）

Markdown 语法

分隔符

使用---来分割幻灯片。

两行 分隔符上下间隔两行，不然认不出来直接寄

扉页和布局

扉页尽量贴着前后的---

1
2
3
---
layout: cover
---

yaml格式的对象，语法如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
---
# 主题id 或 主题包名称
# 了解更多：https://sli.dev/themes/use.html
theme: 'default'
# 幻灯片的总标题，如果没有指定，那么将以第一张拥有标题的幻灯片的标题作为总标题
title: 'Slidev'
# titleTemplate for the webpage, `%s` will be replaced by the page's title
titleTemplate: '%s - Slidev'
# information for your slides, can be a markdown string
info: false

# 在单页（SPA）构建中启用 pdf 下载，也可以指定一个自定义 url
download: false
# 要导出文件的文件名称
exportFilename: 'slidev-exported.pdf'
# 语法高亮设置，可以使用 'prism' 或 'shiki' 方案
highlighter: 'prism'
# 在代码块中显示行号
lineNumbers: false
# 启用 monaco 编辑器，可以是 boolean，'dev' 或者 'build'
monaco: 'dev'
# 使用 vite-plugin-remote-assets 在本地下载远程资源，可以是 boolean，'dev' 或者 'build'
remoteAssets: false
# 控制幻灯片中的文本是否可以选择
selectable: true
# 启用幻灯片录制，可以是 boolean，'dev' 或者 'build'
record: 'dev'

# 幻灯片的配色方案，可以使用 'auto'，'light' 或者 'dark'
colorSchema: 'auto'
# vue-router 模式，可以使用 'history' 或 'hash' 模式
routerMode: 'history'
# 幻灯片的长宽比
aspectRatio: '16/9'
# canvas 的真实宽度，单位为 px
canvasWidth: 980
# 用于主题定制，会将属性 `x` 注入根样式 `--slidev-theme-x`
themeConfig:
  primary: '#5d8392'

# favicon 可以是本地文件路径，也可以是一个 URL
favicon: 'https://cdn.jsdelivr.net/gh/slidevjs/slidev/assets/favicon.png'
# 用于渲染图表的 PlantUML 服务器的 URL
plantUmlServer: 'https://www.plantuml.com/plantuml'
# 字体将从 Google 字体自动导入
# 了解更多：https://sli.dev/custom/fonts
fonts:
  sans: 'Roboto'
  serif: 'Roboto Slab'
  mono: 'Fira Code'

# 为所有幻灯片添加默认的 frontmatter
defaults:
  layout: 'default'
  # ...

# 绘制选项
# 了解更多：https://sli.dev/guide/drawing.html
drawings:
  enabled: true
  persist: false
  presenterOnly: false
  syncAll: true
---

布局很常用，下单列。

代码块

基础同Markdown

通过在语言名后写大括号的形式来指定特定行高亮{}

注：行号从1开始。

内联样式

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

Slidev支持windicss的原子化写法和指令集 例如@apply

静态资源

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

远程资源会缓存

本地资源请放到public文件夹