--- name: slidev description: Create and present web-based slides for developers using Markdown, Vue components, code highlighting, animations, and interactive features. Use when building technical presentations, conference talks, or teaching materials. --- # Slidev - Presentation Slides for Developers Web-based slides maker built on Vite, Vue, and Markdown. ## When to Use - Technical presentations with live code examples - Syntax-highlighted code snippets with animations - Interactive demos (Monaco editor, runnable code) - Mathematical equations (LaTeX) or diagrams (Mermaid, PlantUML) - Record presentations with presenter notes - Export to PDF, PPTX, or host as SPA ## Quick Start ```bash pnpm create slidev # Create project pnpm run dev # Start dev server pnpm run export # Export to PDF ``` ## Basic Syntax ```md --- theme: default title: My Presentation --- # First Slide Content here --- # Second Slide More content ``` - `---` separates slides - First frontmatter = headmatter (deck config) - HTML comments = presenter notes ## Core References | Topic | Description | Reference | |-------|-------------|-----------| | Markdown Syntax | Slide separators, frontmatter, notes, code blocks | [core-syntax](references/core-syntax.md) | | Animations | v-click, v-clicks, motion, transitions | [core-animations](references/core-animations.md) | | Headmatter | Deck-wide configuration options | [core-headmatter](references/core-headmatter.md) | | Frontmatter | Per-slide configuration options | [core-frontmatter](references/core-frontmatter.md) | | CLI Commands | Dev, build, export, theme commands | [core-cli](references/core-cli.md) | | Components | Built-in Vue components | [core-components](references/core-components.md) | | Layouts | Built-in slide layouts | [core-layouts](references/core-layouts.md) | | Exporting | PDF, PPTX, PNG export options | [core-exporting](references/core-exporting.md) | | Hosting | Build and deploy to various platforms | [core-hosting](references/core-hosting.md) | | Global Context | $nav, $slidev, composables API | [core-global-context](references/core-global-context.md) | ## Feature Reference ### Code & Editor | Feature | Usage | Reference | |---------|-------|-----------| | Line highlighting | `` ```ts {2,3} `` | [code-line-highlighting](references/code-line-highlighting.md) | | Click-based highlighting | `` ```ts {1\|2-3\|all} `` | [code-line-highlighting](references/code-line-highlighting.md) | | Line numbers | `lineNumbers: true` or `{lines:true}` | [code-line-numbers](references/code-line-numbers.md) | | Scrollable code | `{maxHeight:'100px'}` | [code-max-height](references/code-max-height.md) | | Code tabs | `::code-group` (requires `comark: true`) | [code-groups](references/code-groups.md) | | Monaco editor | `` ```ts {monaco} `` | [editor-monaco](references/editor-monaco.md) | | Run code | `` ```ts {monaco-run} `` | [editor-monaco-run](references/editor-monaco-run.md) | | Edit files | `<<< ./file.ts {monaco-write}` | [editor-monaco-write](references/editor-monaco-write.md) | | Code animations | `` ````md magic-move `` | [code-magic-move](references/code-magic-move.md) | | TypeScript types | `` ```ts twoslash `` | [code-twoslash](references/code-twoslash.md) | | Import code | `<<< @/snippets/file.js` | [code-import-snippet](references/code-import-snippet.md) | ### Diagrams & Math | Feature | Usage | Reference | |---------|-------|-----------| | Mermaid diagrams | `` ```mermaid `` | [diagram-mermaid](references/diagram-mermaid.md) | | PlantUML diagrams | `` ```plantuml `` | [diagram-plantuml](references/diagram-plantuml.md) | | LaTeX math | `$inline$` or `$$block$$` | [diagram-latex](references/diagram-latex.md) | ### Layout & Styling | Feature | Usage | Reference | |---------|-------|-----------| | Canvas size | `canvasWidth`, `aspectRatio` | [layout-canvas-size](references/layout-canvas-size.md) | | Zoom slide | `zoom: 0.8` | [layout-zoom](references/layout-zoom.md) | | Scale elements | `` | [layout-transform](references/layout-transform.md) | | Layout slots | `::right::`, `::default::` | [layout-slots](references/layout-slots.md) | | Scoped CSS | `

slidev

Scan your own AI components