skills.rest
DawnMoon1542
DawnMoon1542COMMUNITY
Explore all skills by this author →
GitHub

slidev

Create web-based developer presentations from Markdown using Slidev with Vue components and code highlighting.

7|Updated May 13, 2026
Search Tags:#markdown#vue#presentation#slides#slidev#code highlighting#developer talks
One-click install
npx skills add https://github.com/DawnMoon1542/agents-skills --skill slidev-dawnmoon1542
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: slidev
Source: https://github.com/DawnMoon1542/agents-skills/tree/main/slidev
Command: npx skills add https://github.com/DawnMoon1542/agents-skills --skill slidev-dawnmoon1542

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright-chromium, and includes references (resource) components.

What problem does it solve? Building technical presentations with live code examples, syntax highlighting, and interactive demos is tedious with traditional slide tools. This Skill lets you author developer-focused slidedecks entirely in Markdown and present, record, or export them from the browser. ## Core Features & Use Cases - Markdown-Based Slides: Write slides in Markdown with frontmatter configuration, presenter notes, and built-in layouts like cover, two-cols, and image layouts. - Code-Centric Features: Syntax highlighting with line highlighting, Monaco editor integration, runnable code blocks, TwoSlash type annotations, and Magic Move code animations. - Diagrams, Math & Interactivity: Embed Mermaid and PlantUML diagrams, LaTeX equations, click animations, draggable elements, and drawing annotations. - Export & Hosting: Export to PDF, PPTX, or PNG, build as a static SPA, and deploy to GitHub Pages, Netlify, or Vercel. - Use Case: Prepare a conference talk with live TypeScript demos, animated code walkthroughs, and presenter notes, then export a PDF version for attendees. ## Quick Start Create a new Slidev presentation about our API architecture with syntax-highlighted code examples and export it as a PDF.

Frequently Asked Questions about slidev

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a presentation with Slidev?▼

Run pnpm create slidev to scaffold a project, then write slides in Markdown separated by --- delimiters. Start the dev server with pnpm run dev and view slides at http://localhost:3030.

How to highlight code lines in Slidev slides?▼

Add line numbers in curly braces after the language, like ```ts {2,3} for static highlighting. Use pipe separators like {1|2-3|all} for click-based highlighting that progresses through stages as you present.

Can Slidev export presentations to PDF or PowerPoint?▼

Yes, run slidev export for PDF or slidev export --format pptx for PowerPoint. You must first install playwright-chromium as a dev dependency, since export uses a headless browser to render slides.

Does Slidev support Mermaid diagrams and LaTeX math?▼

Yes, use ```mermaid or ```plantuml code blocks for diagrams and $...$ or $$...$$ for LaTeX math rendered with KaTeX. Mermaid supports options like theme and scale passed in the code block header.

Why does Slidev export fail with a browser error?▼

Export fails when playwright-chromium is not installed, since Slidev needs a headless Chromium to render slides. Fix it by running pnpm add -D playwright-chromium, or npx playwright install chromium in CI environments.

How do I run code live inside a Slidev presentation?▼

Use the {monaco} modifier to turn a code block into an editable Monaco editor, or {monaco-run} to add a Run button that executes JavaScript and TypeScript inline. Other languages require configuring custom code runners.

Related Skills

Explore More Software Engineering Skills→
jamescjamesc

explain

Generate structured markdown or Showboat walkthrough documents from source files.

Community
Intermediate
brainbrewlabsbrainbrewlabs
7

doc-publishing

Publishes documentation to GitHub Pages, Vercel, or Netlify from source docs and build outputs.

Official
Intermediate
yoanbernabeuyoanbernabeu
34

slidev-presenter-mode

Configure Slidev presenter mode with speaker notes, timers, and remote control.

Community
Basic
joaoguirunasjoaoguirunas
3

presentation-design

Designs and evaluates presentation slides using audience-centered frameworks and cognitive load principles.

Community
Intermediate