slidev

Generate and present web-based slideshows from Markdown and Vue components.

Updated Mar 23, 2026

Search Tags:#markdown #presentation #slides #developer #code highlighting

Ready to run

npx skills add https://github.com/LinWhite2333/ai-configuration --skill slidev-linwhite2333

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: slidev
Source: https://github.com/LinWhite2333/ai-configuration/tree/main/skills/skills/slidev
Command: npx skills add https://github.com/LinWhite2333/ai-configuration --skill slidev-linwhite2333

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires vue, markdown-it, highlight.js, vite, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill simplifies the creation and presentation of web-based slideshows for developers, offering a streamlined experience to author and deliver technical presentations, code walk-throughs, and workshops.

Core Features & Use Cases

Markdown-Based Slides: Build slides using Markdown syntax, leveraging Vue components for dynamic presentations.
Code Highlighting: Syntax-highlighted code blocks, including interactive Monaco editor for live code execution.
Animations & Transitions: Add animations and transitions for engaging presentations.
Use Case: A developer is preparing a talk on the latest programming language features. They can use this Skill to create a slide deck that includes live code examples, interactive diagrams, and a presenter mode with notes and timers.

Quick Start

Run the following command to create a new Slidev presentation:

pnpm create slidev

Frequently Asked Questions about slidev

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

FAQPage Schema

How do I create web-based presentations using Markdown?▼

You can create web-based presentations by writing Markdown syntax and leveraging Vue components to build dynamic slides. This approach enables developers to generate technical slideshows with code highlighting and interactive features without manual HTML formatting.

Can I include live code execution and syntax highlighting in developer slideshows?▼

Yes, developer slideshows support syntax-highlighted code blocks and an interactive Monaco editor for live code execution. This allows you to embed functional code examples directly within your presentation for technical walk-throughs.

Do I need Vue and Vite to build Markdown slides?▼

Yes, building Markdown slides requires Vite, Vue, and markdown parsing libraries. These dependencies provide the necessary environment to compile syntax, render components, and enable presenter mode capabilities.

What is the best way to add animations and presenter mode to a technical presentation?▼

The best way to add animations and presenter mode is using a developer-focused presentation framework that supports Vue components. This provides built-in transitions, presenter notes, and timers for technical talks.

How do I start a new presentation project for a developer workshop?▼

To start a new presentation project for a developer workshop, run the package manager command to initialize the slideshow environment. This scaffolds the necessary Markdown and Vue files to begin authoring your technical content.