131 lines
1.6 KiB
Markdown
131 lines
1.6 KiB
Markdown
---
|
|
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>
|