hsiangjenli/slidev

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

pnpm create slidev    # Create project
pnpm run dev          # Start dev server
pnpm run export       # Export to PDF

Basic Syntax

---
theme: default
title: My Presentation
---

# First Slide

Content here

---

# Second Slide

More content

<!--
Presenter notes go here
-->

• --- 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 | | Animations | v-click, v-clicks, motion, transitions | core-animations | | Headmatter | Deck-wide configuration options | core-headmatter | | Frontmatter | Per-slide configuration options | core-frontmatter | | CLI Commands | Dev, build, export, theme commands | core-cli | | Components | Built-in Vue components | core-components | | Layouts | Built-in slide layouts | core-layouts | | Exporting | PDF, PPTX, PNG export options | core-exporting | | Hosting | Build and deploy to various platforms | core-hosting | | Global Context | $nav, $slidev, composables API | core-global-context |

Feature Reference

Code & Editor

| Feature | Usage | Reference | |---------|-------|-----------| | Line highlighting | ```ts {2,3} | code-line-highlighting | | Click-based highlighting | ```ts {1\|2-3\|all} | code-line-highlighting | | Line numbers | lineNumbers: true or {lines:true} | code-line-numbers | | Scrollable code | {maxHeight:'100px'} | code-max-height | | Code tabs | ::code-group (requires comark: true) | code-groups | | Monaco editor | ```ts {monaco} | editor-monaco | | Run code | ```ts {monaco-run} | editor-monaco-run | | Edit files | <<< ./file.ts {monaco-write} | editor-monaco-write | | Code animations | ````md magic-move | code-magic-move | | TypeScript types | ```ts twoslash | code-twoslash | | Import code | <<< @/snippets/file.js | code-import-snippet |

Diagrams & Math

| Feature | Usage | Reference | |---------|-------|-----------| | Mermaid diagrams | ```mermaid | diagram-mermaid | | PlantUML diagrams | ```plantuml | diagram-plantuml | | LaTeX math | $inline$ or $$block$$ | diagram-latex |

Layout & Styling

| Feature | Usage | Reference | |---------|-------|-----------| | Canvas size | canvasWidth, aspectRatio | layout-canvas-size | | Zoom slide | zoom: 0.8 | layout-zoom | | Scale elements | <Transform :scale="0.5"> | layout-transform | | Layout slots | ::right::, ::default:: | layout-slots | | Scoped CSS | <style> in slide | style-scoped | | Global layers | global-top.vue, global-bottom.vue | layout-global-layers | | Draggable elements | v-drag, <v-drag> | layout-draggable | | Icons | <mdi-icon-name /> | style-icons |

Animation & Interaction

| Feature | Usage | Reference | |---------|-------|-----------| | Click animations | v-click, <v-clicks> | core-animations | | Rough markers | v-mark.underline, v-mark.circle | animation-rough-marker | | Drawing mode | Press C or config drawings: | animation-drawing | | Direction styles | forward:delay-300 | style-direction | | Note highlighting | [click] in notes | animation-click-marker |

Syntax Extensions

| Feature | Usage | Reference | |---------|-------|-----------| | Comark syntax | comark: true + {style="color:red"} | syntax-comark | | Block frontmatter | ```yaml instead of --- | syntax-block-frontmatter | | Import slides | src: ./other.md | syntax-importing-slides | | Merge frontmatter | Main entry wins | syntax-frontmatter-merging |

Presenter & Recording

| Feature | Usage | Reference | |---------|-------|-----------| | Recording | Press G for camera | presenter-recording | | Timer | duration: 30min, timer: countdown | presenter-timer | | Remote control | slidev --remote | presenter-remote | | Ruby text | notesAutoRuby: | presenter-notes-ruby |

Export & Build

| Feature | Usage | Reference | |---------|-------|-----------| | Export options | slidev export | core-exporting | | Build & deploy | slidev build | core-hosting | | Build with PDF | download: true | build-pdf | | Cache images | Automatic for remote URLs | build-remote-assets | | OG image | seoMeta.ogImage or og-image.png | build-og-image | | SEO tags | seoMeta: | build-seo-meta |

Editor & Tools

| Feature | Usage | Reference | |---------|-------|-----------| | Side editor | Click edit icon | editor-side | | VS Code extension | Install antfu.slidev | editor-vscode | | Prettier | prettier-plugin-slidev | editor-prettier | | Eject theme | slidev theme eject | tool-eject-theme |

Lifecycle & API

| Feature | Usage | Reference | |---------|-------|-----------| | Slide hooks | onSlideEnter(), onSlideLeave() | api-slide-hooks | | Navigation API | $nav, useNav() | core-global-context |

Common Layouts

| Layout | Purpose | |--------|---------| | cover | Title/cover slide | | center | Centered content | | default | Standard slide | | two-cols | Two columns (use ::right::) | | two-cols-header | Header + two columns | | image / image-left / image-right | Image layouts | | iframe / iframe-left / iframe-right | Embed URLs | | quote | Quotation | | section | Section divider | | fact / statement | Data/statement display | | intro / end | Intro/end slides |

Resources

• Documentation: https://sli.dev
• Theme Gallery: https://sli.dev/resources/theme-gallery
• Showcases: https://sli.dev/resources/showcases