# Slidev — Presentation Slides for Developers

> Slidev is a Markdown-based presentation tool for developers. Write slides in Markdown, render with Vue components, use code highlighting with animations, live coding, LaTeX math, diagrams, and export to PDF or SPA. Powered by Vite for instant hot reload.

## Install

Save in your project root:

## Quick Use

```bash
npm i -g @slidev/cli
slidev init my-slides
cd my-slides
slidev                                      # Dev at :3030
slidev export                               # PDF export
slidev build                                # SPA export
```

`slides.md`:
```markdown
---
theme: seriph
title: TokRepo Update
---

# TokRepo Update

April 2026

---

## What We Built

- 270+ open-source asset guides
- Automated publishing pipeline
- Full-text search

---

## Architecture

```mermaid
flowchart LR
    A[GitHub API] --> B[SQL Generator]
    B --> C[MySQL]
    C --> D[Nuxt Frontend]
```

---
layout: two-cols
---

## Left Column

Code example:

```ts
const assets = await fetch("/api/assets")
```

::right::

## Right Column

- Fast
- Type-safe
- Beautiful

---
layout: center
---

# Thank You
```

## Intro

Slidev is a Markdown-based presentation tool built for developers. Created by Anthony Fu (Vite, UnoCSS, Nuxt core team). Write slides in Markdown with full Vue component support, live coding, Mermaid diagrams, LaTeX math, presenter notes, recording, and export to PDF or SPA. Powered by Vite for instant hot module reload.

- **Repo**: https://github.com/slidevjs/slidev
- **Stars**: 45K+
- **Language**: TypeScript
- **License**: MIT

## What Slidev Does

- **Markdown slides** — one file, `---` separators
- **Vue components** — embed any Vue component
- **Code highlighting** — Shiki with line highlighting and animations
- **Live coding** — Monaco editor inside slides
- **Mermaid diagrams** — inline diagram support
- **LaTeX math** — KaTeX for equations
- **Layouts** — center, two-cols, image-right, custom
- **Themes** — community themes on npm
- **Recording** — record presentation with camera
- **PDF export** — via Playwright
- **SPA export** — deploy as a website
- **Presenter mode** — notes + timer + next slide preview

## Comparison

| Tool | Input | Components | Dev |
|---|---|---|---|
| Slidev | Markdown | Vue | Vite HMR |
| reveal.js | HTML/Markdown | JS plugins | Manual |
| Marp | Markdown | Limited | VS Code |
| Google Slides | GUI | None | Browser |
| Keynote | GUI | None | macOS |

## 常见问题 FAQ

**Q: 能部署成网站吗？**
A: 能。`slidev build` 生成 SPA，部署到 Vercel/Netlify/GitHub Pages 即可。

**Q: 和 reveal.js 比？**
A: Slidev 开发体验更好（Vite HMR、Vue 组件、Markdown-first），reveal.js 更老牌、自定义能力更底层。

## 来源与致谢 Sources

- Docs: https://sli.dev
- GitHub: https://github.com/slidevjs/slidev
- License: MIT

---
Source: https://tokrepo.com/en/workflows/ce6e1004-3651-11f1-9bc6-00163e2b0d79
Author: AI Open Source