Slidev

Slidev is a community skill for creating developer presentations using Slidev, a Markdown-based slide framework, covering slide authoring, code highlighting, animations, theming, and export for technical talks and workshops.

What Is This?

Overview

Slidev provides tools for building interactive presentations from Markdown files with developer-focused features. It covers slide authoring that creates presentations using Markdown syntax with slide separators and layout directives, code highlighting that renders syntax-colored code blocks with line highlighting and diff markers, animations that add slide transitions and element animations using Vue.js components, theming that customizes appearance with CSS and pre-built theme packages, and export that generates PDF or SPA deployable versions of presentations. The skill helps developers create polished technical slides.

Who Should Use This

This skill serves developers preparing conference talks, educators building workshop materials with live code examples, and teams creating internal technical presentations.

Why Use It?

Problems It Solves

Traditional slide tools handle code poorly with no syntax highlighting or line number support. Maintaining presentations outside version control makes collaboration difficult. WYSIWYG slide editors distract from content creation with manual formatting. Embedding live, runnable code in slides requires external tools.

Core Highlights

Markdown author creates slides with familiar text syntax. Code renderer displays syntax-highlighted blocks with line markers. Animation builder adds transitions using Vue components. Theme system customizes appearance with CSS and packages.

How to Use It?

Basic Usage

---
theme: default
title: Python Best Practices
---

Tips for clean, maintainable
Python code

---

## Type Hints

Add type annotations for
better tooling support

```python
def greet(
  name: str
) -> str:
  return f'Hello, {name}'

def process(
  items: list[int]
) -> dict[str, int]:
  return {
    'sum': sum(items),
    'count': len(items)
  }

Error Handling

Use specific exception types

try:
  data = json.loads(text)
except json.JSONDecodeError\
  as e:
  logger.error(
    f'Invalid JSON: {e}')

try:
  data = json.loads(text)
except Exception:
  pass

### Real-World Examples

```python
from pathlib import Path
import subprocess

class SlidevProject:
  def __init__(
    self,
    title: str,
    theme: str = 'default'
  ):
    self.title = title
    self.theme = theme
    self.slides = []

  def add_slide(
    self,
    content: str,
    layout: str = None
  ):
    header = ''
    if layout:
      header = (
        f'---\nlayout: '
        f'{layout}\n---\n\n')
    self.slides.append(
      f'{header}{content}')

  def generate(
    self,
    output: str
  ) -> str:
    front = (
      f'---\ntheme: '
      f'{self.theme}\n'
      f'title: '
      f'{self.title}\n'
      f'---\n\n')
    body = '\n\n---\n\n'\
      .join(self.slides)
    content = (
      front + body)
    Path(output).mkdir(
      exist_ok=True)
    path = Path(output)\
      / 'slides.md'
    path.write_text(
      content)
    return str(path)

  def export_pdf(
    self,
    project_dir: str
  ) -> bool:
    result = subprocess.run(
      ['npx', 'slidev',
       'export'],
      cwd=project_dir,
      capture_output=True)
    return (
      result.returncode
      == 0)

proj = SlidevProject(
  'API Design Talk',
  'seriph')
proj.add_slide(
  '# API Design\n\n'
  'Best practices for '
  'REST APIs')
proj.add_slide(
  '## Versioning\n\n'
  'Use URL path '
  'versioning')
path = proj.generate(
  'my-talk')
print(f'Created: {path}')

Advanced Tips

Use the presenter mode with speaker notes for rehearsing talks with timing guidance. Embed Vue components directly in slides for interactive demos that run during the presentation. Deploy the SPA export to a static hosting service for shareable presentation links.

When to Use It?

Use Cases

Create a conference talk with syntax-highlighted code examples and animated transitions. Build a workshop with interactive code slides that participants can follow along with. Generate PDF handouts from the same Markdown source used for live presentations.

Related Topics

Slidev, presentations, Markdown, Vue.js, code highlighting, developer talks, and slide export.

Important Notes

Requirements

Node.js runtime for running the Slidev development server and build tools. Slidev package installed via npm for slide authoring and export. Markdown editor for writing slide content efficiently.

Usage Recommendations

Do: use code blocks with language tags for automatic syntax highlighting and line numbers. Keep slides focused with one concept per slide for clear delivery. Use the built-in presenter mode with speaker notes during talks.

Don't: overload slides with text when the speaker should convey details verbally. Use complex Vue components that may break during live presentations. Rely on animations that require specific browser features without testing first.

Limitations

Slidev requires Node.js and familiarity with the npm ecosystem for setup and theming. PDF export may not perfectly reproduce all animations and interactive elements from the web version. Custom themes require CSS and Vue.js knowledge to create and modify.