slidev-quick-start

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Slidev Quick Start

Slidev 快速入门

This skill helps you get started with Slidev, the presentation framework for developers. You'll learn how to create a new project, understand the basic syntax, and run your first presentation.

本技能将帮助你快速上手面向开发者的演示文稿框架Slidev。你将学习如何创建新项目、理解基础语法，以及运行你的第一个演示文稿。

When to Use This Skill

何时使用本技能

Creating a new Slidev presentation from scratch
Setting up Slidev for the first time
Understanding basic Slidev concepts
Converting an existing presentation to Slidev
Quickly scaffolding a presentation structure

从零开始创建新的Slidev演示文稿
首次搭建Slidev环境
理解Slidev基础概念
将现有演示文稿转换为Slidev格式
快速搭建演示文稿结构

Prerequisites

前置要求

Node.js: Version 18.0 or higher
Package Manager: npm, pnpm, or yarn
Text Editor: VS Code recommended (with Slidev extension)

Node.js：版本18.0或更高
包管理器：npm、pnpm或yarn
文本编辑器：推荐使用VS Code（搭配Slidev扩展）

Creating a New Project

创建新项目

Option 1: Using npm init (Recommended)

选项1：使用npm init（推荐）

bash

npm init slidev@latest

This interactive command will:

Ask for your project name
Create the project directory
Install dependencies
Start the dev server

bash

npm init slidev@latest

这个交互式命令将：

询问你的项目名称
创建项目目录
安装依赖
启动开发服务器

Option 2: Manual Setup

选项2：手动搭建

bash

undefined

bash

undefined

Create project directory

创建项目目录

mkdir my-presentation cd my-presentation

Initialize package.json

初始化package.json

npm init -y

Install Slidev

安装Slidev

npm install @slidev/cli @slidev/theme-default

Create slides file

创建幻灯片文件

touch slides.md


Add scripts to `package.json`:

```json
{
  "scripts": {
    "dev": "slidev --open",
    "build": "slidev build",
    "export": "slidev export"
  }
}

touch slides.md


在`package.json`中添加脚本：

```json
{
  "scripts": {
    "dev": "slidev --open",
    "build": "slidev build",
    "export": "slidev export"
  }
}

Your First Presentation

你的第一个演示文稿

Create

slides.md

with this content:

markdown

---
theme: default
title: My First Presentation
info: |
  ## My First Slidev Presentation
  Created with Slidev
class: text-center
drawings:
  persist: false
transition: slide-left
---

创建

slides.md

并写入以下内容：

markdown

---
theme: default
title: My First Presentation
info: |
  ## My First Slidev Presentation
  Created with Slidev
class: text-center
drawings:
  persist: false
transition: slide-left
---

Welcome to Slidev

Presentation slides for developers

<div class="pt-12"> <span @click="$slidev.nav.next" class="px-2 py-1 rounded cursor-pointer" hover="bg-white bg-opacity-10"> Press Space for next page <carbon:arrow-right class="inline"/> </span> </div>

Presentation slides for developers

What is Slidev?

Slidev is a slides maker and presenter designed for developers

📝 Markdown-based - focus on content with Markdown
🎨 Themable - themes can be shared and installed
🧑‍💻 Developer Friendly - code highlighting, live coding
🤹 Interactive - embed Vue components
🎥 Recording - built-in recording and camera view
📤 Portable - export to PDF, PPTX, or host online

layout: center

Slidev is a slides maker and presenter designed for developers

📝 Markdown-based - focus on content with Markdown
🎨 Themable - themes can be shared and installed
🧑‍💻 Developer Friendly - code highlighting, live coding
🤹 Interactive - embed Vue components
🎥 Recording - built-in recording and camera view
📤 Portable - export to PDF, PPTX, or host online

layout: center

Thank You!

Documentation · GitHub

undefined

Documentation · GitHub

undefined

Running Your Presentation

运行你的演示文稿

bash

undefined

bash

undefined

Start development server

启动开发服务器

npm run dev

Or directly with npx

或直接使用npx

npx slidev


Your presentation will be available at `http://localhost:3030`

npx slidev


你的演示文稿将在`http://localhost:3030`地址可用

Essential Keyboard Shortcuts

常用键盘快捷键

Shortcut	Action
`Space` / `→`	Next slide/animation
`←`	Previous slide/animation
`↑` / `↓`	Navigate slides (skip animations)
`o`	Overview mode
`d`	Toggle dark mode
`f`	Fullscreen
`g`	Go to slide
`Esc`	Exit overview/fullscreen

快捷键	操作
`Space` / `→`	下一张幻灯片/动画
`←`	上一张幻灯片/动画
`↑` / `↓`	导航幻灯片（跳过动画）
`o`	概览模式
`d`	切换深色模式
`f`	全屏
`g`	跳转到指定幻灯片
`Esc`	退出概览/全屏模式

Slide Separator

幻灯片分隔符

Use

---

(three dashes) surrounded by blank lines to separate slides:

markdown

undefined

使用前后带有空白行的

---

（三个短横线）来分隔幻灯片：

