Comprehensive guide for Slidev - a web-based presentation framework for developers. Covers Markdown syntax, layouts, components, animations, theming, and exporting. Use this skill when creating or working with developer presentations using Slidev.
Instrucciones de origen · Vista previa de solo lectura
name
slidev
description
Comprehensive guide for Slidev - a web-based presentation framework for developers. Covers Markdown syntax, layouts, components, animations, theming, and exporting. Use this skill when creating or working with developer presentations using Slidev.
Slidev
Overview
Slidev is a presentation platform for developers that enables creating slides using Markdown while leveraging Vue and web technologies for interactive, pixel-perfect designs. This skill provides complete guidance for creating, customizing, and exporting Slidev presentations.
Use this skill when:
Creating new developer presentations
Working with Markdown-based slides
Adding interactive components and animations
Customizing slide layouts and themes
Integrating code blocks with syntax highlighting
Exporting presentations to PDF, PPTX, or PNG
Setting up Slidev projects
Quick Start
Installation and Setup
Create a new Slidev presentation:
# Using pnpm (recommended)
pnpm create slidev
# Using npm
npm init slidev
# Using yarn
yarn create slidev
# Using bun
bun create slidev
---
layout: center
background: ./images/bg.jpg
class: text-white
---# Centered Slide
Content here
Code Blocks
Code with syntax highlighting:
```ts
console.log('Hello, World!')
```
With line numbers:
```ts {lines:true}
function greet(name: string) {
console.log(`Hello, ${name}!`)
}
```
With line highlighting:
```ts {2,4-6}
function calculate() {
const x = 10 // highlighted
const y = 20
const sum = x + y // highlighted
const product = x * y // highlighted
const difference = x - y // highlighted
return sum
}
```
Presenter Notes
Add notes at the end of slides using comment blocks:
# Slide Title
Content visible to audience
<!--
Notes for presenter only
Can include **markdown** and HTML
-->
Layouts
Using Layouts
Specify layout in frontmatter:
---
layout: cover
---# Presentation Title
Built-in Layouts
Basic Layouts:
default - Standard layout for any content
center - Centers content on screen
cover - Opening slide for presentations
end - Closing slide
none - Unstyled layout
Content Layouts:
intro - Introduction with title and author details
section - Marks new presentation sections
quote - Displays quotations with emphasis
fact - Highlights data or facts prominently
statement - Features affirmations as main content
full - Utilizes entire screen space
Image Layouts:
image - Full-screen image display
image-left - Image on left, content on right
image-right - Image on right, content on left
Iframe Layouts:
iframe - Full-screen web page embedding
iframe-left - Web page on left side
iframe-right - Web page on right side
Multi-Column Layouts:
two-cols - Two-column content separation
two-cols-header - Header spanning both columns with left/right split
Two-Column Layout Example
---
layout: two-cols
---# Left Column
Content for left side
::right::
# Right Column
Content for right side
Two-Column with Header
---
layout: two-cols-header
---# Header Across Both Columns
::left::
Left column content
::right::
Right column content
Components
Built-in Components
Navigation:
<Link> - Navigate between slides
<Arrow> - Directional lines with customization
<VDragArrow> - Draggable arrows
Text:
<AutoFitText> - Auto-sizing text to fit container
<TitleRenderer> - Display parsed slide titles
<Toc> - Table of contents generation
Media:
<Youtube> - Embed YouTube videos
<Tweet> - Embed Twitter posts
<SlidevVideo> - HTML5 video with autoplay
Utilities:
<SlideCurrentNo> - Current slide number
<SlidesTotal> - Total slide count
<Transform> - Scaling and transformation
<LightOrDark> - Theme-based content rendering
<RenderWhen> - Conditional rendering by context
<VSwitch> - Cycle between content on click
<VDrag> - Draggable functionality
Component Usage Examples
<Youtubeid="dQw4w9WgXcQ" /><Tweetid="1234567890" /><Arrowx1="100"y1="100"x2="200"y2="200" /><AutoFitText:max="300":min="20">
This text will auto-size
</AutoFitText><TocminDepth="1"maxDepth="2" />
Custom Components
Create custom Vue components in ./components/ directory. They are auto-imported without manual registration.
