开始使用

总览

Slidev (slide + dev, /slʌɪdɪv/) 是基于 Web 的幻灯片制作和演示工具。它旨在让开发者专注在 Markdown 中编写内容,同时拥有支持 HTML 和 Vue 组件的能力,并且能够呈现像素级完美的布局,还在你的演讲稿中内置了互动的演示样例。

它使用了功能丰富的 markdown 文件来生成精美的幻灯片,具有即时重载的体验。它还拥有很多内置的集成功能,如实时编码、导出 PDF、演讲录制等。由于 Slidev 是由 web 驱动的,因此你可以使用它进行任何操作 —— 具有无限的可能性。

你可以在 为什么选 Slidev 部分了解更多关于本项目的设计初衷。

功能

  • 📝 Markdown 支持 —— 使用你最喜欢的编辑器和工作流编写 Markdown 文件
  • 🧑‍💻 开发者友好 —— 内置代码高亮、实时编码等功能
  • 🎨 可定制主题 —— 以 npm 包的形式共享、使用主题
  • 🌈 灵活样式 —— 使用 Windi CSS 按需使用的实用类和易用的内嵌样式表
  • 🤹 可交互 —— 无缝嵌入 Vue 组件
  • 🎙 演讲者模式 —— 可以使用另一个窗口,甚至是你的手机来控制幻灯片
  • 🎨 绘图 - 在你的幻灯片上进行绘图和批注
  • 🧮 LaTeX 支持 —— 内置了对 LaTeX 数学公示的支持
  • 📰 图表支持 —— 使用文本描述语言创建图表
  • 🌟 图标 —— 能够直接从任意图标库中获取图标
  • 💻 编辑器 —— 集成的编辑器,或者使用 VS Code 扩展
  • 🎥 演讲录制 —— 内置录制功能和摄像头视图
  • 📤 跨平台 —— 能够导出 PDF、PNG 文件,甚至是一个可以托管的单页应用
  • ⚡️ 快速 —— 基于 Vite 的即时重载
  • 🛠 可配置 —— 支持使用 Vite 插件、Vue 组件以及任何的 npm 包

技术栈

Slidev 使用了如下的工具和技术:

搭建你的第一个演讲稿


在线试用

sli.dev/new

本地创建

使用 NPM:

$ npm init slidev

使用 Yarn:

$ yarn create slidev

根据提示开始创建你的幻灯片吧!想要了解更多关于 Markdown 的语法,请阅读 语法指南

命令行界面

在安装了 Slidev 的项目里,你可以在你的 npm scripts 里使用 slidev 命令。

{
  "scripts": {
    "dev": "slidev", //  启动 dev server
    "build": "slidev build", // 构建生产环境的单页面应用
    "export": "slidev export" // 将幻灯片导出为 pdf 格式
  }
}

或者,你也可以使用 npx

$ npx slidev

执行 slidev --help 命令获取更多选项的详细信息。

Markdown 语法

Slidev 会读取位于项目根目录的 slides.md 文件,并将其转换为幻灯片。每当你修改 Markdown 文件,幻灯片的内容都会立刻随之更新。例如:

# Slidev

Hello World

---

# 第 2 页

直接使用代码块,能够实现代码高亮

//```ts
console.log('Hello, World!')
//```

---

# 第 3 页

请阅读 语法指南 获取更多关于 Slidev Markdown 语法的内容。