[toc]
- 📝 基于 Markdown - 使用您喜欢的编辑器和工作流程
- 🧑💻 开发人员友好- 内置语法突出显示、实时编码等。
- 🎨 Themable - 主题可以与 npm 包共享和使用。
- 🌈 通过Windi CSS或UnoCSS提供的时尚按需实用程序。
- 🤹 交互式- 无缝嵌入 Vue 组件。
- 🎙 演示者模式- 使用另一个窗口,甚至您的手机来控制您的幻灯片。
- 🧮 LaTeX - 内置 LaTeX 数学方程支持。
- 📰 图表- 创建带有文本描述的图表
- 🌟 图标- 直接从任何图标集中访问图标。
- 💻 Editors - 集成编辑器,或VS Code 的扩展
- 🎥 录制- 内置录制和摄像头视图。
- 📤 便携- 导出为 PDF、PNG,甚至是可托管的 SPA。
- ⚡️ 由Vite提供支持的快速即时重新加载。
- 🛠 Hackable - 使用 Vite 插件、Vue 组件或任何 npm 包。
Slidev需要Node.js的版本 >= 14.0.0
npm init slidev@latest
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)
---
### 导航
可以看到有三页
- 说明
---
可以分页、、 - 最后一页以
end
结尾
我们加入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 )
$$
在 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
---
进入演讲者模式有两种方法
一种是正常模式下直接点击,一种使用下面命令进入。
在这种模式下可以同步笔记痕迹,而且也可以同步鼠标。
这种模式下需要写注释,此时可以vs直接注释,注意注释一般写后面
在终端提醒中有一个remote control
,我们在下面输入
slidev README.md --remote
但是我好像发现有点卡
Slidev 带有一个集成的 CodeMirror 编辑器,可以立即重新加载并保存更改到文件中。
点击🖱️按钮来打开它。
导出为 PDF 或 PNG 的功能基于 Playwright 实现渲染。因此,使用此功能前需要安装
playwright-chromium
。
安装 playwright-chromium
:
npm i -D playwright-chromium
npm i -D @playwright/test
npx playwright install
接着,使用如下命令即可将你的幻灯片导出为 PDF:
$ slidev export
稍作等待,即可在 ./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
当为命令传入 --format png
选项时,Slidev 会将每张幻灯片导出为 PNG 图片格式。
$ slidev export --format png
请参阅 静态部署 章节。
本书所有内容遵循 CC-BY-SA 3.0协议(署名-相同方式共享)http://zh.wikipedia.org/wiki/Wikipedia:CC-by-sa-3.0协议文本)