slidev-export

仓库: yoanbernabeu/slidev-skills
安装量: 42
排名: #17143

安装

npx skills add https://github.com/yoanbernabeu/slidev-skills --skill slidev-export

This skill covers all export options in Slidev, including PDF, PPTX, PNG, and Markdown exports with various configuration options.

When to Use This Skill

  • Sharing presentations without running Slidev

  • Creating PDF handouts

  • Archiving presentations

  • Printing slides

  • Converting to PowerPoint

Export Methods

Since v0.50.0, use the built-in browser exporter:

  • Run your presentation: npm run dev

  • Open the Export panel from navigation bar

  • Or navigate to: http://localhost:3030/export

  • Choose format and options

  • Click Export

CLI Export

Requires playwright-chromium:

npm install -D playwright-chromium

Then:

npx slidev export

Export Formats

PDF Export

Browser Method:

  • Open /export

  • Select "PDF"

  • Configure options

  • Download

CLI Method:

npx slidev export

Output: ./slides-export.pdf

PPTX Export

Browser Method:

  • Open /export

  • Select "PPTX"

  • Download

CLI Method:

npx slidev export --format pptx

Output: ./slides-export.pptx

Note: Slides exported as images, presenter notes included.

PNG Export

CLI Method:

npx slidev export --format png

Output: Individual PNG files in ./slides-export/ directory.

Markdown Export

npx slidev export --format md

Compiles Markdown with embedded PNG images.

CLI Options

Basic Options

| --format | Export format: pdf, pptx, png, md

| --output | Output file/directory name

| --dark | Export in dark mode

| --with-clicks | Export each click as separate page

| --range | Export specific slides

Examples

Custom output name:

npx slidev export --output my-presentation

Dark mode export:

npx slidev export --dark

Export with clicks:

npx slidev export --with-clicks

Creates separate pages for each animation step.

Specific slides:

npx slidev export --range 1,4-5,8

Exports slides 1, 4, 5, and 8.

Advanced Options

Timeout Settings

For complex slides with animations:

npx slidev export --timeout 60000

Increases timeout to 60 seconds.

Wait for Content

npx slidev export --wait 10000

Waits 10 seconds before starting export.

Page Loading Strategy

npx slidev export --wait-until networkidle

Options: none, load, domcontentloaded, networkidle

Table of Contents

npx slidev export --with-toc

Generates PDF outline with slide titles.

Transparent Background (PNG)

npx slidev export --format png --omit-background

Removes default white background.

Configuration in Frontmatter

Export Filename

---
exportFilename: my-awesome-presentation
---

Download Button

---
download: true
---

Shows download button in presentation.

Export with Source

---
download: 'https://example.com/slides.pdf'
---

Links to pre-generated PDF.

Handling Click Animations

Without --with-clicks

Only final state of each slide exported.

With --with-clicks

Each click step becomes a separate page:

  • Slide 1, Click 0 → Page 1

  • Slide 1, Click 1 → Page 2

  • Slide 1, Click 2 → Page 3

  • Slide 2, Click 0 → Page 4

  • etc.

Use --with-clicks for handouts so readers see progression.

Export Quality

PDF Resolution

npx slidev export --scale 2

Higher scale = higher quality (and larger file).

PNG Resolution

npx slidev export --format png --scale 2

Package.json Scripts

Add convenient scripts:

{
  "scripts": {
    "dev": "slidev --open",
    "build": "slidev build",
    "export": "slidev export",
    "export:pdf": "slidev export --format pdf",
    "export:pptx": "slidev export --format pptx",
    "export:png": "slidev export --format png",
    "export:dark": "slidev export --dark"
  }
}

Handling Export Issues

Fonts Not Rendering

  • Use web fonts (Google Fonts)

  • Or embed fonts in styles

Code Not Highlighting

  • Ensure Shiki loads before export

  • Use --wait option

Images Missing

  • Use absolute URLs or

  • Place in public/ directory

Animations Broken

Export doesn't include animations. Use --with-clicks to capture states.

Timeout Errors

npx slidev export --timeout 120000 --wait 5000

Memory Issues

For large presentations:

NODE_OPTIONS="--max-old-space-size=4096" npx slidev export

Export vs Build

| Output | PDF/PPTX/PNG | Static website

| Interactive | No | Yes

| Animations | Static captures | Working

| Size | Smaller | Larger

| Sharing | Email/Drive | Web hosting

Best Practices

1. Test Export Early

Don't wait until presentation day:

npm run export

2. Review PDF Thoroughly

Check:

  • All slides included

  • Code readable

  • Images appear

  • Colors correct

3. Use Consistent Aspect Ratio

Standard is 16:9. Don't change mid-presentation.

4. Simplify for Export

Some features don't export well:

  • Videos → Use screenshots

  • iframes → Use screenshots

  • Complex animations → Simplify

5. Include Speaker Notes in PPTX

PPTX export includes notes automatically.

6. Version Your Exports

npx slidev export --output presentation-v1.2

Export Workflow

For Conference Submission

# High-quality PDF
npx slidev export --with-toc --scale 2

For Handouts

# Include all click states
npx slidev export --with-clicks

For Social Media

# Individual images
npx slidev export --format png

For Archiving

# Multiple formats
npm run export:pdf
npm run export:pptx
npm run export:png

Output Format

When exporting:

# EXPORT COMMAND:
npx slidev export [options]

# OPTIONS USED:
--format [pdf|pptx|png|md]
--output [filename]
--with-clicks (if needed)
--dark (if needed)
--range [slide numbers]
--timeout [ms]
--wait [ms]

CHECKLIST BEFORE EXPORT:

All slides render correctly Code blocks are readable Images load properly Fonts are correct Test export command works

OUTPUT FILES:

  • PDF: ./[name].pdf

  • PPTX: ./[name].pptx

  • PNG: ./[name]/

← 返回排行榜