markdown

undefined

Slide 1

Content for slide 1

Slide 2

Content for slide 2

Slide 3

Content for slide 3

undefined

Content for slide 3

undefined

Frontmatter Configuration

前置元数据配置

The first slide's frontmatter configures the entire presentation:

yaml

---

第一张幻灯片的前置元数据用于配置整个演示文稿：

yaml

---

Presentation metadata

演示文稿元数据

theme: seriph # Theme name title: My Presentation # Browser tab title info: | # Presentation info

About

Description here

theme: seriph # 主题名称 title: My Presentation # 浏览器标签标题 info: | # 演示文稿信息

关于

此处填写描述

Appearance

外观设置

colorSchema: auto # auto, light, or dark class: text-center # CSS classes for first slide background: /image.jpg # Background image

colorSchema: auto # auto、light或dark class: text-center # 第一张幻灯片的CSS类 background: /image.jpg # 背景图片

Features

功能设置

drawings: persist: false # Save drawings between reloads transition: slide-left # Default transition highlighter: shiki # Code highlighter

drawings: persist: false # 重新加载后保留绘图内容 transition: slide-left # 默认切换动画 highlighter: shiki # 代码高亮工具

Export

导出设置

exportFilename: slides # Export filename download: true # Show download button

undefined

exportFilename: slides # 导出文件名 download: true # 显示下载按钮

undefined

Adding Layouts

添加布局

Specify layouts per slide using frontmatter:

markdown

---
layout: cover
background: https://cover.sli.dev
---

使用前置元数据为单张幻灯片指定布局：

markdown

---
layout: cover
background: https://cover.sli.dev
---

Cover Slide

封面幻灯片

layout: two-cols

Left Column

左侧栏

Content here

::right::

内容此处

::right::

Right Column

右侧栏

Content here

layout: center

内容此处

layout: center

Centered Content

居中内容

undefined

undefined

Adding Code Blocks

添加代码块

markdown

undefined

markdown

undefined

Code Example

代码示例

```typescript interface User { id: number name: string email: string }

function greet(user: User): string { return

Hello, ${user.name}!

} ```

undefined

```typescript interface User { id: number name: string email: string }

function greet(user: User): string { return

Hello, ${user.name}!

} ```

undefined

Adding Speaker Notes

添加演讲者备注

Add HTML comments at the end of a slide for speaker notes:

markdown

undefined

在幻灯片末尾添加HTML注释作为演讲者备注：

markdown

undefined

My Slide

我的幻灯片

Important content here

undefined

此处为重要内容

undefined

Best Practices

最佳实践

Start Simple: Begin with basic Markdown, add features gradually
One Idea Per Slide: Keep slides focused
Use Layouts: Leverage built-in layouts for consistent design
Version Control: Commit
```
slides.md
```
to Git
Test Export Early: Verify PDF export works before presenting

从简开始：先从基础Markdown入手，逐步添加功能
每张幻灯片一个核心观点：保持幻灯片内容聚焦
使用布局：利用内置布局保证设计一致性
版本控制：将
```
slides.md
```
提交到Git
提前测试导出：在演示前确认PDF导出正常

Common Mistakes to Avoid

常见错误避免

❌ Missing blank lines around separators

markdown

undefined

❌ 分隔符前后缺少空白行

markdown

undefined

Slide 1

Slide 2


✓ **Correct separator syntax**
```markdown


✓ **正确的分隔符语法**
```markdown

Slide 1

Slide 2


❌ **Invalid frontmatter indentation**
```yaml
---
theme:seriph  # Missing space after colon
---

✓ Correct frontmatter

yaml

---
theme: seriph
---


❌ **前置元数据缩进错误**
```yaml
---
theme:seriph  # 冒号后缺少空格
---

✓ 正确的前置元数据

yaml

---
theme: seriph
---

Output Format

输出格式

When creating a new Slidev presentation, provide:

PROJECT STRUCTURE:
- slides.md (main presentation file)
- package.json (with dev/build/export scripts)
- Optional: public/ directory for assets

FIRST SLIDE FRONTMATTER:
---
theme: [recommended theme]
title: [presentation title]
---

SUGGESTED SLIDE STRUCTURE:
1. Title/Cover slide
2. Introduction/Agenda
3. Main content slides
4. Summary/Conclusion
5. Thank you/Contact slide

NEXT STEPS:
- Run `npm run dev` to start
- Edit slides.md to add content
- Use `o` key for overview

创建新Slidev演示文稿时，请提供：

项目结构：
- slides.md（主演示文稿文件）
- package.json（包含dev/build/export脚本）
- 可选：public/目录用于存放资源

第一张幻灯片前置元数据：
---
theme: [推荐主题]
title: [演示文稿标题]
---

建议的幻灯片结构：
1. 标题/封面幻灯片
2. 介绍/议程
3. 主要内容幻灯片
4. 总结/结论
5. 致谢/联系方式幻灯片

后续步骤：
- 运行`npm run dev`启动服务
- 编辑slides.md添加内容
- 按`o`键进入概览模式