slidev

name	slidev
description	Create and manage Slidev presentations with rich features like animations, code highlighting, and interactive elements. When users need to create slides, convert content to Slidev format, or enhance presentations with advanced features.

Slidev Presentation Toolkit

Overview

Slidev is a modern presentation tool for developers, combining the flexibility of Markdown with the power of Vue.js. This toolkit provides comprehensive guidance for creating, enhancing, and managing Slidev presentations with advanced features.

Quick Start

Create a New Slidev Project

# Install dependencies (if needed)
npm i -g pnpm

# Create a new Slidev project
pnpm create slidev

# Enter project directory
cd slidev-project

# Start development server
npm run dev

Generate Slidev Content

---
theme: seriph
title: My First Slidev Presentation
mdc: true
lineNumbers: true
---

---
layout: cover
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)
class: text-white
---

# Welcome to Slidev

## Modern Presentations for Developers

---
layout: center
---

# Key Features

<v-clicks>

- ✅ Markdown-driven
- ✅ Vue 3 components
- ✅ Real-time preview
- ✅ Code highlighting
- ✅ Rich animations
- ✅ Export to PDF/PPTX

</v-clicks>

Core Concepts

Presentation Structure

A typical Slidev presentation consists of:

slidev-project/
├── slides.md          # Main presentation file
├── components/        # Custom Vue components
├── pages/             # Imported slides
├── snippets/          # Code snippets
├── package.json       # Project configuration
└── README.md          # Project documentation

Markdown Syntax

Slidev extends standard Markdown with special syntax for slides:

# Slide Title

Content...

---

# Next Slide

More content...

Animation System

Click Animations

<!-- Component usage -->
<v-click>Click to reveal</v-click>

<!-- Directive usage -->
<div v-click>Click to reveal</div>

<!-- Show after previous click -->
<v-after>Show after previous</v-after>

<!-- List animation -->
<v-clicks>

- Item 1
- Item 2
- Item 3

</v-clicks>

Motion Animations

<div
  v-motion
  :initial="{ x: -80 }"
  :enter="{ x: 0 }"
  :leave="{ x: 80 }"
>
  Animated Element
</div>

Slide Transitions

---
transition: slide-left
---

# Slide with Transition

Code Features

Enhanced Code Blocks

```ts {2-3|5}{lines:true,startLine:2}
function calculate(
  a: number,
  b: number,
  operation: 'add' | 'subtract'
): number {
  if (operation === 'add') {
    return a + b
  } else {
    return a - b
  }
}

Monaco Editor Integration

```ts {monaco}
console.log('Interactive code editor')

Code Comparison

```ts {monaco-diff}
console.log('Original')
~~~
console.log('Modified')

## Advanced Features

### Shiki Magic Move

**Best Use Case**: When encountering code changes or comparison scenarios, using Shiki Magic Move can create smoother transition effects, allowing the audience to clearly see the code change process.

```markdown
````md magic-move
```js
console.log('Step 1')

console.log('Step 2')

console.log('Step 3')

```

### Speaker Notes

You can also create speaker notes for each slide. They will appear in the 📖 User Interface📖 User Interface for your reference during the presentation.

Comment blocks at the end of each slide are treated as notes for that slide:

```markdown
layout: cover

# First Page

Cover page

<!-- This is a **note** -->

# Second Page

<!-- This is NOT a note because it's not at the end of the slide -->

Content for the second page

<!-- 
This is _another_ note
-->
```

Notes also support rendering Markdown and HTML.

#### Click Markers

For some slides, you may have long notes and find it hard to locate your current position. Slidev supports click markers, allowing you to highlight and automatically scroll to the part of your notes that corresponds to the content being shown.

Place `[click]` markers at the beginning of any line in your notes to use them when you need to jump to another click. You can use `[click:{n+1}]` to skip n clicks. For example:

```markdown
<!--
Content before the first click

[click] This will be highlighted after the first click

This will also be highlighted after the first click

- [click] This list item will be highlighted after the second click

[click:3] Final click (skipping two clicks)
-->
```

Slidev splits the content between click markers and highlights them in the speaker notes, synchronized with your slide progress.

### LaTeX Support

```markdown
# Mathematical Formulas

Einstein's equation: $E = mc^2$

$$
\sum_{i=1}^{n} i = \frac{n(n+1)}{2}
$$
```

### Mermaid Diagrams

```markdown
```mermaid
graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Action 1]
    B -->|No| D[Action 2]
    C --> E[End]
    D --> E
```
```

## Customization

### Theming

```markdown
---
# Use official theme
theme: seriph

# Or use custom theme
theme: ./my-theme

# Theme configuration
themeConfig:
  primary: '#667eea'
  background: '#f5f5f5'
---
```

### Scoped Styles

```markdown
# Custom Styled Slide

<style scoped>
h1 {
  color: #667eea;
  font-size: 3rem;
}
</style>
```

### Custom Components

```vue
<!-- components/Counter.vue -->
<template>
  <div class="counter">
    <button @click="count--">-</button>
    <span>{{ count }}</span>
    <button @click="count++">+</button>
  </div>
</template>

<script setup>
defineProps({
  count: { type: Number, default: 0 }
})
</script>
```

## Project Management

### Export Options

```bash
# Export to PDF
slidev export --format pdf

# Export to PPTX
slidev export --format pptx

# Export to PNG
slidev export --format png

# Build static website
slidev build
```

### Deployment

Deploy your Slidev presentation to various platforms:

```bash
# Vercel deployment
vercel

# Netlify deployment
netlify deploy

# GitHub Pages
npm run build
# Deploy dist folder to GitHub Pages
```

## Best Practices

### Content Structure

- Keep one idea per slide
- Use short, concise sentences
- Leverage visual hierarchy
- Use whitespace effectively

### Animation Usage

- Use animations to guide attention
- Keep animations consistent
- Avoid overusing animations
- Test animations on different devices

### Code Presentations

- Show only relevant code
- Use syntax highlighting
- Highlight key lines
- Consider interactive code examples

## Quick Reference

| Feature | Syntax |
|---------|--------|
| New slide | `---` |
| Slide layout | `---\nlayout: center\n---` |
| Click animation | `<v-click>` or `v-click` |
| List animation | `<v-clicks>` |
| Motion animation | `<v-motion>` |
| Code with line numbers | ` ```ts {lines:true} ` |
| Code with highlighting | ` ```ts {2-3} ` |
| Mermaid diagram | ` ```mermaid ` |
| LaTeX formula | `$E = mc^2$` or `$$E = mc^2$$` |

## Next Steps

- Explore [Slidev official documentation](https://sli.dev/)
- Browse [community themes](https://sli.dev/themes/)
- Join the [Slidev Discord community](https://discord.gg/8t8cs2hh9u)
- Check out [example presentations](https://sli.dev/examples/)