---
theme: default
title: Slidev Showcase
transition: slide-left
mdc: true
---

# Slidev Showcase

Explore the powerful features of Slidev

<div class="abs-br m-6 text-sm opacity-50">
  Press <kbd>Space</kbd> to navigate
</div>

---
layout: center
---

# Click Animations

<v-clicks>

- Elements appear one by one
- Supports nested lists
- Great for step-by-step explanations

</v-clicks>

---

# Two-Column Layout

::left::

### Features

<v-clicks>

- Markdown-based
- Vue components
- Code highlighting
- Diagrams & Math

</v-clicks>

::right::

<v-click>

```ts
// It's just Markdown!
interface Slide {
  content: string
  layout?: string
  transition?: string
}
```

</v-click>

---

# Code Highlighting

```ts {2-3|5-7|all}
function fibonacci(n: number): number {
  if (n <= 1) return n
  return fibonacci(n - 1) + fibonacci(n - 2)
}

// Click through to reveal lines
const result = fibonacci(10)
console.log(`fib(10) = ${result}`)
```

<br>

<v-click>

> Use `|` separator to highlight lines per click

</v-click>

---

# Mermaid Diagrams

```mermaid
graph LR
    A[Markdown] --> B[Slidev]
    B --> C[Vite]
    B --> D[Vue]
    C --> E[SPA]
    D --> E
    E --> F[Deploy]
```

---

# Math Equations

Inline math: $E = mc^2$

Block math:

$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$

<br>

<v-click>

Powered by **KaTeX** — fast and beautiful math rendering

</v-click>

---
layout: center
class: text-center
---

# That's Slidev

Write slides in Markdown, present with style.

<div class="mt-8 text-sm opacity-60">
  <a href="https://sli.dev" target="_blank">sli.dev</a>
</div>