slidev

What this skill does

# Slidev - Presentation Framework Reference

Complete reference for creating developer education presentations with Slidev.

## Frontmatter Configuration

Every presentation starts with frontmatter in the first slide:

```yaml
---
theme: default
title: "Video Title Here"
info: |
  ## Module Description
  Brief description for metadata
author: Course Name
transition: slide-left
highlighter: shiki
drawings:
  persist: false
mdc: true
download: true
exportFilename: video-filename
aspectRatio: 16/9
canvasWidth: 980
fonts:
  sans: Inter
  mono: Fira Code
---
```

### Key Options

| Option | Purpose | Recommended |
|--------|---------|-------------|
| `theme` | Visual theme | `default`, `seriph` |
| `transition` | Slide animation | `slide-left`, `fade` |
| `highlighter` | Code syntax | `shiki` |
| `aspectRatio` | Slide ratio | `16/9` for video |
| `mdc` | MDC syntax | `true` |

---

## Slide Separators

```markdown
---          # New slide
---          # Another slide
```

Per-slide frontmatter:
```markdown
---
layout: center
class: text-center
transition: fade
---
```

---

## Built-in Layouts

### default
Standard content layout.
```markdown
---
layout: default
---
# Title
Content here
```

### center
Centered content for impact statements.
```markdown
---
layout: center
class: text-center
---
# Big Statement
```

### section
Major topic dividers.
```markdown
---
layout: section
---
# Part 1: Topic Name
```

### two-cols
Side-by-side content (code + explanation).
```markdown
---
layout: two-cols
layoutClass: gap-16
---
# Left Content

Explanation here

::right::

## Right Content

```code
example
```
```

### two-cols-header
Header spanning both columns.
```markdown
---
layout: two-cols-header
---
# Header Spans Both

::left::
Left content

::right::
Right content
```

### image-right / image-left
Image with content.
```markdown
---
layout: image-right
image: /path/to/image.jpg
backgroundSize: cover
---
# Content Side
Explanation here
```

### fact
Emphasize statistics.
```markdown
---
layout: fact
---
# 100%
Of modern C++ should use smart pointers
```

### quote
Attribution quotes.
```markdown
---
layout: quote
---
# "Quote text here"
Author Name
```

### intro
Speaker/topic introduction.
```markdown
---
layout: intro
---
# Topic Name
Introduction content
```

### end
Closing slide.
```markdown
---
layout: end
---
# Thank You
Call to action
```

---

## Code Blocks

### Basic Syntax Highlighting
````markdown
```python
def greet(name):
    return f"Hello, {name}!"
```
````

### Line Highlighting
````markdown
```python {2,4}
def calculate(x, y):
    result = x + y      # Highlighted
    print(result)
    return result       # Highlighted
```
````

### Click-Based Progressive Reveal
````markdown
```python {1|2-3|4-5|all}
def process(items):
    valid = [x for x in items if x > 0]
    sorted_items = sorted(valid)
    total = sum(sorted_items)
    return total
```
````

Pattern: `{step1|step2|step3|all}` - each `|` is a click.

### Line Numbers
````markdown
```python {lines:true}
def factorial(n):
    if n <= 1:
        return 1
    return n * factorial(n - 1)
```
````

### Custom Start Line
````markdown
```python {lines:true,startLine:42}
# Code starting at line 42
```
````

### Max Height (Scrollable)
````markdown
```python {maxHeight:'200px'}
# Long code that scrolls
```
````

### Monaco Editor (Interactive)
````markdown
```typescript {monaco}
// Editable code
const x = 5;
```
````

### Monaco Runner (Execute)
````markdown
```typescript {monaco-run}
console.log("Runs live!");
```
````

### Monaco Diff
````markdown
```typescript {monaco-diff}
// Before
function add(a, b) { return a + b; }
~~~
// After
function add(a: number, b: number): number { return a + b; }
```
````

---

## Animations & Clicks

### v-click (Single Element)
```markdown
<v-click>
This appears on click
</v-click>
```

### v-clicks (Multiple Elements)
```markdown
<v-clicks>

- First item
- Second item
- Third item

</v-clicks>
```

### Nested v-clicks
```markdown
<v-clicks depth="2">

- Parent
  - Child 1
  - Child 2
- Parent 2

</v-clicks>
```

