dev-slides
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseDeveloper Slides Skill
开发者幻灯片技能
Overview
概述
This skill enables creation of developer-focused presentations using Slidev - a Vue-powered presentation framework. Write slides in Markdown with live code demos, diagrams, and components.
本技能支持使用Slidev（一款基于Vue的演示框架）创建面向开发者的演示文稿。你可以使用Markdown编写幻灯片，包含实时代码演示、图表和组件。
How to Use
使用方法
- Describe your technical presentation needs
- I'll generate Slidev markdown with proper syntax
- Includes code blocks, diagrams, and Vue components
Example prompts:
- "Create a Vue.js workshop presentation"
- "Build slides with live code execution"
- "Make a technical talk with diagrams"
- "Create developer onboarding slides"
- 描述你的技术演示需求
- 我将生成符合语法规范的Slidev Markdown代码
- 内容包含代码块、图表和Vue组件
示例提示词：
- "创建一个Vue.js workshop演示文稿"
- "制作带有实时代码运行功能的幻灯片"
- "生成包含图表的技术演讲幻灯片"
- "创建开发者入职培训幻灯片"
Domain Knowledge
领域知识
Slidev Basics
Slidev基础
markdown
---
theme: default
title: My Presentation
---markdown
---
theme: default
title: My Presentation
---Welcome
Welcome
This is the first slide
This is the first slide
Second Slide
Second Slide
Content here
undefinedContent here
undefinedSlide Separators
幻灯片分隔符
markdown
--- # New horizontal slide
--- # Another slide
layout: center
---markdown
--- # New horizontal slide
--- # Another slide
layout: center
---Centered Content
Centered Content
undefinedundefinedLayouts
布局
markdown
---
layout: cover
---markdown
---
layout: cover
---Title Slide
Title Slide
layout: intro
layout: intro
Introduction
Introduction
layout: center
layout: center
Centered
Centered
layout: two-cols
layout: two-cols
Left
Left
::right::
::right::
Right
Right
layout: image-right image: ./image.png
layout: image-right image: ./image.png
Content with Image
Content with Image
undefinedundefinedCode Blocks
代码块
markdown
undefinedmarkdown
undefinedCode Example
Code Example
```ts {all|1|2-3|4}
const name = 'Slidev'
const greeting = `Hello, ${name}!`
console.log(greeting)
// Outputs: Hello, Slidev!
```
<!-- Lines highlighted step by step -->
undefined```ts {all|1|2-3|4}
const name = 'Slidev'
const greeting = `Hello, ${name}!`
console.log(greeting)
// Outputs: Hello, Slidev!
```
<!-- Lines highlighted step by step -->
undefinedMonaco Editor (Live Code)
Monaco编辑器（实时代码）
markdown
\`\`\`ts {monaco}
// Editable code block
function add(a: number, b: number) {
return a + b
}
\`\`\`
\`\`\`ts {monaco-run}
// Runnable code
console.log('Hello from Slidev!')
\`\`\`markdown
\`\`\`ts {monaco}
// Editable code block
function add(a: number, b: number) {
return a + b
}
\`\`\`
\`\`\`ts {monaco-run}
// Runnable code
console.log('Hello from Slidev!')
\`\`\`Diagrams (Mermaid)
图表（Mermaid）
markdown
\`\`\`mermaid
graph LR
A[Start] --> B{Decision}
B -->|Yes| C[Action 1]
B -->|No| D[Action 2]
\`\`\`
\`\`\`mermaid
sequenceDiagram
Client->>Server: Request
Server-->>Client: Response
\`\`\`markdown
\`\`\`mermaid
graph LR
A[Start] --> B{Decision}
B -->|Yes| C[Action 1]
B -->|No| D[Action 2]
\`\`\`
\`\`\`mermaid
sequenceDiagram
Client->>Server: Request
Server-->>Client: Response
\`\`\`Vue Components
Vue组件
markdown
<Counter :count="10" />
<Tweet id="1390115482657726468" />
<!-- Custom component -->
<MyComponent v-click />markdown
<Counter :count="10" />
<Tweet id="1390115482657726468" />
<!-- Custom component -->
<MyComponent v-click />Animations
动画效果
markdown
<v-click>
This appears on click
</v-click>
<v-clicks>
- Item 1
- Item 2
- Item 3
</v-clicks>
<!-- Or with v-click directive -->
<div v-click>Animated content</div>markdown
<v-click>
This appears on click
</v-click>
<v-clicks>
- Item 1
- Item 2
- Item 3
</v-clicks>
<!-- Or with v-click directive -->
<div v-click>Animated content</div>Frontmatter
Frontmatter
yaml
---
theme: seriph
background: https://source.unsplash.com/collection/94734566/1920x1080
class: text-center
highlighter: shiki
lineNumbers: true
drawings:
persist: false
css: unocss
---yaml
---
theme: seriph
background: https://source.unsplash.com/collection/94734566/1920x1080
class: text-center
highlighter: shiki
lineNumbers: true
drawings:
persist: false
css: unocss
---Examples
示例
Example: API Workshop
示例：API Workshop
markdown
---
theme: seriph
background: https://source.unsplash.com/collection/94734566/1920x1080
class: text-center
---markdown
---
theme: seriph
background: https://source.unsplash.com/collection/94734566/1920x1080
class: text-center
---REST API Workshop
REST API Workshop
Building Modern APIs with Node.js
<div class="pt-12">
<span @click="$slidev.nav.next" class="px-2 py-1 rounded cursor-pointer">
Press Space for next page <carbon:arrow-right />
</span>
</div>
layout: two-cols
Building Modern APIs with Node.js
<div class="pt-12">
<span @click="$slidev.nav.next" class="px-2 py-1 rounded cursor-pointer">
Press Space for next page <carbon:arrow-right />
</span>
</div>
layout: two-cols
What We'll Cover
What We'll Cover
<v-clicks>
- RESTful principles
- Express.js basics
- Authentication
- Error handling
- Testing
::right::
```ts
// Preview
const app = express()
app.get('/api/users', getUsers)
app.listen(3000)
```
<v-clicks>
- RESTful principles
- Express.js basics
- Authentication
- Error handling
- Testing
::right::
```ts
// Preview
const app = express()
app.get('/api/users', getUsers)
app.listen(3000)
```
Live Demo
Live Demo
```ts {monaco-run}
const users = [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' }
]
console.log(JSON.stringify(users, null, 2))
```
layout: center
```ts {monaco-run}
const users = [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' }
]
console.log(JSON.stringify(users, null, 2))
```
layout: center
Questions?
Questions?
undefinedundefinedInstallation
安装
bash
npm init slidev@latestbash
npm init slidev@latest