Skip to content

Latest commit

 

History

History
274 lines (169 loc) · 8.28 KB

slidev.md

File metadata and controls

274 lines (169 loc) · 8.28 KB

使用slidev做出ppt教程


[toc]

特征

安装

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

使用npm

npm init slidev@latest

使用yarn

yarn create slidev

我们更倾向于将slidev全局安装

npm i -g @slidev/cli
yarn global add @slidev/cli

我们也可以使用yarn,先安装yarn

npm i -g yarn
yarn global add @slidev/cli

如果安装过慢,可以更换npm源或者yarn源

入门

我们简单的写一个hello.md

root@ubuntu:/slides# cat hello.md 
# hello word
## hello
# 区块链学习指南+笔记(最全)

##### [Facebook](https://www.facebook.com/profile.php?id=100034435372354) | [Website](https://telsacoin.io/) | [Blog](http://nsddd.top) | [Telegram](https://t.me/smile3293172751) | [Twitter](https://twitter.com/xxw3293172751) | [Linkedin](https://www.linkedin.cn/injobs/in/xiongxinwei-xiong-7606a0227) | [Donate](https://liberapay.com/xiongxinwei/donate)

---

### 导航
root@ubuntu:/slides# cat hello.md 
# hello word
## hello
# 区块链学习指南+笔记(最全)

##### [Facebook](https://www.facebook.com/profile.php?id=100034435372354) | [Website](https://telsacoin.io/) | [Blog](http://nsddd.top) | [Telegram](https://t.me/smile3293172751) | [Twitter](https://twitter.com/xxw3293172751) | [Linkedin](https://www.linkedin.cn/injobs/in/xiongxinwei-xiong-7606a0227) | [Donate](https://liberapay.com/xiongxinwei/donate)

---

### 导航

可以看到有三页

image-20220728203513233

  • 说明---可以分页、、
  • 最后一页以end结尾

LaTex公式

我们加入latex公式,发现也是支持的

---
$$
 {\color{Green} \begin{Vmatrix}
  &1  &2  &3  &4 \\
  &6  &1  &1  &4 \\
  &5  &4  &32  &32 \\
  &7  &345  &5  &2 \\
  &7  &8  &8  &2
\end{Vmatrix}} 
$$

$$
\left [ 0,1 \right )
$$

image-20220728204120469

主题

在 Slidev 中更换主题非常简单。在 frontmatter 中添加 theme: 配置即可。

---
theme: seriph
---

在服务启动后,它会自动提示你是否安装该主题:

? The theme "@slidev/theme-seriph" was not found in your project, do you want to install it now? › (Y/n)

或者你也可以手动安装:

$ npm install @slidev/theme-seriph

我们随便使用一个主题看看

---
theme: vuestorefront
---

好看

演讲者模式

进入演讲者模式有两种方法

一种是正常模式下直接点击,一种使用下面命令进入。

image-20220728220945934

image-20220728221302598

在这种模式下可以同步笔记痕迹,而且也可以同步鼠标。

这种模式下需要写注释,此时可以vs直接注释,注意注释一般写后面

image-20220728221820044

局域网同步

在终端提醒中有一个remote control,我们在下面输入

slidev README.md --remote

image-20220728222412617

但是我好像发现有点卡

编辑器集成

Slidev 带有一个集成的 CodeMirror 编辑器,可以立即重新加载并保存更改到文件中。

点击🖱️按钮来打开它。

image-20220729114104015

PDF

导出为 PDF 或 PNG 的功能基于 Playwright 实现渲染。因此,使用此功能前需要安装 playwright-chromium

安装 playwright-chromium

npm i -D playwright-chromium
npm i -D @playwright/test
npx playwright install

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

$ slidev export

image-20220729120552790

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

2022/07/29  12:04         4,076,506 slides-export.pdf

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

$ slidev export --dark

导出点击步骤

自 v0.21 起可用

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

$ slidev export --with-clicks

PNGs

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

$ slidev export --format png

单页应用(SPA)

请参阅 静态部署 章节。

版权声明

本书所有内容遵循 CC-BY-SA 3.0协议(署名-相同方式共享)http://zh.wikipedia.org/wiki/Wikipedia:CC-by-sa-3.0协议文本)