### Click Positioning
```markdown
<div v-click="3">Appears at click 3</div>
<div v-click="1">Appears at click 1</div>
<div v-click="2">Appears at click 2</div>
```

### Hide on Click
```markdown
<div v-click.hide="3">Disappears at click 3</div>
<div v-click="[1, 3]">Visible only clicks 1-2</div>
```

### v-after (Same Click)
```markdown
<v-click>Main content</v-click>
<v-after>Appears with main content</v-after>
```

### Slide Transitions
```yaml
---
transition: slide-left  # Global default
---

---
transition: fade        # Per-slide override
---
```

Available: `slide-left`, `slide-right`, `slide-up`, `slide-down`, `fade`, `fade-out`

---

## Mermaid Diagrams

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

### Sequence Diagram
````markdown
```mermaid {scale: 0.8}
sequenceDiagram
    participant C as Client
    participant S as Server
    C->>S: Request
    S-->>C: Response
```
````

### Class Diagram
````markdown
```mermaid {scale: 0.7}
classDiagram
    class Animal {
        +String name
        +makeSound()
    }
    class Dog {
        +bark()
    }
    Animal <|-- Dog
```
````

### Themes
````markdown
```mermaid {theme: 'neutral', scale: 0.8}
graph LR
    A --> B --> C
```
````

Themes: `default`, `neutral`, `dark`, `forest`, `base`

---

## LaTeX Math

### Inline Math
```markdown
The formula is $x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$
```

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

### In Tables
```markdown
| Algorithm | Complexity |
|-----------|------------|
| Binary Search | $O(\log n)$ |
| Quick Sort | $O(n \log n)$ |
```

---

## Styling

### UnoCSS Utility Classes

**Layout:**
- `grid`, `flex`, `grid-cols-2`, `grid-cols-3`
- `gap-4`, `gap-8`

**Spacing:**
- `p-4`, `m-4`, `mt-8`, `px-2`, `py-1`

**Typography:**
- `text-sm`, `text-xl`, `text-2xl`
- `font-bold`, `font-mono`
- `text-center`, `text-left`

**Colors:**
- `text-blue-500`, `text-red-500`
- `bg-blue-500`, `bg-green-100`
- `bg-opacity-20`, `opacity-50`

**Borders:**
- `rounded`, `rounded-lg`
- `border`, `border-blue-500`

### Absolute Positioning
```html
<div class="abs-tr m-4">Top Right</div>
<div class="abs-tl m-4">Top Left</div>
<div class="abs-br m-4">Bottom Right</div>
<div class="abs-bl m-4">Bottom Left</div>
```

### Card Pattern
```html
<div class="p-4 rounded-lg bg-blue-500 bg-opacity-20 border border-blue-500">
Card content
</div>
```

### Scoped Styles
```markdown
<style>
h1 {
  background: linear-gradient(90deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
</style>
```

---

## Presenter Notes

Notes go in HTML comments at slide end:

```markdown
# Slide Title

Content here

<!--
Main talking points:
- First point to cover
- Second important concept

[click] Animation appears - explain this

[click] Next animation - elaborate

[PAUSE] Give viewers time to absorb

[TRANSITION] Lead into next topic...
-->
```

### Click Markers in Notes
```markdown
<!--
Introduction to the concept...

[click] First item appears - discuss the basics

[click] Second item - dive deeper

[click:2] Skip ahead two clicks

Final summary...
-->
```

---

## Code Groups

Show same concept in multiple languages:

````markdown
::code-group

```python [Python]
def greet(name):
    return f"Hello, {name}!"
```

```javascript [JavaScript]
function greet(name) {
    return `Hello, ${name}!`;
}
```

```rust [Rust]
fn greet(name: &str) -> String {
    format!("Hello, {}!", name)
}
```

::
````

---

## MDC Syntax

Enable with `mdc: true` in frontmatter.

### Inline Attributes
```markdown
This is [red text]{style="color:red"} inline
```

### Block Attributes
```markdown
::div{.p-4 .bg-blue-500 .bg-opacity-20 .rounded}
Block with classes
::
```

---

## Global Context

Access slide metadata:
```vue
{{ $s