feat: Complete fleet — 94 skills across 10+ domains
Pulled ALL skills from 15 source repositories: - anthropics/skills: 16 (docs, design, MCP, testing) - obra/superpowers: 14 (TDD, debugging, agents, planning) - coreyhaines31/marketingskills: 25 (marketing, CRO, SEO, growth) - better-auth/skills: 5 (auth patterns) - vercel-labs/agent-skills: 5 (React, design, Vercel) - antfu/skills: 16 (Vue, Vite, Vitest, pnpm, Turborepo) - Plus 13 individual skills from various repos Mosaic Stack is not limited to coding — the Orchestrator and subagents serve coding, business, design, marketing, writing, logistics, analysis, and more. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jason Woltje
21
skills/slidev/LICENSE.md
Normal file
21
skills/slidev/LICENSE.md
Normal file
@@ -0,0 +1,21 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2020-PRESENT Anthony Fu
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
61
skills/slidev/README.md
Normal file
61
skills/slidev/README.md
Normal file
@@ -0,0 +1,61 @@
|
||||
# Slidev Skills for Claude Code
|
||||
|
||||
Agent skills that help Claude Code understand and work with [Slidev](https://sli.dev) presentations.
|
||||
|
||||
## Installation
|
||||
|
||||
```bash
|
||||
npx skills add slidevjs/slidev
|
||||
```
|
||||
|
||||
This will add the Slidev skill to your Claude Code configuration.
|
||||
|
||||
## What's Included
|
||||
|
||||
The Slidev skill provides Claude Code with knowledge about:
|
||||
|
||||
- **Core Syntax** - Markdown syntax, slide separators, frontmatter
|
||||
- **Animations** - Click animations, transitions, motion effects
|
||||
- **Code Features** - Line highlighting, Monaco editor, code groups, magic-move
|
||||
- **Diagrams** - Mermaid, PlantUML, LaTeX math
|
||||
- **Layouts** - Built-in layouts, slots, global layers
|
||||
- **Presenter Mode** - Recording, timer, remote access
|
||||
- **Exporting** - PDF, PPTX, PNG, SPA hosting
|
||||
|
||||
## Usage
|
||||
|
||||
Once installed, Claude Code will automatically use Slidev knowledge when:
|
||||
|
||||
- Creating new presentations
|
||||
- Adding slides with code examples
|
||||
- Setting up animations and transitions
|
||||
- Configuring themes and layouts
|
||||
- Exporting presentations
|
||||
|
||||
### Example Prompts
|
||||
|
||||
```
|
||||
Create a Slidev presentation about TypeScript generics with code examples
|
||||
```
|
||||
|
||||
```
|
||||
Add a two-column slide with code on the left and explanation on the right
|
||||
```
|
||||
|
||||
```
|
||||
Set up click animations to reveal bullet points one by one
|
||||
```
|
||||
|
||||
```
|
||||
Configure the presentation for PDF export with speaker notes
|
||||
```
|
||||
|
||||
## Documentation
|
||||
|
||||
- [Slidev Documentation](https://sli.dev)
|
||||
- [Theme Gallery](https://sli.dev/resources/theme-gallery)
|
||||
- [Showcases](https://sli.dev/resources/showcases)
|
||||
|
||||
## License
|
||||
|
||||
MIT
|
||||
183
skills/slidev/SKILL.md
Normal file
183
skills/slidev/SKILL.md
Normal file
@@ -0,0 +1,183 @@
|
||||
---
|
||||
name: slidev
|
||||
description: Create and present web-based slides for developers using Markdown, Vue components, code highlighting, animations, and interactive features. Use when building technical presentations, conference talks, or teaching materials.
|
||||
---
|
||||
|
||||
# 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
|
||||
|
||||
```bash
|
||||
pnpm create slidev # Create project
|
||||
pnpm run dev # Start dev server
|
||||
pnpm run export # Export to PDF
|
||||
```
|
||||
|
||||
## Basic Syntax
|
||||
|
||||
```md
|
||||
---
|
||||
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](references/core-syntax.md) |
|
||||
| Animations | v-click, v-clicks, motion, transitions | [core-animations](references/core-animations.md) |
|
||||
| Headmatter | Deck-wide configuration options | [core-headmatter](references/core-headmatter.md) |
|
||||
| Frontmatter | Per-slide configuration options | [core-frontmatter](references/core-frontmatter.md) |
|
||||
| CLI Commands | Dev, build, export, theme commands | [core-cli](references/core-cli.md) |
|
||||
| Components | Built-in Vue components | [core-components](references/core-components.md) |
|
||||
| Layouts | Built-in slide layouts | [core-layouts](references/core-layouts.md) |
|
||||
| Exporting | PDF, PPTX, PNG export options | [core-exporting](references/core-exporting.md) |
|
||||
| Hosting | Build and deploy to various platforms | [core-hosting](references/core-hosting.md) |
|
||||
| Global Context | $nav, $slidev, composables API | [core-global-context](references/core-global-context.md) |
|
||||
|
||||
## Feature Reference
|
||||
|
||||
### Code & Editor
|
||||
|
||||
| Feature | Usage | Reference |
|
||||
|---------|-------|-----------|
|
||||
| Line highlighting | `` ```ts {2,3} `` | [code-line-highlighting](references/code-line-highlighting.md) |
|
||||
| Click-based highlighting | `` ```ts {1\|2-3\|all} `` | [code-line-highlighting](references/code-line-highlighting.md) |
|
||||
| Line numbers | `lineNumbers: true` or `{lines:true}` | [code-line-numbers](references/code-line-numbers.md) |
|
||||
| Scrollable code | `{maxHeight:'100px'}` | [code-max-height](references/code-max-height.md) |
|
||||
| Code tabs | `::code-group` (requires `mdc: true`) | [code-groups](references/code-groups.md) |
|
||||
| Monaco editor | `` ```ts {monaco} `` | [editor-monaco](references/editor-monaco.md) |
|
||||
| Run code | `` ```ts {monaco-run} `` | [editor-monaco-run](references/editor-monaco-run.md) |
|
||||
| Edit files | `<<< ./file.ts {monaco-write}` | [editor-monaco-write](references/editor-monaco-write.md) |
|
||||
| Code animations | `` ````md magic-move `` | [code-magic-move](references/code-magic-move.md) |
|
||||
| TypeScript types | `` ```ts twoslash `` | [code-twoslash](references/code-twoslash.md) |
|
||||
| Import code | `<<< @/snippets/file.js` | [code-import-snippet](references/code-import-snippet.md) |
|
||||
|
||||
### Diagrams & Math
|
||||
|
||||
| Feature | Usage | Reference |
|
||||
|---------|-------|-----------|
|
||||
| Mermaid diagrams | `` ```mermaid `` | [diagram-mermaid](references/diagram-mermaid.md) |
|
||||
| PlantUML diagrams | `` ```plantuml `` | [diagram-plantuml](references/diagram-plantuml.md) |
|
||||
| LaTeX math | `$inline$` or `$$block$$` | [diagram-latex](references/diagram-latex.md) |
|
||||
|
||||
### Layout & Styling
|
||||
|
||||
| Feature | Usage | Reference |
|
||||
|---------|-------|-----------|
|
||||
| Canvas size | `canvasWidth`, `aspectRatio` | [layout-canvas-size](references/layout-canvas-size.md) |
|
||||
| Zoom slide | `zoom: 0.8` | [layout-zoom](references/layout-zoom.md) |
|
||||
| Scale elements | `<Transform :scale="0.5">` | [layout-transform](references/layout-transform.md) |
|
||||
| Layout slots | `::right::`, `::default::` | [layout-slots](references/layout-slots.md) |
|
||||
| Scoped CSS | `<style>` in slide | [style-scoped](references/style-scoped.md) |
|
||||
| Global layers | `global-top.vue`, `global-bottom.vue` | [layout-global-layers](references/layout-global-layers.md) |
|
||||
| Draggable elements | `v-drag`, `<v-drag>` | [layout-draggable](references/layout-draggable.md) |
|
||||
| Icons | `<mdi-icon-name />` | [style-icons](references/style-icons.md) |
|
||||
|
||||
### Animation & Interaction
|
||||
|
||||
| Feature | Usage | Reference |
|
||||
|---------|-------|-----------|
|
||||
| Click animations | `v-click`, `<v-clicks>` | [core-animations](references/core-animations.md) |
|
||||
| Rough markers | `v-mark.underline`, `v-mark.circle` | [animation-rough-marker](references/animation-rough-marker.md) |
|
||||
| Drawing mode | Press `C` or config `drawings:` | [animation-drawing](references/animation-drawing.md) |
|
||||
| Direction styles | `forward:delay-300` | [style-direction](references/style-direction.md) |
|
||||
| Note highlighting | `[click]` in notes | [animation-click-marker](references/animation-click-marker.md) |
|
||||
|
||||
### Syntax Extensions
|
||||
|
||||
| Feature | Usage | Reference |
|
||||
|---------|-------|-----------|
|
||||
| MDC syntax | `mdc: true` + `{style="color:red"}` | [syntax-mdc](references/syntax-mdc.md) |
|
||||
| Block frontmatter | `` ```yaml `` instead of `---` | [syntax-block-frontmatter](references/syntax-block-frontmatter.md) |
|
||||
| Import slides | `src: ./other.md` | [syntax-importing-slides](references/syntax-importing-slides.md) |
|
||||
| Merge frontmatter | Main entry wins | [syntax-frontmatter-merging](references/syntax-frontmatter-merging.md) |
|
||||
|
||||
### Presenter & Recording
|
||||
|
||||
| Feature | Usage | Reference |
|
||||
|---------|-------|-----------|
|
||||
| Recording | Press `G` for camera | [presenter-recording](references/presenter-recording.md) |
|
||||
| Timer | `duration: 30min`, `timer: countdown` | [presenter-timer](references/presenter-timer.md) |
|
||||
| Remote control | `slidev --remote` | [presenter-remote](references/presenter-remote.md) |
|
||||
| Ruby text | `notesAutoRuby:` | [presenter-notes-ruby](references/presenter-notes-ruby.md) |
|
||||
|
||||
### Export & Build
|
||||
|
||||
| Feature | Usage | Reference |
|
||||
|---------|-------|-----------|
|
||||
| Export options | `slidev export` | [core-exporting](references/core-exporting.md) |
|
||||
| Build & deploy | `slidev build` | [core-hosting](references/core-hosting.md) |
|
||||
| Build with PDF | `download: true` | [build-pdf](references/build-pdf.md) |
|
||||
| Cache images | Automatic for remote URLs | [build-remote-assets](references/build-remote-assets.md) |
|
||||
| OG image | `seoMeta.ogImage` or `og-image.png` | [build-og-image](references/build-og-image.md) |
|
||||
| SEO tags | `seoMeta:` | [build-seo-meta](references/build-seo-meta.md) |
|
||||
|
||||
### Editor & Tools
|
||||
|
||||
| Feature | Usage | Reference |
|
||||
|---------|-------|-----------|
|
||||
| Side editor | Click edit icon | [editor-side](references/editor-side.md) |
|
||||
| VS Code extension | Install `antfu.slidev` | [editor-vscode](references/editor-vscode.md) |
|
||||
| Prettier | `prettier-plugin-slidev` | [editor-prettier](references/editor-prettier.md) |
|
||||
| Eject theme | `slidev theme eject` | [tool-eject-theme](references/tool-eject-theme.md) |
|
||||
|
||||
### Lifecycle & API
|
||||
|
||||
| Feature | Usage | Reference |
|
||||
|---------|-------|-----------|
|
||||
| Slide hooks | `onSlideEnter()`, `onSlideLeave()` | [api-slide-hooks](references/api-slide-hooks.md) |
|
||||
| Navigation API | `$nav`, `useNav()` | [core-global-context](references/core-global-context.md) |
|
||||
|
||||
## 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
|
||||
5
skills/slidev/SYNC.md
Normal file
5
skills/slidev/SYNC.md
Normal file
@@ -0,0 +1,5 @@
|
||||
# Sync Info
|
||||
|
||||
- **Source:** `vendor/slidev/skills/slidev`
|
||||
- **Git SHA:** `ba4a524fdfa5608b530766dcd37b1651e6996f67`
|
||||
- **Synced:** 2026-01-31
|
||||
37
skills/slidev/references/animation-click-marker.md
Normal file
37
skills/slidev/references/animation-click-marker.md
Normal file
@@ -0,0 +1,37 @@
|
||||
---
|
||||
name: click-marker
|
||||
description: Highlight and auto-scroll presenter notes based on click progress
|
||||
---
|
||||
|
||||
# Click Markers
|
||||
|
||||
Highlight and auto-scroll presenter notes based on click progress.
|
||||
|
||||
## Syntax
|
||||
|
||||
Add `[click]` markers in presenter notes:
|
||||
|
||||
```md
|
||||
<!--
|
||||
Content before the first click
|
||||
|
||||
[click] This will be highlighted after the first click
|
||||
|
||||
Also highlighted after the first click
|
||||
|
||||
- [click] This list element highlights after the second click
|
||||
|
||||
[click:3] Last click (skip two clicks)
|
||||
-->
|
||||
```
|
||||
|
||||
## Behavior
|
||||
|
||||
- Notes between markers highlight in sync with slide progress
|
||||
- Auto-scrolls presenter view to active section
|
||||
- Use `[click:{n}]` to skip to specific click number
|
||||
|
||||
## Requirements
|
||||
|
||||
- Only works in presenter mode
|
||||
- Notes must be HTML comments at end of slide
|
||||
68
skills/slidev/references/animation-drawing.md
Normal file
68
skills/slidev/references/animation-drawing.md
Normal file
@@ -0,0 +1,68 @@
|
||||
---
|
||||
name: drawing
|
||||
description: Draw and annotate slides during presentation
|
||||
---
|
||||
|
||||
# Drawing & Annotations
|
||||
|
||||
Draw and annotate slides during presentation. Powered by drauu.
|
||||
|
||||
## Enable Drawing
|
||||
|
||||
Click the pen icon in the navigation bar or press `C`.
|
||||
|
||||
## Stylus Support
|
||||
|
||||
Stylus pens (iPad + Apple Pencil) work automatically - draw with pen, navigate with fingers.
|
||||
|
||||
## Persist Drawings
|
||||
|
||||
Save drawings as SVGs and include in exports:
|
||||
|
||||
```md
|
||||
---
|
||||
drawings:
|
||||
persist: true
|
||||
---
|
||||
```
|
||||
|
||||
Drawings saved to `.slidev/drawings/`.
|
||||
|
||||
## Disable Drawing
|
||||
|
||||
Entirely:
|
||||
```md
|
||||
---
|
||||
drawings:
|
||||
enabled: false
|
||||
---
|
||||
```
|
||||
|
||||
Only in development:
|
||||
```md
|
||||
---
|
||||
drawings:
|
||||
enabled: dev
|
||||
---
|
||||
```
|
||||
|
||||
Only in presenter mode:
|
||||
```md
|
||||
---
|
||||
drawings:
|
||||
presenterOnly: true
|
||||
---
|
||||
```
|
||||
|
||||
## Sync Settings
|
||||
|
||||
Disable sync across instances:
|
||||
|
||||
```md
|
||||
---
|
||||
drawings:
|
||||
syncAll: false
|
||||
---
|
||||
```
|
||||
|
||||
Only presenter's drawings sync to others.
|
||||
53
skills/slidev/references/animation-rough-marker.md
Normal file
53
skills/slidev/references/animation-rough-marker.md
Normal file
@@ -0,0 +1,53 @@
|
||||
---
|
||||
name: rough-marker
|
||||
description: Hand-drawn style highlighting using Rough Notation
|
||||
---
|
||||
|
||||
# Rough Markers
|
||||
|
||||
Hand-drawn style highlighting using Rough Notation.
|
||||
|
||||
## v-mark Directive
|
||||
|
||||
```html
|
||||
<span v-mark>Important text</span>
|
||||
```
|
||||
|
||||
## Marker Types
|
||||
|
||||
```html
|
||||
<span v-mark.underline>Underlined</span>
|
||||
<span v-mark.circle>Circled</span>
|
||||
<span v-mark.highlight>Highlighted</span>
|
||||
<span v-mark.strike-through>Struck through</span>
|
||||
<span v-mark.box>Boxed</span>
|
||||
```
|
||||
|
||||
## Colors
|
||||
|
||||
```html
|
||||
<span v-mark.red>Red marker</span>
|
||||
<span v-mark.blue>Blue marker</span>
|
||||
```
|
||||
|
||||
Custom color:
|
||||
```html
|
||||
<span v-mark="{ color: '#234' }">Custom color</span>
|
||||
```
|
||||
|
||||
## Click Timing
|
||||
|
||||
Works like v-click:
|
||||
|
||||
```html
|
||||
<span v-mark="5">Appears on click 5</span>
|
||||
<span v-mark="'+1'">Next click</span>
|
||||
```
|
||||
|
||||
## Full Options
|
||||
|
||||
```html
|
||||
<span v-mark="{ at: 5, color: '#234', type: 'circle' }">
|
||||
Custom marker
|
||||
</span>
|
||||
```
|
||||
37
skills/slidev/references/api-slide-hooks.md
Normal file
37
skills/slidev/references/api-slide-hooks.md
Normal file
@@ -0,0 +1,37 @@
|
||||
---
|
||||
name: slide-hooks
|
||||
description: Lifecycle hooks for slide components
|
||||
---
|
||||
|
||||
# Slide Hooks
|
||||
|
||||
Lifecycle hooks for slide components.
|
||||
|
||||
## Available Hooks
|
||||
|
||||
```ts
|
||||
import { onSlideEnter, onSlideLeave, useIsSlideActive } from '@slidev/client'
|
||||
|
||||
const isActive = useIsSlideActive()
|
||||
|
||||
onSlideEnter(() => {
|
||||
// Called when slide becomes active
|
||||
})
|
||||
|
||||
onSlideLeave(() => {
|
||||
// Called when slide becomes inactive
|
||||
})
|
||||
```
|
||||
|
||||
## Important
|
||||
|
||||
Do NOT use `onMounted` / `onUnmounted` in slides - component instance persists even when slide is inactive.
|
||||
|
||||
Use `onSlideEnter` and `onSlideLeave` instead.
|
||||
|
||||
## Use Cases
|
||||
|
||||
- Start/stop animations
|
||||
- Play/pause media
|
||||
- Initialize/cleanup resources
|
||||
- Track analytics
|
||||
36
skills/slidev/references/build-og-image.md
Normal file
36
skills/slidev/references/build-og-image.md
Normal file
@@ -0,0 +1,36 @@
|
||||
---
|
||||
name: og-image
|
||||
description: Configure Open Graph preview image for social sharing
|
||||
---
|
||||
|
||||
# Open Graph Image
|
||||
|
||||
Set preview image for social media sharing.
|
||||
|
||||
## Custom URL
|
||||
|
||||
```md
|
||||
---
|
||||
seoMeta:
|
||||
ogImage: https://url.to.your.image.png
|
||||
---
|
||||
```
|
||||
|
||||
## Local Image
|
||||
|
||||
Place `./og-image.png` in project root - Slidev uses it automatically.
|
||||
|
||||
## Auto-generate
|
||||
|
||||
Generate from first slide:
|
||||
|
||||
```md
|
||||
---
|
||||
seoMeta:
|
||||
ogImage: auto
|
||||
---
|
||||
```
|
||||
|
||||
Uses Playwright to capture first slide. Requires playwright to be installed.
|
||||
|
||||
Generated image saved as `./og-image.png` - can be committed to repo.
|
||||
40
skills/slidev/references/build-pdf.md
Normal file
40
skills/slidev/references/build-pdf.md
Normal file
@@ -0,0 +1,40 @@
|
||||
---
|
||||
name: pdf
|
||||
description: Include downloadable PDF in SPA build
|
||||
---
|
||||
|
||||
# Generate PDF when Building
|
||||
|
||||
Generate a downloadable PDF alongside your built slides.
|
||||
|
||||
## Enable in Headmatter
|
||||
|
||||
```md
|
||||
---
|
||||
download: true
|
||||
---
|
||||
```
|
||||
|
||||
This generates a PDF and adds a download button to the built slides.
|
||||
|
||||
## Custom PDF URL
|
||||
|
||||
Skip generation and use an existing PDF:
|
||||
|
||||
```md
|
||||
---
|
||||
download: 'https://example.com/my-talk.pdf'
|
||||
---
|
||||
```
|
||||
|
||||
## CLI Option
|
||||
|
||||
```bash
|
||||
slidev build --download
|
||||
```
|
||||
|
||||
## Export Options
|
||||
|
||||
Configure PDF export settings via:
|
||||
- CLI: `slidev build --download --with-clicks --timeout 60000`
|
||||
- Headmatter: Set `exportFilename`, `withClicks`, etc.
|
||||
34
skills/slidev/references/build-remote-assets.md
Normal file
34
skills/slidev/references/build-remote-assets.md
Normal file
@@ -0,0 +1,34 @@
|
||||
---
|
||||
name: remote-assets
|
||||
description: Bundle remote images and assets for offline use
|
||||
---
|
||||
|
||||
# Bundle Remote Assets
|
||||
|
||||
Remote images are automatically cached on first run for faster loading.
|
||||
|
||||
## Remote Images
|
||||
|
||||
```md
|
||||
|
||||
```
|
||||
|
||||
Cached automatically by vite-plugin-remote-assets.
|
||||
|
||||
## Local Images
|
||||
|
||||
Place in `public/` folder and reference with leading slash:
|
||||
|
||||
```md
|
||||
|
||||
```
|
||||
|
||||
Do NOT use relative paths like `./pic.png`.
|
||||
|
||||
## Custom Styling
|
||||
|
||||
Convert to img tag for custom sizes/styles:
|
||||
|
||||
```html
|
||||
<img src="/pic.png" class="m-40 h-40 rounded shadow" />
|
||||
```
|
||||
43
skills/slidev/references/build-seo-meta.md
Normal file
43
skills/slidev/references/build-seo-meta.md
Normal file
@@ -0,0 +1,43 @@
|
||||
---
|
||||
name: seo-meta
|
||||
description: Configure SEO and social media meta tags
|
||||
---
|
||||
|
||||
# SEO Meta Tags
|
||||
|
||||
Configure social media and search engine meta tags.
|
||||
|
||||
## Configuration
|
||||
|
||||
```yaml
|
||||
---
|
||||
seoMeta:
|
||||
ogTitle: Slidev Starter Template
|
||||
ogDescription: Presentation slides for developers
|
||||
ogImage: https://cover.sli.dev
|
||||
ogUrl: https://example.com
|
||||
twitterCard: summary_large_image
|
||||
twitterTitle: Slidev Starter Template
|
||||
twitterDescription: Presentation slides for developers
|
||||
twitterImage: https://cover.sli.dev
|
||||
twitterSite: username
|
||||
twitterUrl: https://example.com
|
||||
---
|
||||
```
|
||||
|
||||
## Available Options
|
||||
|
||||
**Open Graph (Facebook, LinkedIn):**
|
||||
- `ogTitle` - Title
|
||||
- `ogDescription` - Description
|
||||
- `ogImage` - Preview image URL
|
||||
- `ogUrl` - Canonical URL
|
||||
|
||||
**Twitter Card:**
|
||||
- `twitterCard` - Card type (summary, summary_large_image)
|
||||
- `twitterTitle` - Title
|
||||
- `twitterDescription` - Description
|
||||
- `twitterImage` - Preview image URL
|
||||
- `twitterSite` - Twitter username
|
||||
|
||||
Powered by unhead.
|
||||
64
skills/slidev/references/code-groups.md
Normal file
64
skills/slidev/references/code-groups.md
Normal file
@@ -0,0 +1,64 @@
|
||||
---
|
||||
name: code-groups
|
||||
description: Group multiple code blocks with tabs and automatic icons
|
||||
---
|
||||
|
||||
# Code Groups
|
||||
|
||||
Group multiple code blocks with tabs and automatic icons.
|
||||
|
||||
## Requirements
|
||||
|
||||
Enable MDC syntax in headmatter:
|
||||
|
||||
```md
|
||||
---
|
||||
mdc: true
|
||||
---
|
||||
```
|
||||
|
||||
## Syntax
|
||||
|
||||
````md
|
||||
::code-group
|
||||
|
||||
```sh [npm]
|
||||
npm i @slidev/cli
|
||||
```
|
||||
|
||||
```sh [yarn]
|
||||
yarn add @slidev/cli
|
||||
```
|
||||
|
||||
```sh [pnpm]
|
||||
pnpm add @slidev/cli
|
||||
```
|
||||
|
||||
::
|
||||
````
|
||||
|
||||
## Title Icon Matching
|
||||
|
||||
Icons auto-match by title name. Install `@iconify-json/vscode-icons` for built-in icons.
|
||||
|
||||
Supported: npm, yarn, pnpm, bun, deno, vue, react, typescript, javascript, and many more.
|
||||
|
||||
## Custom Icons
|
||||
|
||||
Use `~icon~` syntax in title:
|
||||
|
||||
````md
|
||||
```js [npm ~i-uil:github~]
|
||||
console.log('Hello!')
|
||||
```
|
||||
````
|
||||
|
||||
Requires:
|
||||
1. Install icon collection: `pnpm add @iconify-json/uil`
|
||||
2. Add to safelist in `uno.config.ts`:
|
||||
|
||||
```ts
|
||||
export default defineConfig({
|
||||
safelist: ['i-uil:github']
|
||||
})
|
||||
```
|
||||
55
skills/slidev/references/code-import-snippet.md
Normal file
55
skills/slidev/references/code-import-snippet.md
Normal file
@@ -0,0 +1,55 @@
|
||||
---
|
||||
name: import-snippet
|
||||
description: Import code from external files into slides with optional region selection
|
||||
---
|
||||
|
||||
# Import Code Snippets
|
||||
|
||||
Import code from external files into slides.
|
||||
|
||||
## Basic Syntax
|
||||
|
||||
```md
|
||||
<<< @/snippets/snippet.js
|
||||
```
|
||||
|
||||
`@` = package root directory. Recommended: place snippets in `@/snippets/`.
|
||||
|
||||
## Import Region
|
||||
|
||||
Use VS Code region syntax:
|
||||
|
||||
```md
|
||||
<<< @/snippets/snippet.js#region-name
|
||||
```
|
||||
|
||||
## Specify Language
|
||||
|
||||
```md
|
||||
<<< @/snippets/snippet.js ts
|
||||
```
|
||||
|
||||
## With Features
|
||||
|
||||
Combine with line highlighting, Monaco editor:
|
||||
|
||||
```md
|
||||
<<< @/snippets/snippet.js {2,3|5}{lines:true}
|
||||
<<< @/snippets/snippet.js ts {monaco}{height:200px}
|
||||
```
|
||||
|
||||
## Placeholder
|
||||
|
||||
Use `{*}` for line highlighting placeholder:
|
||||
|
||||
```md
|
||||
<<< @/snippets/snippet.js {*}{lines:true}
|
||||
```
|
||||
|
||||
## Monaco Write
|
||||
|
||||
Link editor to file for live editing:
|
||||
|
||||
```md
|
||||
<<< ./some-file.ts {monaco-write}
|
||||
```
|
||||
50
skills/slidev/references/code-line-highlighting.md
Normal file
50
skills/slidev/references/code-line-highlighting.md
Normal file
@@ -0,0 +1,50 @@
|
||||
---
|
||||
name: line-highlighting
|
||||
description: Highlight specific lines in code blocks with static or click-based dynamic highlighting
|
||||
---
|
||||
|
||||
# Line Highlighting
|
||||
|
||||
Highlight specific lines in code blocks.
|
||||
|
||||
## Static Highlighting
|
||||
|
||||
````md
|
||||
```ts {2,3}
|
||||
function add(
|
||||
a: Ref<number> | number,
|
||||
b: Ref<number> | number
|
||||
) {
|
||||
return computed(() => unref(a) + unref(b))
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
## Dynamic (Click-based)
|
||||
|
||||
Use `|` to separate stages:
|
||||
|
||||
````md
|
||||
```ts {2-3|5|all}
|
||||
function add(
|
||||
a: Ref<number> | number,
|
||||
b: Ref<number> | number
|
||||
) {
|
||||
return computed(() => unref(a) + unref(b))
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
Click progression: lines 2-3 → line 5 → all lines
|
||||
|
||||
## Special Values
|
||||
|
||||
- `hide` - Hide the code block
|
||||
- `none` - Show code without highlighting
|
||||
- `all` - Highlight all lines
|
||||
|
||||
````md
|
||||
```ts {hide|none|all}
|
||||
// Hidden → No highlight → All highlighted
|
||||
```
|
||||
````
|
||||
46
skills/slidev/references/code-line-numbers.md
Normal file
46
skills/slidev/references/code-line-numbers.md
Normal file
@@ -0,0 +1,46 @@
|
||||
---
|
||||
name: line-numbers
|
||||
description: Enable line numbering for code blocks globally or per-block
|
||||
---
|
||||
|
||||
# Code Block Line Numbers
|
||||
|
||||
Enable line numbering for code blocks.
|
||||
|
||||
## Global Setting
|
||||
|
||||
Enable for all code blocks in headmatter:
|
||||
|
||||
```md
|
||||
---
|
||||
lineNumbers: true
|
||||
---
|
||||
```
|
||||
|
||||
## Per-Block Setting
|
||||
|
||||
````md
|
||||
```ts {6,7}{lines:true,startLine:5}
|
||||
function add(
|
||||
a: Ref<number> | number,
|
||||
b: Ref<number> | number
|
||||
) {
|
||||
return computed(() => unref(a) + unref(b))
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
## Options
|
||||
|
||||
- `lines: true/false` - Enable/disable line numbers
|
||||
- `startLine: number` - Starting line number (default: 1)
|
||||
|
||||
## With Line Highlighting
|
||||
|
||||
Use `{*}` as placeholder when combining with other features:
|
||||
|
||||
````md
|
||||
```ts {*}{lines:true,startLine:5}
|
||||
// code here
|
||||
```
|
||||
````
|
||||
57
skills/slidev/references/code-magic-move.md
Normal file
57
skills/slidev/references/code-magic-move.md
Normal file
@@ -0,0 +1,57 @@
|
||||
---
|
||||
name: magic-move
|
||||
description: Animate code changes with smooth transitions between code blocks
|
||||
---
|
||||
|
||||
# Shiki Magic Move
|
||||
|
||||
Animate code changes with smooth transitions (like Keynote's Magic Move).
|
||||
|
||||
## Basic Usage
|
||||
|
||||
`````md
|
||||
````md magic-move
|
||||
```js
|
||||
console.log(`Step ${1}`)
|
||||
```
|
||||
```js
|
||||
console.log(`Step ${1 + 1}`)
|
||||
```
|
||||
```ts
|
||||
console.log(`Step ${3}` as string)
|
||||
```
|
||||
````
|
||||
`````
|
||||
|
||||
Note: Use 4 backticks for the wrapper.
|
||||
|
||||
## With Line Highlighting
|
||||
|
||||
`````md
|
||||
````md magic-move {at:4, lines: true}
|
||||
```js {*|1|2-5}
|
||||
let count = 1
|
||||
function add() {
|
||||
count++
|
||||
}
|
||||
```
|
||||
|
||||
Non-code blocks in between are ignored.
|
||||
|
||||
```js {*}{lines: false}
|
||||
let count = 1
|
||||
const add = () => count += 1
|
||||
```
|
||||
````
|
||||
`````
|
||||
|
||||
## How It Works
|
||||
|
||||
- Wraps multiple code blocks as one
|
||||
- Each block is a "step"
|
||||
- Morphs between steps on click
|
||||
- Syntax highlighting preserved during animation
|
||||
|
||||
## Resources
|
||||
|
||||
- Playground: https://shiki-magic-move.netlify.app/
|
||||
37
skills/slidev/references/code-max-height.md
Normal file
37
skills/slidev/references/code-max-height.md
Normal file
@@ -0,0 +1,37 @@
|
||||
---
|
||||
name: max-height
|
||||
description: Set a fixed height for code blocks with scrolling for long code
|
||||
---
|
||||
|
||||
# Code Block Max Height
|
||||
|
||||
Set a fixed height for code blocks with scrolling.
|
||||
|
||||
## Usage
|
||||
|
||||
````md
|
||||
```ts {2|3|7|12}{maxHeight:'100px'}
|
||||
function add(
|
||||
a: Ref<number> | number,
|
||||
b: Ref<number> | number
|
||||
) {
|
||||
return computed(() => unref(a) + unref(b))
|
||||
}
|
||||
/// ...as many lines as you want
|
||||
const c = add(1, 2)
|
||||
```
|
||||
````
|
||||
|
||||
## With Line Highlighting Placeholder
|
||||
|
||||
Use `{*}` when you only need maxHeight:
|
||||
|
||||
````md
|
||||
```ts {*}{maxHeight:'100px'}
|
||||
// long code here
|
||||
```
|
||||
````
|
||||
|
||||
## Use Case
|
||||
|
||||
When code is too long to fit on one slide but you want to show it all with scrolling.
|
||||
42
skills/slidev/references/code-twoslash.md
Normal file
42
skills/slidev/references/code-twoslash.md
Normal file
@@ -0,0 +1,42 @@
|
||||
---
|
||||
name: twoslash
|
||||
description: Show TypeScript type information inline or on hover in code blocks
|
||||
---
|
||||
|
||||
# TwoSlash Integration
|
||||
|
||||
Show TypeScript type information inline or on hover.
|
||||
|
||||
## Usage
|
||||
|
||||
````md
|
||||
```ts twoslash
|
||||
import { ref } from 'vue'
|
||||
|
||||
const count = ref(0)
|
||||
// ^?
|
||||
```
|
||||
````
|
||||
|
||||
## Features
|
||||
|
||||
- Type information on hover
|
||||
- Inline type annotations with `^?`
|
||||
- Errors and warnings display
|
||||
- Full TypeScript compiler integration
|
||||
|
||||
## Annotations
|
||||
|
||||
```ts twoslash
|
||||
const count = ref(0)
|
||||
// ^?
|
||||
// Shows: const count: Ref<number>
|
||||
```
|
||||
|
||||
## Use Case
|
||||
|
||||
Perfect for TypeScript/JavaScript teaching materials where showing types helps understanding.
|
||||
|
||||
## Resources
|
||||
|
||||
- TwoSlash docs: https://twoslash.netlify.app/
|
||||
196
skills/slidev/references/core-animations.md
Normal file
196
skills/slidev/references/core-animations.md
Normal file
@@ -0,0 +1,196 @@
|
||||
---
|
||||
name: animations
|
||||
description: Click animations, motion effects, and slide transitions
|
||||
---
|
||||
|
||||
# Animations
|
||||
|
||||
Click animations, motion effects, and slide transitions.
|
||||
|
||||
## Click Animations
|
||||
|
||||
### v-click Directive
|
||||
|
||||
```md
|
||||
<div v-click>Appears on click</div>
|
||||
<div v-click>Appears on next click</div>
|
||||
```
|
||||
|
||||
### v-clicks Component
|
||||
|
||||
Animate list items:
|
||||
|
||||
```md
|
||||
<v-clicks>
|
||||
|
||||
- Item 1
|
||||
- Item 2
|
||||
- Item 3
|
||||
|
||||
</v-clicks>
|
||||
```
|
||||
|
||||
With depth for nested lists:
|
||||
|
||||
```md
|
||||
<v-clicks depth="2">
|
||||
|
||||
- Parent 1
|
||||
- Child 1
|
||||
- Child 2
|
||||
- Parent 2
|
||||
|
||||
</v-clicks>
|
||||
```
|
||||
|
||||
### Click Positioning
|
||||
|
||||
Relative positioning:
|
||||
```md
|
||||
<div v-click>1st (default)</div>
|
||||
<div v-click="+1">2nd</div>
|
||||
<div v-click="-1">Same as previous</div>
|
||||
```
|
||||
|
||||
Absolute positioning:
|
||||
```md
|
||||
<div v-click="3">Appears on click 3</div>
|
||||
<div v-click="[2,5]">Visible clicks 2-5</div>
|
||||
```
|
||||
|
||||
### v-after
|
||||
|
||||
Show with previous element:
|
||||
|
||||
```md
|
||||
<div v-click>Main element</div>
|
||||
<div v-after>Appears with main element</div>
|
||||
```
|
||||
|
||||
### v-switch
|
||||
|
||||
Conditional rendering by click:
|
||||
|
||||
```md
|
||||
<v-switch>
|
||||
<template #1>First state</template>
|
||||
<template #2>Second state</template>
|
||||
<template #3>Third state</template>
|
||||
</v-switch>
|
||||
```
|
||||
|
||||
## Custom Click Count
|
||||
|
||||
```md
|
||||
---
|
||||
clicks: 10
|
||||
---
|
||||
```
|
||||
|
||||
Or starting from specific count:
|
||||
|
||||
```md
|
||||
---
|
||||
clicksStart: 5
|
||||
---
|
||||
```
|
||||
|
||||
## Motion Animations
|
||||
|
||||
Using @vueuse/motion:
|
||||
|
||||
```md
|
||||
<div
|
||||
v-motion
|
||||
:initial="{ x: -100, opacity: 0 }"
|
||||
:enter="{ x: 0, opacity: 1 }"
|
||||
>
|
||||
Animated content
|
||||
</div>
|
||||
```
|
||||
|
||||
Click-based motion:
|
||||
|
||||
```md
|
||||
<div
|
||||
v-motion
|
||||
:initial="{ scale: 1 }"
|
||||
:click-1="{ scale: 1.5 }"
|
||||
:click-2="{ scale: 1 }"
|
||||
>
|
||||
Scales on clicks
|
||||
</div>
|
||||
```
|
||||
|
||||
## Slide Transitions
|
||||
|
||||
In headmatter (all slides):
|
||||
|
||||
```md
|
||||
---
|
||||
transition: slide-left
|
||||
---
|
||||
```
|
||||
|
||||
Per-slide:
|
||||
|
||||
```md
|
||||
---
|
||||
transition: fade
|
||||
---
|
||||
```
|
||||
|
||||
### Built-in Transitions
|
||||
|
||||
- `fade` / `fade-out`
|
||||
- `slide-left` / `slide-right`
|
||||
- `slide-up` / `slide-down`
|
||||
- `view-transition` (View Transitions API)
|
||||
|
||||
### Directional Transitions
|
||||
|
||||
Different transitions for forward/backward:
|
||||
|
||||
```md
|
||||
---
|
||||
transition: slide-left | slide-right
|
||||
---
|
||||
```
|
||||
|
||||
### Custom Transitions
|
||||
|
||||
Define CSS classes:
|
||||
|
||||
```css
|
||||
.my-transition-enter-active,
|
||||
.my-transition-leave-active {
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
.my-transition-enter-from,
|
||||
.my-transition-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(100px);
|
||||
}
|
||||
```
|
||||
|
||||
Use: `transition: my-transition`
|
||||
|
||||
## CSS Classes
|
||||
|
||||
Animation targets get these classes:
|
||||
- `.slidev-vclick-target` - Animated element
|
||||
- `.slidev-vclick-hidden` - Hidden state
|
||||
- `.slidev-vclick-current` - Current click target
|
||||
- `.slidev-vclick-prior` - Previously shown
|
||||
|
||||
## Default Animation CSS
|
||||
|
||||
```css
|
||||
.slidev-vclick-target {
|
||||
transition: opacity 100ms ease;
|
||||
}
|
||||
.slidev-vclick-hidden {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
```
|
||||
140
skills/slidev/references/core-cli.md
Normal file
140
skills/slidev/references/core-cli.md
Normal file
@@ -0,0 +1,140 @@
|
||||
---
|
||||
name: cli
|
||||
description: Slidev command-line interface reference
|
||||
---
|
||||
|
||||
# CLI Commands
|
||||
|
||||
Slidev command-line interface reference.
|
||||
|
||||
## Dev Server
|
||||
|
||||
```bash
|
||||
slidev [entry]
|
||||
slidev slides.md
|
||||
```
|
||||
|
||||
Options:
|
||||
| Option | Default | Description |
|
||||
|--------|---------|-------------|
|
||||
| `--port` | 3030 | Server port |
|
||||
| `--open` | false | Open browser |
|
||||
| `--remote [password]` | - | Enable remote access |
|
||||
| `--bind` | 0.0.0.0 | Bind address |
|
||||
| `--base` | / | Base URL path |
|
||||
| `--log` | warn | Log level |
|
||||
| `--force` | false | Force optimizer re-bundle |
|
||||
| `--theme` | - | Override theme |
|
||||
|
||||
Examples:
|
||||
```bash
|
||||
slidev --port 8080 --open
|
||||
slidev --remote mypassword
|
||||
slidev --base /talks/my-talk/
|
||||
```
|
||||
|
||||
## Build
|
||||
|
||||
```bash
|
||||
slidev build [entry]
|
||||
```
|
||||
|
||||
Options:
|
||||
| Option | Default | Description |
|
||||
|--------|---------|-------------|
|
||||
| `--out` | dist | Output directory |
|
||||
| `--base` | / | Base URL for deployment |
|
||||
| `--download` | false | Include PDF download |
|
||||
| `--theme` | - | Override theme |
|
||||
| `--without-notes` | false | Exclude presenter notes |
|
||||
|
||||
Examples:
|
||||
```bash
|
||||
slidev build --base /my-repo/
|
||||
slidev build --download --out public
|
||||
slidev build slides1.md slides2.md # Multiple builds
|
||||
```
|
||||
|
||||
## Export
|
||||
|
||||
```bash
|
||||
slidev export [entry]
|
||||
```
|
||||
|
||||
Options:
|
||||
| Option | Default | Description |
|
||||
|--------|---------|-------------|
|
||||
| `--output` | - | Output filename |
|
||||
| `--format` | pdf | pdf / png / pptx / md |
|
||||
| `--timeout` | 30000 | Timeout per slide (ms) |
|
||||
| `--range` | - | Slide range (e.g., 1,4-7) |
|
||||
| `--dark` | false | Export dark mode |
|
||||
| `--with-clicks` | false | Include click steps |
|
||||
| `--with-toc` | false | PDF table of contents |
|
||||
| `--wait` | 0 | Wait ms before export |
|
||||
| `--wait-until` | networkidle | Wait condition |
|
||||
| `--omit-background` | false | Transparent background |
|
||||
| `--executable-path` | - | Browser path |
|
||||
|
||||
Examples:
|
||||
```bash
|
||||
slidev export
|
||||
slidev export --format pptx
|
||||
slidev export --format png --range 1-5
|
||||
slidev export --with-clicks --dark
|
||||
slidev export --timeout 60000 --wait 2000
|
||||
```
|
||||
|
||||
## Format
|
||||
|
||||
```bash
|
||||
slidev format [entry]
|
||||
```
|
||||
|
||||
Formats the slides markdown file.
|
||||
|
||||
## Theme Eject
|
||||
|
||||
```bash
|
||||
slidev theme eject [entry]
|
||||
```
|
||||
|
||||
Options:
|
||||
| Option | Default | Description |
|
||||
|--------|---------|-------------|
|
||||
| `--dir` | theme | Output directory |
|
||||
| `--theme` | - | Theme to eject |
|
||||
|
||||
Extracts theme to local directory for customization.
|
||||
|
||||
## npm Script Usage
|
||||
|
||||
In package.json:
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"dev": "slidev",
|
||||
"build": "slidev build",
|
||||
"export": "slidev export"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
With arguments (note `--`):
|
||||
```bash
|
||||
npm run dev -- --port 8080 --open
|
||||
npm run export -- --format pptx
|
||||
```
|
||||
|
||||
## Boolean Options
|
||||
|
||||
```bash
|
||||
slidev --open # Same as --open true
|
||||
slidev --no-open # Same as --open false
|
||||
```
|
||||
|
||||
## Install CLI Globally
|
||||
|
||||
```bash
|
||||
npm i -g @slidev/cli
|
||||
```
|
||||
197
skills/slidev/references/core-components.md
Normal file
197
skills/slidev/references/core-components.md
Normal file
@@ -0,0 +1,197 @@
|
||||
---
|
||||
name: components
|
||||
description: Ready-to-use components in Slidev
|
||||
---
|
||||
|
||||
# Built-in Components
|
||||
|
||||
Ready-to-use components in Slidev.
|
||||
|
||||
## Navigation
|
||||
|
||||
### Link
|
||||
|
||||
Navigate to slide:
|
||||
```md
|
||||
<Link to="5">Go to slide 5</Link>
|
||||
<Link to="intro">Go to intro</Link> <!-- with routeAlias -->
|
||||
```
|
||||
|
||||
### SlideCurrentNo / SlidesTotal
|
||||
|
||||
```md
|
||||
Slide <SlideCurrentNo /> of <SlidesTotal />
|
||||
```
|
||||
|
||||
### Toc (Table of Contents)
|
||||
|
||||
```md
|
||||
<Toc />
|
||||
<Toc maxDepth="2" />
|
||||
<Toc columns="2" />
|
||||
```
|
||||
|
||||
Props:
|
||||
- `columns` - Number of columns
|
||||
- `maxDepth` / `minDepth` - Heading depth filter
|
||||
- `mode` - 'all' | 'onlyCurrentTree' | 'onlySiblings'
|
||||
|
||||
### TitleRenderer
|
||||
|
||||
Render slide title:
|
||||
```md
|
||||
<TitleRenderer no="3" />
|
||||
```
|
||||
|
||||
## Animations
|
||||
|
||||
### VClick / VClicks
|
||||
|
||||
```md
|
||||
<VClick>Shows on click</VClick>
|
||||
|
||||
<VClicks>
|
||||
|
||||
- Item 1
|
||||
- Item 2
|
||||
|
||||
</VClicks>
|
||||
```
|
||||
|
||||
### VAfter
|
||||
|
||||
```md
|
||||
<VClick>First</VClick>
|
||||
<VAfter>Shows with first</VAfter>
|
||||
```
|
||||
|
||||
### VSwitch
|
||||
|
||||
```md
|
||||
<VSwitch>
|
||||
<template #1>State 1</template>
|
||||
<template #2>State 2</template>
|
||||
</VSwitch>
|
||||
```
|
||||
|
||||
## Drawing
|
||||
|
||||
### Arrow
|
||||
|
||||
```md
|
||||
<Arrow x1="10" y1="10" x2="100" y2="100" />
|
||||
<Arrow x1="10" y1="10" x2="100" y2="100" two-way />
|
||||
```
|
||||
|
||||
Props: `x1`, `y1`, `x2`, `y2`, `width`, `color`, `two-way`
|
||||
|
||||
### VDragArrow
|
||||
|
||||
Draggable arrow:
|
||||
```md
|
||||
<VDragArrow />
|
||||
```
|
||||
|
||||
## Layout
|
||||
|
||||
### Transform
|
||||
|
||||
Scale elements:
|
||||
```md
|
||||
<Transform :scale="0.5">
|
||||
<LargeContent />
|
||||
</Transform>
|
||||
```
|
||||
|
||||
Props: `scale`, `origin`
|
||||
|
||||
### AutoFitText
|
||||
|
||||
Auto-sizing text:
|
||||
```md
|
||||
<AutoFitText :max="200" :min="50" modelValue="Hello" />
|
||||
```
|
||||
|
||||
## Media
|
||||
|
||||
### SlidevVideo
|
||||
|
||||
```md
|
||||
<SlidevVideo v-click autoplay controls>
|
||||
<source src="/video.mp4" type="video/mp4" />
|
||||
</SlidevVideo>
|
||||
```
|
||||
|
||||
Props: `controls`, `autoplay`, `autoreset`, `poster`, `timestamp`
|
||||
|
||||
### Youtube
|
||||
|
||||
```md
|
||||
<Youtube id="dQw4w9WgXcQ" />
|
||||
<Youtube id="dQw4w9WgXcQ" width="600" height="400" />
|
||||
```
|
||||
|
||||
### Tweet
|
||||
|
||||
```md
|
||||
<Tweet id="1423789844234231808" />
|
||||
<Tweet id="1423789844234231808" :scale="0.8" />
|
||||
```
|
||||
|
||||
## Conditional
|
||||
|
||||
### LightOrDark
|
||||
|
||||
```md
|
||||
<LightOrDark>
|
||||
<template #dark>Dark mode content</template>
|
||||
<template #light>Light mode content</template>
|
||||
</LightOrDark>
|
||||
```
|
||||
|
||||
### RenderWhen
|
||||
|
||||
```md
|
||||
<RenderWhen context="presenter">
|
||||
Only in presenter mode
|
||||
</RenderWhen>
|
||||
```
|
||||
|
||||
Context values:
|
||||
- `main` - Main presentation view
|
||||
- `visible` - Visible slides
|
||||
- `print` - Print/export mode
|
||||
- `slide` - Normal slide view
|
||||
- `overview` - Overview mode
|
||||
- `presenter` - Presenter mode
|
||||
- `previewNext` - Next slide preview
|
||||
|
||||
## Branding
|
||||
|
||||
### PoweredBySlidev
|
||||
|
||||
```md
|
||||
<PoweredBySlidev />
|
||||
```
|
||||
|
||||
## Draggable
|
||||
|
||||
### VDrag
|
||||
|
||||
```md
|
||||
<VDrag pos="myElement">
|
||||
Draggable content
|
||||
</VDrag>
|
||||
```
|
||||
|
||||
See [draggable](draggable.md) for details.
|
||||
|
||||
## Component Auto-Import
|
||||
|
||||
Components from these sources are auto-imported:
|
||||
1. Built-in components
|
||||
2. Theme components
|
||||
3. Addon components
|
||||
4. `./components/` directory
|
||||
|
||||
No import statements needed.
|
||||
148
skills/slidev/references/core-exporting.md
Normal file
148
skills/slidev/references/core-exporting.md
Normal file
@@ -0,0 +1,148 @@
|
||||
---
|
||||
name: exporting
|
||||
description: Export presentations to PDF, PPTX, PNG, or Markdown
|
||||
---
|
||||
|
||||
# Exporting Slides
|
||||
|
||||
Export presentations to PDF, PPTX, PNG, or Markdown.
|
||||
|
||||
## Browser Exporter
|
||||
|
||||
Access at `http://localhost:3030/export`:
|
||||
- Select format and options
|
||||
- Preview and download
|
||||
|
||||
## CLI Export
|
||||
|
||||
Requires playwright:
|
||||
```bash
|
||||
pnpm add -D playwright-chromium
|
||||
```
|
||||
|
||||
### PDF Export
|
||||
|
||||
```bash
|
||||
slidev export
|
||||
slidev export --output my-slides.pdf
|
||||
```
|
||||
|
||||
### PowerPoint Export
|
||||
|
||||
```bash
|
||||
slidev export --format pptx
|
||||
```
|
||||
|
||||
### PNG Export
|
||||
|
||||
```bash
|
||||
slidev export --format png
|
||||
slidev export --format png --range 1-5
|
||||
```
|
||||
|
||||
### Markdown Export
|
||||
|
||||
```bash
|
||||
slidev export --format md
|
||||
```
|
||||
|
||||
## Export Options
|
||||
|
||||
### With Click Steps
|
||||
|
||||
Export each click as separate page:
|
||||
```bash
|
||||
slidev export --with-clicks
|
||||
```
|
||||
|
||||
### Dark Mode
|
||||
|
||||
```bash
|
||||
slidev export --dark
|
||||
```
|
||||
|
||||
### Slide Range
|
||||
|
||||
```bash
|
||||
slidev export --range 1,4-7,10
|
||||
```
|
||||
|
||||
### Table of Contents
|
||||
|
||||
PDF with clickable outline:
|
||||
```bash
|
||||
slidev export --with-toc
|
||||
```
|
||||
|
||||
### Timeout
|
||||
|
||||
For slow-rendering slides:
|
||||
```bash
|
||||
slidev export --timeout 60000
|
||||
```
|
||||
|
||||
### Wait
|
||||
|
||||
Wait before capture:
|
||||
```bash
|
||||
slidev export --wait 2000
|
||||
```
|
||||
|
||||
### Wait Until
|
||||
|
||||
Wait condition:
|
||||
```bash
|
||||
slidev export --wait-until networkidle # Default
|
||||
slidev export --wait-until domcontentloaded
|
||||
slidev export --wait-until load
|
||||
slidev export --wait-until none
|
||||
```
|
||||
|
||||
### Transparent Background
|
||||
|
||||
```bash
|
||||
slidev export --omit-background
|
||||
```
|
||||
|
||||
### Custom Browser
|
||||
|
||||
```bash
|
||||
slidev export --executable-path /path/to/chrome
|
||||
```
|
||||
|
||||
## Headmatter Options
|
||||
|
||||
```yaml
|
||||
---
|
||||
exportFilename: my-presentation
|
||||
download: true # Add download button in build
|
||||
export:
|
||||
format: pdf
|
||||
timeout: 30000
|
||||
withClicks: false
|
||||
---
|
||||
```
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Missing Content
|
||||
|
||||
Increase wait time:
|
||||
```bash
|
||||
slidev export --wait 3000 --timeout 60000
|
||||
```
|
||||
|
||||
### Wrong Global Layer State
|
||||
|
||||
Use `--per-slide` or use `slide-top.vue` instead of `global-top.vue`.
|
||||
|
||||
### Broken Emojis
|
||||
|
||||
Use system fonts or install emoji font on server.
|
||||
|
||||
### CI/CD Export
|
||||
|
||||
Install playwright browsers:
|
||||
```bash
|
||||
npx playwright install chromium
|
||||
```
|
||||
195
skills/slidev/references/core-frontmatter.md
Normal file
195
skills/slidev/references/core-frontmatter.md
Normal file
@@ -0,0 +1,195 @@
|
||||
---
|
||||
name: frontmatter
|
||||
description: Configuration options for individual slides
|
||||
---
|
||||
|
||||
# Per-Slide Frontmatter
|
||||
|
||||
Configuration options for individual slides.
|
||||
|
||||
## Layout
|
||||
|
||||
```yaml
|
||||
---
|
||||
layout: center
|
||||
---
|
||||
```
|
||||
|
||||
Available layouts: `default`, `cover`, `center`, `two-cols`, `two-cols-header`, `image`, `image-left`, `image-right`, `iframe`, `iframe-left`, `iframe-right`, `quote`, `section`, `statement`, `fact`, `full`, `intro`, `end`, `none`
|
||||
|
||||
## Background
|
||||
|
||||
```yaml
|
||||
---
|
||||
background: /image.jpg
|
||||
backgroundSize: cover
|
||||
class: text-white
|
||||
---
|
||||
```
|
||||
|
||||
## Click Count
|
||||
|
||||
```yaml
|
||||
---
|
||||
clicks: 5 # Total clicks for this slide
|
||||
clicksStart: 0 # Starting click number
|
||||
---
|
||||
```
|
||||
|
||||
## Transitions
|
||||
|
||||
```yaml
|
||||
---
|
||||
transition: fade # Slide transition
|
||||
---
|
||||
```
|
||||
|
||||
Or different for forward/backward:
|
||||
|
||||
```yaml
|
||||
---
|
||||
transition: slide-left | slide-right
|
||||
---
|
||||
```
|
||||
|
||||
## Zoom
|
||||
|
||||
```yaml
|
||||
---
|
||||
zoom: 0.8 # Scale content (0.8 = 80%)
|
||||
---
|
||||
```
|
||||
|
||||
## Hide Slide
|
||||
|
||||
```yaml
|
||||
---
|
||||
disabled: true # Hide this slide
|
||||
# or
|
||||
hide: true
|
||||
---
|
||||
```
|
||||
|
||||
## Table of Contents
|
||||
|
||||
```yaml
|
||||
---
|
||||
hideInToc: true # Hide from Toc component
|
||||
level: 2 # Override heading level
|
||||
title: Custom Title # Override slide title
|
||||
---
|
||||
```
|
||||
|
||||
## Import External File
|
||||
|
||||
```yaml
|
||||
---
|
||||
src: ./slides/intro.md # Import markdown file
|
||||
---
|
||||
```
|
||||
|
||||
With specific slides:
|
||||
|
||||
```yaml
|
||||
---
|
||||
src: ./other.md#2,5-7 # Import slides 2, 5, 6, 7
|
||||
---
|
||||
```
|
||||
|
||||
## Route Alias
|
||||
|
||||
```yaml
|
||||
---
|
||||
routeAlias: intro # URL: /intro instead of /1
|
||||
---
|
||||
```
|
||||
|
||||
## Preload
|
||||
|
||||
```yaml
|
||||
---
|
||||
preload: false # Don't mount until entering
|
||||
---
|
||||
```
|
||||
|
||||
## Draggable Positions
|
||||
|
||||
```yaml
|
||||
---
|
||||
dragPos:
|
||||
logo: 100,50,200,100,0 # Left,Top,Width,Height,Rotate
|
||||
arrow: 300,200,50,50,45
|
||||
---
|
||||
```
|
||||
|
||||
## Image Layouts
|
||||
|
||||
```yaml
|
||||
---
|
||||
layout: image-left
|
||||
image: /photo.jpg
|
||||
backgroundSize: contain
|
||||
class: my-custom-class
|
||||
---
|
||||
```
|
||||
|
||||
## Iframe Layouts
|
||||
|
||||
```yaml
|
||||
---
|
||||
layout: iframe
|
||||
url: https://example.com
|
||||
---
|
||||
```
|
||||
|
||||
## Two Columns
|
||||
|
||||
```yaml
|
||||
---
|
||||
layout: two-cols
|
||||
---
|
||||
|
||||
# Left Side
|
||||
|
||||
Content
|
||||
|
||||
::right::
|
||||
|
||||
# Right Side
|
||||
|
||||
Content
|
||||
```
|
||||
|
||||
## Two Columns with Header
|
||||
|
||||
```yaml
|
||||
---
|
||||
layout: two-cols-header
|
||||
---
|
||||
|
||||
# Header
|
||||
|
||||
::left::
|
||||
|
||||
Left content
|
||||
|
||||
::right::
|
||||
|
||||
Right content
|
||||
```
|
||||
|
||||
## Full Example
|
||||
|
||||
```yaml
|
||||
---
|
||||
layout: center
|
||||
background: /bg.jpg
|
||||
class: text-white text-center
|
||||
transition: fade
|
||||
clicks: 3
|
||||
zoom: 0.9
|
||||
hideInToc: false
|
||||
---
|
||||
|
||||
# Slide Content
|
||||
```
|
||||
155
skills/slidev/references/core-global-context.md
Normal file
155
skills/slidev/references/core-global-context.md
Normal file
@@ -0,0 +1,155 @@
|
||||
---
|
||||
name: global-context
|
||||
description: Access navigation, slide info, and configuration programmatically
|
||||
---
|
||||
|
||||
# Global Context & API
|
||||
|
||||
Access navigation, slide info, and configuration programmatically.
|
||||
|
||||
## Template Variables
|
||||
|
||||
Available in slides and components:
|
||||
|
||||
```md
|
||||
Page {{ $page }} of {{ $nav.total }}
|
||||
Title: {{ $slidev.configs.title }}
|
||||
```
|
||||
|
||||
### $nav
|
||||
|
||||
Navigation state and controls:
|
||||
|
||||
| Property | Type | Description |
|
||||
|----------|------|-------------|
|
||||
| `$nav.currentPage` | number | Current page (1-indexed) |
|
||||
| `$nav.currentLayout` | string | Current layout name |
|
||||
| `$nav.total` | number | Total slides |
|
||||
| `$nav.isPresenter` | boolean | In presenter mode |
|
||||
| `$nav.next()` | function | Next click/slide |
|
||||
| `$nav.prev()` | function | Previous click/slide |
|
||||
| `$nav.nextSlide()` | function | Next slide |
|
||||
| `$nav.prevSlide()` | function | Previous slide |
|
||||
| `$nav.go(n)` | function | Go to slide n |
|
||||
|
||||
### $slidev
|
||||
|
||||
Global context:
|
||||
|
||||
| Property | Description |
|
||||
|----------|-------------|
|
||||
| `$slidev.configs` | Project config (title, etc.) |
|
||||
| `$slidev.themeConfigs` | Theme config |
|
||||
|
||||
### $frontmatter
|
||||
|
||||
Current slide frontmatter:
|
||||
|
||||
```md
|
||||
Layout: {{ $frontmatter.layout }}
|
||||
```
|
||||
|
||||
### $clicks
|
||||
|
||||
Current click count on slide.
|
||||
|
||||
### $page
|
||||
|
||||
Current page number (1-indexed).
|
||||
|
||||
### $renderContext
|
||||
|
||||
Current render context:
|
||||
- `'slide'` - Normal slide view
|
||||
- `'overview'` - Overview mode
|
||||
- `'presenter'` - Presenter mode
|
||||
- `'previewNext'` - Next slide preview
|
||||
|
||||
## Composables
|
||||
|
||||
Import from `@slidev/client`:
|
||||
|
||||
```ts
|
||||
import {
|
||||
useNav,
|
||||
useDarkMode,
|
||||
useIsSlideActive,
|
||||
useSlideContext,
|
||||
onSlideEnter,
|
||||
onSlideLeave,
|
||||
} from '@slidev/client'
|
||||
```
|
||||
|
||||
### useNav
|
||||
|
||||
```ts
|
||||
const nav = useNav()
|
||||
nav.next()
|
||||
nav.go(5)
|
||||
console.log(nav.currentPage)
|
||||
```
|
||||
|
||||
### useDarkMode
|
||||
|
||||
```ts
|
||||
const { isDark, toggle } = useDarkMode()
|
||||
```
|
||||
|
||||
### useIsSlideActive
|
||||
|
||||
```ts
|
||||
const isActive = useIsSlideActive()
|
||||
// Returns ref<boolean>
|
||||
```
|
||||
|
||||
### useSlideContext
|
||||
|
||||
```ts
|
||||
const { $page, $clicks, $frontmatter } = useSlideContext()
|
||||
```
|
||||
|
||||
## Lifecycle Hooks
|
||||
|
||||
```ts
|
||||
import { onSlideEnter, onSlideLeave } from '@slidev/client'
|
||||
|
||||
onSlideEnter(() => {
|
||||
// Slide became active
|
||||
startAnimation()
|
||||
})
|
||||
|
||||
onSlideLeave(() => {
|
||||
// Slide became inactive
|
||||
cleanup()
|
||||
})
|
||||
```
|
||||
|
||||
**Important:** Don't use `onMounted`/`onUnmounted` in slides - component instance persists. Use `onSlideEnter`/`onSlideLeave` instead.
|
||||
|
||||
## Conditional Rendering Examples
|
||||
|
||||
```html
|
||||
<!-- Show only in presenter mode -->
|
||||
<div v-if="$nav.isPresenter">
|
||||
Presenter notes
|
||||
</div>
|
||||
|
||||
<!-- Hide on cover slide -->
|
||||
<footer v-if="$nav.currentLayout !== 'cover'">
|
||||
Page {{ $nav.currentPage }}
|
||||
</footer>
|
||||
|
||||
<!-- Different content by context -->
|
||||
<template v-if="$renderContext === 'slide'">
|
||||
Normal view
|
||||
</template>
|
||||
<template v-else-if="$renderContext === 'presenter'">
|
||||
Presenter view
|
||||
</template>
|
||||
```
|
||||
|
||||
## Type Imports
|
||||
|
||||
```ts
|
||||
import type { TocItem } from '@slidev/types'
|
||||
```
|
||||
188
skills/slidev/references/core-headmatter.md
Normal file
188
skills/slidev/references/core-headmatter.md
Normal file
@@ -0,0 +1,188 @@
|
||||
---
|
||||
name: headmatter
|
||||
description: Deck-wide configuration options in the first frontmatter block
|
||||
---
|
||||
|
||||
# Headmatter Configuration
|
||||
|
||||
Deck-wide configuration options in the first frontmatter block.
|
||||
|
||||
## Theme & Appearance
|
||||
|
||||
```yaml
|
||||
---
|
||||
theme: default # Theme package or path
|
||||
colorSchema: auto # 'auto' | 'light' | 'dark'
|
||||
favicon: /favicon.ico # Favicon URL
|
||||
aspectRatio: 16/9 # Slide aspect ratio
|
||||
canvasWidth: 980 # Canvas width in px
|
||||
---
|
||||
```
|
||||
|
||||
## Fonts
|
||||
|
||||
```yaml
|
||||
---
|
||||
fonts:
|
||||
sans: Roboto
|
||||
serif: Roboto Slab
|
||||
mono: Fira Code
|
||||
provider: google # 'google' | 'none'
|
||||
---
|
||||
```
|
||||
|
||||
## Code & Highlighting
|
||||
|
||||
```yaml
|
||||
---
|
||||
highlighter: shiki # Code highlighter
|
||||
lineNumbers: false # Show line numbers
|
||||
monaco: true # Enable Monaco editor ('true' | 'dev' | 'build')
|
||||
twoslash: true # Enable TwoSlash
|
||||
monacoTypesSource: local # 'local' | 'cdn' | 'none'
|
||||
---
|
||||
```
|
||||
|
||||
## Features
|
||||
|
||||
```yaml
|
||||
---
|
||||
drawings:
|
||||
enabled: true # Enable drawing mode
|
||||
persist: false # Save drawings
|
||||
presenterOnly: false # Only presenter can draw
|
||||
syncAll: true # Sync across instances
|
||||
record: dev # Enable recording
|
||||
selectable: true # Text selection
|
||||
contextMenu: true # Right-click menu
|
||||
wakeLock: true # Prevent screen sleep
|
||||
---
|
||||
```
|
||||
|
||||
## Export & Build
|
||||
|
||||
```yaml
|
||||
---
|
||||
download: false # PDF download button
|
||||
exportFilename: slides # Export filename
|
||||
export:
|
||||
format: pdf
|
||||
timeout: 30000
|
||||
withClicks: false
|
||||
withToc: false
|
||||
---
|
||||
```
|
||||
|
||||
## Info & SEO
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: My Presentation
|
||||
titleTemplate: '%s - Slidev'
|
||||
author: Your Name
|
||||
keywords: slidev, presentation
|
||||
info: |
|
||||
## About
|
||||
Presentation description
|
||||
---
|
||||
```
|
||||
|
||||
## SEO Meta Tags
|
||||
|
||||
```yaml
|
||||
---
|
||||
seoMeta:
|
||||
ogTitle: Presentation Title
|
||||
ogDescription: Description
|
||||
ogImage: https://example.com/og.png
|
||||
ogUrl: https://example.com
|
||||
twitterCard: summary_large_image
|
||||
twitterTitle: Title
|
||||
twitterDescription: Description
|
||||
twitterImage: https://example.com/twitter.png
|
||||
---
|
||||
```
|
||||
|
||||
## Addons & Themes
|
||||
|
||||
```yaml
|
||||
---
|
||||
theme: seriph
|
||||
addons:
|
||||
- excalidraw
|
||||
- '@slidev/plugin-notes'
|
||||
---
|
||||
```
|
||||
|
||||
## Theme Configuration
|
||||
|
||||
```yaml
|
||||
---
|
||||
themeConfig:
|
||||
primary: '#5d8392'
|
||||
# Theme-specific options
|
||||
---
|
||||
```
|
||||
|
||||
## Defaults
|
||||
|
||||
Set default frontmatter for all slides:
|
||||
|
||||
```yaml
|
||||
---
|
||||
defaults:
|
||||
layout: default
|
||||
transition: fade
|
||||
---
|
||||
```
|
||||
|
||||
## HTML Attributes
|
||||
|
||||
```yaml
|
||||
---
|
||||
htmlAttrs:
|
||||
dir: ltr
|
||||
lang: en
|
||||
---
|
||||
```
|
||||
|
||||
## Presenter & Browser
|
||||
|
||||
```yaml
|
||||
---
|
||||
presenter: true # 'true' | 'dev' | 'build'
|
||||
browserExporter: dev # 'true' | 'dev' | 'build'
|
||||
routerMode: history # 'history' | 'hash'
|
||||
---
|
||||
```
|
||||
|
||||
## Remote Assets
|
||||
|
||||
```yaml
|
||||
---
|
||||
remoteAssets: false # Download remote assets locally
|
||||
plantUmlServer: https://www.plantuml.com/plantuml
|
||||
---
|
||||
```
|
||||
|
||||
## Full Template
|
||||
|
||||
```yaml
|
||||
---
|
||||
theme: default
|
||||
title: Presentation Title
|
||||
author: Your Name
|
||||
highlighter: shiki
|
||||
lineNumbers: true
|
||||
transition: slide-left
|
||||
aspectRatio: 16/9
|
||||
canvasWidth: 980
|
||||
fonts:
|
||||
sans: Roboto
|
||||
mono: Fira Code
|
||||
drawings:
|
||||
enabled: true
|
||||
persist: true
|
||||
download: true
|
||||
---
|
||||
```
|
||||
152
skills/slidev/references/core-hosting.md
Normal file
152
skills/slidev/references/core-hosting.md
Normal file
@@ -0,0 +1,152 @@
|
||||
---
|
||||
name: hosting
|
||||
description: Build and deploy Slidev presentations
|
||||
---
|
||||
|
||||
# Hosting & Deployment
|
||||
|
||||
Build and deploy Slidev presentations.
|
||||
|
||||
## Build for Production
|
||||
|
||||
```bash
|
||||
slidev build
|
||||
```
|
||||
|
||||
Output: `dist/` folder (static SPA)
|
||||
|
||||
### Options
|
||||
|
||||
```bash
|
||||
slidev build --base /talks/my-talk/ # Custom base path
|
||||
slidev build --out public # Custom output dir
|
||||
slidev build --download # Include PDF
|
||||
slidev build --without-notes # Exclude notes
|
||||
```
|
||||
|
||||
### Multiple Presentations
|
||||
|
||||
```bash
|
||||
slidev build slides1.md slides2.md
|
||||
```
|
||||
|
||||
## GitHub Pages
|
||||
|
||||
### GitHub Actions
|
||||
|
||||
Create `.github/workflows/deploy.yml`:
|
||||
|
||||
```yaml
|
||||
name: Deploy
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [main]
|
||||
|
||||
permissions:
|
||||
contents: read
|
||||
pages: write
|
||||
id-token: write
|
||||
|
||||
jobs:
|
||||
deploy:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
|
||||
- uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 'lts/*'
|
||||
|
||||
- name: Install
|
||||
run: npm install
|
||||
|
||||
- name: Build
|
||||
run: npm run build -- --base /${{ github.event.repository.name }}/
|
||||
|
||||
- uses: actions/configure-pages@v4
|
||||
|
||||
- uses: actions/upload-pages-artifact@v3
|
||||
with:
|
||||
path: dist
|
||||
|
||||
- uses: actions/deploy-pages@v4
|
||||
```
|
||||
|
||||
## Netlify
|
||||
|
||||
Create `netlify.toml`:
|
||||
|
||||
```toml
|
||||
[build]
|
||||
publish = 'dist'
|
||||
command = 'npm run build'
|
||||
|
||||
[[redirects]]
|
||||
from = '/*'
|
||||
to = '/index.html'
|
||||
status = 200
|
||||
```
|
||||
|
||||
## Vercel
|
||||
|
||||
Create `vercel.json`:
|
||||
|
||||
```json
|
||||
{
|
||||
"rewrites": [
|
||||
{ "source": "/(.*)", "destination": "/index.html" }
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## Docker
|
||||
|
||||
### Using Official Image
|
||||
|
||||
```bash
|
||||
docker run --name slidev --rm -it \
|
||||
-v ${PWD}:/slidev \
|
||||
-p 3030:3030 \
|
||||
tangramor/slidev:latest
|
||||
```
|
||||
|
||||
### Custom Dockerfile
|
||||
|
||||
```dockerfile
|
||||
FROM tangramor/slidev:latest
|
||||
|
||||
COPY slides.md .
|
||||
COPY public ./public
|
||||
|
||||
RUN npm run build
|
||||
|
||||
EXPOSE 80
|
||||
CMD ["npx", "serve", "dist"]
|
||||
```
|
||||
|
||||
## Base Path
|
||||
|
||||
For subdirectory deployment:
|
||||
|
||||
```bash
|
||||
# Build
|
||||
slidev build --base /my-slides/
|
||||
|
||||
# Or in headmatter
|
||||
---
|
||||
base: /my-slides/
|
||||
---
|
||||
```
|
||||
|
||||
## Router Mode
|
||||
|
||||
For servers without rewrite support:
|
||||
|
||||
```yaml
|
||||
---
|
||||
routerMode: hash
|
||||
---
|
||||
```
|
||||
|
||||
URLs become: `/#/1`, `/#/2`, etc.
|
||||
286
skills/slidev/references/core-layouts.md
Normal file
286
skills/slidev/references/core-layouts.md
Normal file
@@ -0,0 +1,286 @@
|
||||
---
|
||||
name: layouts
|
||||
description: Available layouts for slides
|
||||
---
|
||||
|
||||
# Built-in Layouts
|
||||
|
||||
Available layouts for slides.
|
||||
|
||||
## Basic Layouts
|
||||
|
||||
### default
|
||||
|
||||
Standard slide layout.
|
||||
```yaml
|
||||
---
|
||||
layout: default
|
||||
---
|
||||
```
|
||||
|
||||
### center
|
||||
|
||||
Content centered horizontally and vertically.
|
||||
```yaml
|
||||
---
|
||||
layout: center
|
||||
---
|
||||
```
|
||||
|
||||
### cover
|
||||
|
||||
Title/cover slide with centered content.
|
||||
```yaml
|
||||
---
|
||||
layout: cover
|
||||
---
|
||||
```
|
||||
|
||||
### end
|
||||
|
||||
End slide.
|
||||
```yaml
|
||||
---
|
||||
layout: end
|
||||
---
|
||||
```
|
||||
|
||||
### full
|
||||
|
||||
Full-screen content, no padding.
|
||||
```yaml
|
||||
---
|
||||
layout: full
|
||||
---
|
||||
```
|
||||
|
||||
### none
|
||||
|
||||
No layout styling.
|
||||
```yaml
|
||||
---
|
||||
layout: none
|
||||
---
|
||||
```
|
||||
|
||||
## Text Layouts
|
||||
|
||||
### intro
|
||||
|
||||
Introduction slide.
|
||||
```yaml
|
||||
---
|
||||
layout: intro
|
||||
---
|
||||
```
|
||||
|
||||
### quote
|
||||
|
||||
Large quotation display.
|
||||
```yaml
|
||||
---
|
||||
layout: quote
|
||||
---
|
||||
```
|
||||
|
||||
### section
|
||||
|
||||
Section divider.
|
||||
```yaml
|
||||
---
|
||||
layout: section
|
||||
---
|
||||
```
|
||||
|
||||
### statement
|
||||
|
||||
Statement/affirmation display.
|
||||
```yaml
|
||||
---
|
||||
layout: statement
|
||||
---
|
||||
```
|
||||
|
||||
### fact
|
||||
|
||||
Fact/data display.
|
||||
```yaml
|
||||
---
|
||||
layout: fact
|
||||
---
|
||||
```
|
||||
|
||||
## Multi-Column Layouts
|
||||
|
||||
### two-cols
|
||||
|
||||
Two columns side by side:
|
||||
```md
|
||||
---
|
||||
layout: two-cols
|
||||
---
|
||||
|
||||
# Left Column
|
||||
|
||||
Left content
|
||||
|
||||
::right::
|
||||
|
||||
# Right Column
|
||||
|
||||
Right content
|
||||
```
|
||||
|
||||
### two-cols-header
|
||||
|
||||
Header with two columns below:
|
||||
```md
|
||||
---
|
||||
layout: two-cols-header
|
||||
---
|
||||
|
||||
# Header
|
||||
|
||||
::left::
|
||||
|
||||
Left content
|
||||
|
||||
::right::
|
||||
|
||||
Right content
|
||||
```
|
||||
|
||||
## Image Layouts
|
||||
|
||||
### image
|
||||
|
||||
Full-screen image:
|
||||
```yaml
|
||||
---
|
||||
layout: image
|
||||
image: /photo.jpg
|
||||
backgroundSize: cover
|
||||
---
|
||||
```
|
||||
|
||||
### image-left
|
||||
|
||||
Image on left, content on right:
|
||||
```yaml
|
||||
---
|
||||
layout: image-left
|
||||
image: /photo.jpg
|
||||
class: my-class
|
||||
---
|
||||
|
||||
# Content on Right
|
||||
```
|
||||
|
||||
### image-right
|
||||
|
||||
Image on right, content on left:
|
||||
```yaml
|
||||
---
|
||||
layout: image-right
|
||||
image: /photo.jpg
|
||||
---
|
||||
|
||||
# Content on Left
|
||||
```
|
||||
|
||||
Props: `image`, `class`, `backgroundSize`
|
||||
|
||||
## Iframe Layouts
|
||||
|
||||
### iframe
|
||||
|
||||
Full-screen iframe:
|
||||
```yaml
|
||||
---
|
||||
layout: iframe
|
||||
url: https://example.com
|
||||
---
|
||||
```
|
||||
|
||||
### iframe-left
|
||||
|
||||
Iframe on left, content on right:
|
||||
```yaml
|
||||
---
|
||||
layout: iframe-left
|
||||
url: https://example.com
|
||||
---
|
||||
|
||||
# Content
|
||||
```
|
||||
|
||||
### iframe-right
|
||||
|
||||
Iframe on right, content on left:
|
||||
```yaml
|
||||
---
|
||||
layout: iframe-right
|
||||
url: https://example.com
|
||||
---
|
||||
|
||||
# Content
|
||||
```
|
||||
|
||||
## Layout Loading Order
|
||||
|
||||
1. Slidev default layouts
|
||||
2. Theme layouts
|
||||
3. Addon layouts
|
||||
4. Custom layouts (`./layouts/`)
|
||||
|
||||
Later sources override earlier ones.
|
||||
|
||||
## Custom Layouts
|
||||
|
||||
Create `layouts/my-layout.vue`:
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div class="slidev-layout my-layout">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.my-layout {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
With named slots:
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div class="slidev-layout two-areas">
|
||||
<div class="top">
|
||||
<slot name="top" />
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
Usage:
|
||||
```md
|
||||
---
|
||||
layout: two-areas
|
||||
---
|
||||
|
||||
::top::
|
||||
|
||||
Top content
|
||||
|
||||
::default::
|
||||
|
||||
Bottom content
|
||||
```
|
||||
155
skills/slidev/references/core-syntax.md
Normal file
155
skills/slidev/references/core-syntax.md
Normal file
@@ -0,0 +1,155 @@
|
||||
---
|
||||
name: syntax
|
||||
description: Core Markdown syntax for Slidev presentations
|
||||
---
|
||||
|
||||
# Slidev Markdown Syntax
|
||||
|
||||
Core Markdown syntax for Slidev presentations.
|
||||
|
||||
## Slide Separator
|
||||
|
||||
Use `---` with blank lines before and after:
|
||||
|
||||
```md
|
||||
# Slide 1
|
||||
|
||||
Content
|
||||
|
||||
---
|
||||
|
||||
# Slide 2
|
||||
|
||||
More content
|
||||
```
|
||||
|
||||
## Headmatter (Deck Config)
|
||||
|
||||
First frontmatter block configures the entire deck:
|
||||
|
||||
```md
|
||||
---
|
||||
theme: default
|
||||
title: My Presentation
|
||||
lineNumbers: true
|
||||
---
|
||||
|
||||
# First Slide
|
||||
```
|
||||
|
||||
## Per-Slide Frontmatter
|
||||
|
||||
Each slide can have its own frontmatter:
|
||||
|
||||
```md
|
||||
---
|
||||
layout: center
|
||||
background: /image.jpg
|
||||
class: text-white
|
||||
---
|
||||
|
||||
# Centered Slide
|
||||
```
|
||||
|
||||
## Presenter Notes
|
||||
|
||||
HTML comments at end of slide become presenter notes:
|
||||
|
||||
```md
|
||||
# My Slide
|
||||
|
||||
Content here
|
||||
|
||||
<!--
|
||||
These are presenter notes.
|
||||
- Remember to mention X
|
||||
- Demo the feature
|
||||
-->
|
||||
```
|
||||
|
||||
## Code Blocks
|
||||
|
||||
Standard Markdown with Shiki highlighting:
|
||||
|
||||
````md
|
||||
```ts
|
||||
const hello = 'world'
|
||||
```
|
||||
````
|
||||
|
||||
With features:
|
||||
````md
|
||||
```ts {2,3} // Line highlighting
|
||||
```ts {1|2-3|all} // Click-based highlighting
|
||||
```ts {monaco} // Monaco editor
|
||||
```ts {monaco-run} // Runnable code
|
||||
```ts twoslash // TypeScript types
|
||||
```
|
||||
````
|
||||
|
||||
## LaTeX Math
|
||||
|
||||
Inline: `$E = mc^2$`
|
||||
|
||||
Block:
|
||||
```md
|
||||
$$
|
||||
\frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
|
||||
$$
|
||||
```
|
||||
|
||||
## Diagrams
|
||||
|
||||
Mermaid:
|
||||
````md
|
||||
```mermaid
|
||||
graph LR
|
||||
A --> B --> C
|
||||
```
|
||||
````
|
||||
|
||||
PlantUML:
|
||||
````md
|
||||
```plantuml
|
||||
@startuml
|
||||
Alice -> Bob : Hello
|
||||
@enduml
|
||||
```
|
||||
````
|
||||
|
||||
## MDC Syntax
|
||||
|
||||
Enable with `mdc: true`:
|
||||
|
||||
```md
|
||||
[styled text]{style="color:red"}
|
||||
{width=500px}
|
||||
::component{prop="value"}
|
||||
```
|
||||
|
||||
## Scoped CSS
|
||||
|
||||
Styles apply only to current slide:
|
||||
|
||||
```md
|
||||
# Red Title
|
||||
|
||||
<style>
|
||||
h1 { color: red; }
|
||||
</style>
|
||||
```
|
||||
|
||||
## Import Slides
|
||||
|
||||
```md
|
||||
---
|
||||
src: ./pages/intro.md
|
||||
---
|
||||
```
|
||||
|
||||
Import specific slides:
|
||||
```md
|
||||
---
|
||||
src: ./other.md#2,5-7
|
||||
---
|
||||
```
|
||||
55
skills/slidev/references/diagram-latex.md
Normal file
55
skills/slidev/references/diagram-latex.md
Normal file
@@ -0,0 +1,55 @@
|
||||
---
|
||||
name: latex
|
||||
description: Render mathematical equations using KaTeX
|
||||
---
|
||||
|
||||
# LaTeX
|
||||
|
||||
Render mathematical equations. Powered by KaTeX.
|
||||
|
||||
## Inline Math
|
||||
|
||||
```md
|
||||
$\sqrt{3x-1}+(1+x)^2$
|
||||
```
|
||||
|
||||
## Block Math
|
||||
|
||||
```md
|
||||
$$
|
||||
\begin{aligned}
|
||||
\nabla \cdot \vec{E} &= \frac{\rho}{\varepsilon_0} \\
|
||||
\nabla \cdot \vec{B} &= 0
|
||||
\end{aligned}
|
||||
$$
|
||||
```
|
||||
|
||||
## Line Highlighting
|
||||
|
||||
```md
|
||||
$$ {1|3|all}
|
||||
\begin{aligned}
|
||||
\nabla \cdot \vec{E} &= \frac{\rho}{\varepsilon_0} \\
|
||||
\nabla \cdot \vec{B} &= 0 \\
|
||||
\nabla \times \vec{E} &= -\frac{\partial\vec{B}}{\partial t}
|
||||
\end{aligned}
|
||||
$$
|
||||
```
|
||||
|
||||
## Chemical Equations
|
||||
|
||||
Enable mhchem extension in `vite.config.ts`:
|
||||
|
||||
```ts
|
||||
import 'katex/contrib/mhchem'
|
||||
|
||||
export default {}
|
||||
```
|
||||
|
||||
Then use:
|
||||
|
||||
```md
|
||||
$$
|
||||
\ce{B(OH)3 + H2O <--> B(OH)4^- + H+}
|
||||
$$
|
||||
```
|
||||
44
skills/slidev/references/diagram-mermaid.md
Normal file
44
skills/slidev/references/diagram-mermaid.md
Normal file
@@ -0,0 +1,44 @@
|
||||
---
|
||||
name: mermaid
|
||||
description: Create diagrams from text descriptions
|
||||
---
|
||||
|
||||
# Mermaid Diagrams
|
||||
|
||||
Create diagrams from text descriptions.
|
||||
|
||||
## Basic Usage
|
||||
|
||||
````md
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
Alice->John: Hello John, how are you?
|
||||
Note over Alice,John: A typical interaction
|
||||
```
|
||||
````
|
||||
|
||||
## With Options
|
||||
|
||||
````md
|
||||
```mermaid {theme: 'neutral', scale: 0.8}
|
||||
graph TD
|
||||
B[Text] --> C{Decision}
|
||||
C -->|One| D[Result 1]
|
||||
C -->|Two| E[Result 2]
|
||||
```
|
||||
````
|
||||
|
||||
## Diagram Types
|
||||
|
||||
- `graph` / `flowchart` - Flow diagrams
|
||||
- `sequenceDiagram` - Sequence diagrams
|
||||
- `classDiagram` - Class diagrams
|
||||
- `stateDiagram` - State diagrams
|
||||
- `erDiagram` - Entity relationship
|
||||
- `gantt` - Gantt charts
|
||||
- `pie` - Pie charts
|
||||
|
||||
## Resources
|
||||
|
||||
- Mermaid docs: https://mermaid.js.org/
|
||||
- Live editor: https://mermaid.live/
|
||||
45
skills/slidev/references/diagram-plantuml.md
Normal file
45
skills/slidev/references/diagram-plantuml.md
Normal file
@@ -0,0 +1,45 @@
|
||||
---
|
||||
name: plantuml
|
||||
description: Create UML diagrams from text descriptions
|
||||
---
|
||||
|
||||
# PlantUML Diagrams
|
||||
|
||||
Create UML diagrams from text descriptions.
|
||||
|
||||
## Basic Usage
|
||||
|
||||
````md
|
||||
```plantuml
|
||||
@startuml
|
||||
Alice -> Bob : Hello!
|
||||
@enduml
|
||||
```
|
||||
````
|
||||
|
||||
## Server Configuration
|
||||
|
||||
Default: Uses https://www.plantuml.com/plantuml
|
||||
|
||||
Custom server in headmatter:
|
||||
|
||||
```md
|
||||
---
|
||||
plantUmlServer: https://your-server.com/plantuml
|
||||
---
|
||||
```
|
||||
|
||||
## Diagram Types
|
||||
|
||||
- Sequence diagrams
|
||||
- Class diagrams
|
||||
- Activity diagrams
|
||||
- Component diagrams
|
||||
- State diagrams
|
||||
- Object diagrams
|
||||
- Use case diagrams
|
||||
|
||||
## Resources
|
||||
|
||||
- PlantUML docs: https://plantuml.com/
|
||||
- Live editor: https://plantuml.com/plantuml
|
||||
44
skills/slidev/references/editor-monaco-run.md
Normal file
44
skills/slidev/references/editor-monaco-run.md
Normal file
@@ -0,0 +1,44 @@
|
||||
---
|
||||
name: monaco-run
|
||||
description: Run code directly in the editor and see results
|
||||
---
|
||||
|
||||
# Monaco Runner
|
||||
|
||||
Run code directly in the editor and see results.
|
||||
|
||||
## Basic Usage
|
||||
|
||||
````md
|
||||
```ts {monaco-run}
|
||||
function distance(x: number, y: number) {
|
||||
return Math.sqrt(x ** 2 + y ** 2)
|
||||
}
|
||||
console.log(distance(3, 4))
|
||||
```
|
||||
````
|
||||
|
||||
Shows a "Run" button and displays output below the code.
|
||||
|
||||
## Disable Auto-run
|
||||
|
||||
````md
|
||||
```ts {monaco-run} {autorun:false}
|
||||
console.log('Click the play button to run me')
|
||||
```
|
||||
````
|
||||
|
||||
## Show Output on Click
|
||||
|
||||
````md
|
||||
```ts {monaco-run} {showOutputAt:'+1'}
|
||||
console.log('Shown after 1 click')
|
||||
```
|
||||
````
|
||||
|
||||
## Supported Languages
|
||||
|
||||
- JavaScript
|
||||
- TypeScript
|
||||
|
||||
For other languages, configure custom code runners in `/custom/config-code-runners`.
|
||||
24
skills/slidev/references/editor-monaco-write.md
Normal file
24
skills/slidev/references/editor-monaco-write.md
Normal file
@@ -0,0 +1,24 @@
|
||||
---
|
||||
name: monaco-write
|
||||
description: Edit code and save changes back to the file
|
||||
---
|
||||
|
||||
# Writable Monaco Editor
|
||||
|
||||
Edit code and save changes back to the file.
|
||||
|
||||
## Usage
|
||||
|
||||
```md
|
||||
<<< ./some-file.ts {monaco-write}
|
||||
```
|
||||
|
||||
## Behavior
|
||||
|
||||
- Links Monaco editor to actual file on filesystem
|
||||
- Changes are saved directly to the file
|
||||
- Useful for live coding demonstrations
|
||||
|
||||
## Warning
|
||||
|
||||
Back up files before using - changes are saved directly.
|
||||
50
skills/slidev/references/editor-monaco.md
Normal file
50
skills/slidev/references/editor-monaco.md
Normal file
@@ -0,0 +1,50 @@
|
||||
---
|
||||
name: monaco
|
||||
description: Turn code blocks into fully-featured editors
|
||||
---
|
||||
|
||||
# Monaco Editor
|
||||
|
||||
Turn code blocks into fully-featured editors.
|
||||
|
||||
## Basic Usage
|
||||
|
||||
````md
|
||||
```ts {monaco}
|
||||
console.log('HelloWorld')
|
||||
```
|
||||
````
|
||||
|
||||
## Diff Editor
|
||||
|
||||
Compare two code versions:
|
||||
|
||||
````md
|
||||
```ts {monaco-diff}
|
||||
console.log('Original text')
|
||||
~~~
|
||||
console.log('Modified text')
|
||||
```
|
||||
````
|
||||
|
||||
## Editor Height
|
||||
|
||||
Auto-grow as you type:
|
||||
|
||||
````md
|
||||
```ts {monaco} {height:'auto'}
|
||||
console.log('Hello, World!')
|
||||
```
|
||||
````
|
||||
|
||||
Fixed height:
|
||||
|
||||
````md
|
||||
```ts {monaco} {height:'300px'}
|
||||
// code here
|
||||
```
|
||||
````
|
||||
|
||||
## Configuration
|
||||
|
||||
See `/custom/config-monaco` for Monaco editor customization options.
|
||||
40
skills/slidev/references/editor-prettier.md
Normal file
40
skills/slidev/references/editor-prettier.md
Normal file
@@ -0,0 +1,40 @@
|
||||
---
|
||||
name: prettier-plugin
|
||||
description: Format Slidev markdown files correctly
|
||||
---
|
||||
|
||||
# Prettier Plugin
|
||||
|
||||
Format Slidev markdown files correctly.
|
||||
|
||||
## Installation
|
||||
|
||||
```bash
|
||||
pnpm i -D prettier prettier-plugin-slidev
|
||||
```
|
||||
|
||||
## Configuration
|
||||
|
||||
Create/modify `.prettierrc`:
|
||||
|
||||
```json
|
||||
{
|
||||
"overrides": [
|
||||
{
|
||||
"files": ["slides.md", "pages/*.md"],
|
||||
"options": {
|
||||
"parser": "slidev",
|
||||
"plugins": ["prettier-plugin-slidev"]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## Why Needed
|
||||
|
||||
Slidev's syntax (frontmatter, code blocks) may conflict with default Markdown formatting. This plugin understands Slidev-specific syntax.
|
||||
|
||||
## Note
|
||||
|
||||
Must specify files via `overrides` since Slidev and regular Markdown share `.md` extension.
|
||||
23
skills/slidev/references/editor-side.md
Normal file
23
skills/slidev/references/editor-side.md
Normal file
@@ -0,0 +1,23 @@
|
||||
---
|
||||
name: side-editor
|
||||
description: Edit slides source alongside the presentation
|
||||
---
|
||||
|
||||
# Integrated Editor
|
||||
|
||||
Edit slides source alongside the presentation.
|
||||
|
||||
## Open Editor
|
||||
|
||||
Click the edit icon in the navigation panel.
|
||||
|
||||
## Features
|
||||
|
||||
- Live reload on changes
|
||||
- Auto-save to file
|
||||
- Side-by-side editing
|
||||
- Syntax highlighting
|
||||
|
||||
## Use Case
|
||||
|
||||
Make quick edits during presentation preparation without switching applications.
|
||||
55
skills/slidev/references/editor-vscode.md
Normal file
55
skills/slidev/references/editor-vscode.md
Normal file
@@ -0,0 +1,55 @@
|
||||
---
|
||||
name: vscode-extension
|
||||
description: Manage slides visually in VS Code
|
||||
---
|
||||
|
||||
# VS Code Extension
|
||||
|
||||
Manage slides visually in VS Code.
|
||||
|
||||
## Installation
|
||||
|
||||
Install from VS Code Marketplace: `antfu.slidev`
|
||||
|
||||
## Features
|
||||
|
||||
- Preview slides in side panel
|
||||
- Slides tree view
|
||||
- Drag and drop to reorder slides
|
||||
- Folding for slide blocks
|
||||
- Multiple project support
|
||||
- One-click dev server start
|
||||
|
||||
## Usage
|
||||
|
||||
1. Click `Slidev` icon in activity bar
|
||||
2. Projects tree shows all Slidev projects in workspace
|
||||
3. Slides tree shows slides in active project
|
||||
4. Preview panel shows live preview
|
||||
|
||||
## Commands
|
||||
|
||||
Type `Slidev` in command palette to see available commands.
|
||||
|
||||
## Configuration
|
||||
|
||||
Include specific files as Slidev entries:
|
||||
|
||||
```json
|
||||
{
|
||||
"slidev.include": ["**/presentation.md"]
|
||||
}
|
||||
```
|
||||
|
||||
Custom dev command:
|
||||
|
||||
```json
|
||||
{
|
||||
"slidev.dev-command": "pnpm slidev ${args}"
|
||||
}
|
||||
```
|
||||
|
||||
## Placeholders
|
||||
|
||||
- `${args}` - All CLI arguments
|
||||
- `${port}` - Port number
|
||||
25
skills/slidev/references/layout-canvas-size.md
Normal file
25
skills/slidev/references/layout-canvas-size.md
Normal file
@@ -0,0 +1,25 @@
|
||||
---
|
||||
name: canvas-size
|
||||
description: Configure slide canvas dimensions and aspect ratio
|
||||
---
|
||||
|
||||
# Slide Canvas Size
|
||||
|
||||
Set the canvas dimensions for all slides.
|
||||
|
||||
## Configuration
|
||||
|
||||
```md
|
||||
---
|
||||
aspectRatio: 16/9
|
||||
canvasWidth: 980
|
||||
---
|
||||
```
|
||||
|
||||
- `aspectRatio`: Ratio of width to height (default: `16/9`)
|
||||
- `canvasWidth`: Canvas width in pixels (default: `980`)
|
||||
|
||||
## Related Features
|
||||
|
||||
- Scale individual slides: use `zoom` frontmatter option
|
||||
- Scale elements: use `<Transform>` component
|
||||
57
skills/slidev/references/layout-draggable.md
Normal file
57
skills/slidev/references/layout-draggable.md
Normal file
@@ -0,0 +1,57 @@
|
||||
---
|
||||
name: draggable-elements
|
||||
description: Move, resize, and rotate elements by dragging during presentation
|
||||
---
|
||||
|
||||
# Draggable Elements
|
||||
|
||||
Move, resize, and rotate elements by dragging during presentation.
|
||||
|
||||
## Directive Usage
|
||||
|
||||
### With Frontmatter Position
|
||||
|
||||
```md
|
||||
---
|
||||
dragPos:
|
||||
square: Left,Top,Width,Height,Rotate
|
||||
---
|
||||
|
||||
<img v-drag="'square'" src="https://sli.dev/logo.png">
|
||||
```
|
||||
|
||||
### Inline Position
|
||||
|
||||
```md
|
||||
<img v-drag="[Left,Top,Width,Height,Rotate]" src="https://sli.dev/logo.png">
|
||||
```
|
||||
|
||||
## Component Usage
|
||||
|
||||
```md
|
||||
---
|
||||
dragPos:
|
||||
foo: Left,Top,Width,Height,Rotate
|
||||
---
|
||||
|
||||
<v-drag pos="foo" text-3xl>
|
||||
Draggable content
|
||||
</v-drag>
|
||||
```
|
||||
|
||||
## Draggable Arrow
|
||||
|
||||
```md
|
||||
<v-drag-arrow />
|
||||
```
|
||||
|
||||
## Controls
|
||||
|
||||
- Double-click: Start dragging
|
||||
- Arrow keys: Move element
|
||||
- Shift + drag: Preserve aspect ratio
|
||||
- Click outside: Stop dragging
|
||||
|
||||
## Auto Height
|
||||
|
||||
Set Height to `NaN` or `_` for auto height based on content.
|
||||
50
skills/slidev/references/layout-global-layers.md
Normal file
50
skills/slidev/references/layout-global-layers.md
Normal file
@@ -0,0 +1,50 @@
|
||||
---
|
||||
name: global-layers
|
||||
description: Create components that persist across slides like footers and backgrounds
|
||||
---
|
||||
|
||||
# Global Layers
|
||||
|
||||
Create components that persist across slides.
|
||||
|
||||
## Layer Files
|
||||
|
||||
Create in project root:
|
||||
- `global-top.vue` - Above all slides (single instance)
|
||||
- `global-bottom.vue` - Below all slides (single instance)
|
||||
- `slide-top.vue` - Above each slide (per-slide instance)
|
||||
- `slide-bottom.vue` - Below each slide (per-slide instance)
|
||||
- `custom-nav-controls.vue` - Custom navigation controls
|
||||
|
||||
## Z-Order (top to bottom)
|
||||
|
||||
1. NavControls / custom-nav-controls.vue
|
||||
2. global-top.vue
|
||||
3. slide-top.vue
|
||||
4. Slide Content
|
||||
5. slide-bottom.vue
|
||||
6. global-bottom.vue
|
||||
|
||||
## Example: Footer
|
||||
|
||||
```html
|
||||
<!-- global-bottom.vue -->
|
||||
<template>
|
||||
<footer class="absolute bottom-0 left-0 right-0 p-2">Your Name</footer>
|
||||
</template>
|
||||
```
|
||||
|
||||
## Conditional Rendering
|
||||
|
||||
```html
|
||||
<!-- Hide on cover layout -->
|
||||
<template>
|
||||
<footer v-if="$nav.currentLayout !== 'cover'" class="absolute bottom-0 p-2">
|
||||
{{ $nav.currentPage }} / {{ $nav.total }}
|
||||
</footer>
|
||||
</template>
|
||||
```
|
||||
|
||||
## Export Note
|
||||
|
||||
Use `--per-slide` export option when global layers depend on navigation state.
|
||||
75
skills/slidev/references/layout-slots.md
Normal file
75
skills/slidev/references/layout-slots.md
Normal file
@@ -0,0 +1,75 @@
|
||||
---
|
||||
name: slot-sugar
|
||||
description: Shorthand syntax for layout named slots in multi-column layouts
|
||||
---
|
||||
|
||||
# Slot Sugar for Layouts
|
||||
|
||||
Shorthand syntax for layout named slots.
|
||||
|
||||
## Standard Vue Slot Syntax
|
||||
|
||||
```md
|
||||
---
|
||||
layout: two-cols
|
||||
---
|
||||
|
||||
<template v-slot:default>
|
||||
|
||||
# Left
|
||||
|
||||
This shows on the left
|
||||
|
||||
</template>
|
||||
<template v-slot:right>
|
||||
|
||||
# Right
|
||||
|
||||
This shows on the right
|
||||
|
||||
</template>
|
||||
```
|
||||
|
||||
## Shorthand Syntax
|
||||
|
||||
```md
|
||||
---
|
||||
layout: two-cols
|
||||
---
|
||||
|
||||
# Left
|
||||
|
||||
This shows on the left
|
||||
|
||||
::right::
|
||||
|
||||
# Right
|
||||
|
||||
This shows on the right
|
||||
```
|
||||
|
||||
## Explicit Default Slot
|
||||
|
||||
```md
|
||||
---
|
||||
layout: two-cols
|
||||
---
|
||||
|
||||
::right::
|
||||
|
||||
# Right
|
||||
|
||||
This shows on the right
|
||||
|
||||
::default::
|
||||
|
||||
# Left
|
||||
|
||||
This shows on the left
|
||||
```
|
||||
|
||||
## Common Layouts with Slots
|
||||
|
||||
- `two-cols`: `default` (left) and `right`
|
||||
- `two-cols-header`: `default`, `left`, `right`
|
||||
- `image-left/right`: `default` for content
|
||||
33
skills/slidev/references/layout-transform.md
Normal file
33
skills/slidev/references/layout-transform.md
Normal file
@@ -0,0 +1,33 @@
|
||||
---
|
||||
name: transform-component
|
||||
description: Scale elements without affecting slide layout using the Transform component
|
||||
---
|
||||
|
||||
# Transform Component
|
||||
|
||||
Scale elements without affecting slide layout.
|
||||
|
||||
## Usage
|
||||
|
||||
```md
|
||||
<Transform :scale="0.5" origin="top center">
|
||||
<YourElements />
|
||||
</Transform>
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
- `scale`: Scale factor (0.5 = 50%, 2 = 200%)
|
||||
- `origin`: Transform origin (CSS transform-origin value)
|
||||
|
||||
## Use Cases
|
||||
|
||||
- Shrink large diagrams
|
||||
- Scale code blocks
|
||||
- Fit oversized content
|
||||
- Create emphasis effects
|
||||
|
||||
## Related Features
|
||||
|
||||
- Scale all slides: Use `canvasWidth` / `aspectRatio` in headmatter
|
||||
- Scale individual slides: Use `zoom` frontmatter option
|
||||
39
skills/slidev/references/layout-zoom.md
Normal file
39
skills/slidev/references/layout-zoom.md
Normal file
@@ -0,0 +1,39 @@
|
||||
---
|
||||
name: zoom-slides
|
||||
description: Scale individual slide content using the zoom frontmatter option
|
||||
---
|
||||
|
||||
# Zoom Slides
|
||||
|
||||
Scale individual slide content.
|
||||
|
||||
## Usage
|
||||
|
||||
```md
|
||||
---
|
||||
zoom: 0.8
|
||||
---
|
||||
|
||||
# A Slide with lots of content
|
||||
|
||||
---
|
||||
|
||||
# Other slides aren't affected
|
||||
```
|
||||
|
||||
## Values
|
||||
|
||||
- `zoom: 0.8` - 80% size (fits more content)
|
||||
- `zoom: 1.2` - 120% size (larger, less content)
|
||||
- `zoom: 1` - Normal (default)
|
||||
|
||||
## Use Cases
|
||||
|
||||
- Fit dense content on one slide
|
||||
- Make text more readable
|
||||
- Adjust for different content densities
|
||||
|
||||
## Related Features
|
||||
|
||||
- Scale all slides: Use `canvasWidth` / `aspectRatio` in headmatter
|
||||
- Scale elements: Use `<Transform>` component
|
||||
35
skills/slidev/references/presenter-notes-ruby.md
Normal file
35
skills/slidev/references/presenter-notes-ruby.md
Normal file
@@ -0,0 +1,35 @@
|
||||
---
|
||||
name: notes-auto-ruby
|
||||
description: Automatically add ruby text (pronunciation guides) to presenter notes
|
||||
---
|
||||
|
||||
# Notes Auto Ruby
|
||||
|
||||
Automatically add ruby text (pronunciation guides) to presenter notes.
|
||||
|
||||
## Configuration
|
||||
|
||||
```md
|
||||
---
|
||||
notesAutoRuby:
|
||||
日本語: ni hon go
|
||||
勉強: べんきょう
|
||||
---
|
||||
```
|
||||
|
||||
## Example
|
||||
|
||||
Notes:
|
||||
```md
|
||||
<!--
|
||||
私は日本語を勉強しています。
|
||||
-->
|
||||
```
|
||||
|
||||
Renders with ruby annotations above the matched words.
|
||||
|
||||
## Use Case
|
||||
|
||||
- Language learning presentations
|
||||
- Pronunciation guides for technical terms
|
||||
- Reading assistance for non-native text
|
||||
30
skills/slidev/references/presenter-recording.md
Normal file
30
skills/slidev/references/presenter-recording.md
Normal file
@@ -0,0 +1,30 @@
|
||||
---
|
||||
name: recording
|
||||
description: Record presentations with camera and screen capture
|
||||
---
|
||||
|
||||
# Recording
|
||||
|
||||
Record presentations with built-in camera and screen capture.
|
||||
|
||||
## Camera View
|
||||
|
||||
Click the camera icon in navigation bar to show camera overlay.
|
||||
|
||||
- Drag to move
|
||||
- Resize from bottom-right corner
|
||||
- Position persists across reloads
|
||||
|
||||
## Start Recording
|
||||
|
||||
Click the video icon in navigation bar.
|
||||
|
||||
Options:
|
||||
- Camera embedded in slides
|
||||
- Separate video files for camera and slides
|
||||
|
||||
Saves as WebM video.
|
||||
|
||||
## Technology
|
||||
|
||||
Powered by RecordRTC and WebRTC API.
|
||||
40
skills/slidev/references/presenter-remote.md
Normal file
40
skills/slidev/references/presenter-remote.md
Normal file
@@ -0,0 +1,40 @@
|
||||
---
|
||||
name: remote-access
|
||||
description: Share presentation across network or internet
|
||||
---
|
||||
|
||||
# Remote Access
|
||||
|
||||
Share presentation across network or internet.
|
||||
|
||||
## Enable Remote Access
|
||||
|
||||
```bash
|
||||
slidev --remote
|
||||
```
|
||||
|
||||
## Password Protection
|
||||
|
||||
```bash
|
||||
slidev --remote=your_password
|
||||
```
|
||||
|
||||
Password required for presenter mode access.
|
||||
|
||||
## Remote Tunnel
|
||||
|
||||
Expose to internet via Cloudflare Quick Tunnels:
|
||||
|
||||
```bash
|
||||
slidev --remote --tunnel
|
||||
```
|
||||
|
||||
Creates public URL for sharing without server setup.
|
||||
|
||||
## Use Cases
|
||||
|
||||
- Control presentation from phone/tablet
|
||||
- Multiple presenters
|
||||
- Remote presentations
|
||||
- Live streaming
|
||||
- Audience viewing on their devices
|
||||
34
skills/slidev/references/presenter-timer.md
Normal file
34
skills/slidev/references/presenter-timer.md
Normal file
@@ -0,0 +1,34 @@
|
||||
---
|
||||
name: presenter-timer
|
||||
description: Timer and progress bar in presenter mode
|
||||
---
|
||||
|
||||
# Presenter Timer
|
||||
|
||||
Timer and progress bar in presenter mode.
|
||||
|
||||
## Configuration
|
||||
|
||||
```yaml
|
||||
---
|
||||
duration: 30min
|
||||
timer: stopwatch
|
||||
---
|
||||
```
|
||||
|
||||
## Options
|
||||
|
||||
- `duration`: Presentation length (default: `30min`)
|
||||
- `timer`: Mode - `stopwatch` or `countdown` (default: `stopwatch`)
|
||||
|
||||
## Features
|
||||
|
||||
- Start, pause, reset controls
|
||||
- Progress bar showing time elapsed/remaining
|
||||
- Visible only in presenter mode
|
||||
|
||||
## Duration Format
|
||||
|
||||
- `30min` - 30 minutes
|
||||
- `1h` - 1 hour
|
||||
- `45min` - 45 minutes
|
||||
34
skills/slidev/references/style-direction.md
Normal file
34
skills/slidev/references/style-direction.md
Normal file
@@ -0,0 +1,34 @@
|
||||
---
|
||||
name: direction
|
||||
description: Navigation direction-based styling
|
||||
---
|
||||
|
||||
# Navigation Direction Variants
|
||||
|
||||
Apply different styles based on navigation direction (forward/backward).
|
||||
|
||||
## CSS Classes
|
||||
|
||||
```css
|
||||
/* Delay only when navigating forward */
|
||||
.slidev-nav-go-forward .slidev-vclick-target {
|
||||
transition-delay: 500ms;
|
||||
}
|
||||
.slidev-nav-go-backward .slidev-vclick-target {
|
||||
transition-delay: 0;
|
||||
}
|
||||
```
|
||||
|
||||
## UnoCSS Variants
|
||||
|
||||
Use `forward:` or `backward:` prefix:
|
||||
|
||||
```html
|
||||
<div v-click class="transition forward:delay-300">Element</div>
|
||||
```
|
||||
|
||||
Animation is only delayed when navigating forward, not when going back.
|
||||
|
||||
## Use Case
|
||||
|
||||
Create asymmetric animations where entering a slide feels different from leaving it.
|
||||
46
skills/slidev/references/style-icons.md
Normal file
46
skills/slidev/references/style-icons.md
Normal file
@@ -0,0 +1,46 @@
|
||||
---
|
||||
name: icons
|
||||
description: Using open-source icons in slides
|
||||
---
|
||||
|
||||
# Icons
|
||||
|
||||
Use any open-source icon directly in markdown. Powered by unplugin-icons and Iconify.
|
||||
|
||||
## Installation
|
||||
|
||||
```bash
|
||||
pnpm add @iconify-json/[collection-name]
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
Use component syntax `<collection-icon-name />`:
|
||||
|
||||
```md
|
||||
<mdi-account-circle />
|
||||
<carbon-badge />
|
||||
<uim-rocket />
|
||||
<logos-vue />
|
||||
```
|
||||
|
||||
## Popular Collections
|
||||
|
||||
- `@iconify-json/mdi` - Material Design Icons
|
||||
- `@iconify-json/carbon` - Carbon Design
|
||||
- `@iconify-json/logos` - SVG Logos
|
||||
- `@iconify-json/twemoji` - Twitter Emoji
|
||||
|
||||
## Styling
|
||||
|
||||
Style like any HTML element:
|
||||
|
||||
```html
|
||||
<uim-rocket class="text-3xl text-red-400 mx-2" />
|
||||
<uim-rocket class="text-3xl text-orange-400 animate-ping" />
|
||||
```
|
||||
|
||||
## Browse Icons
|
||||
|
||||
- https://icones.js.org/
|
||||
- https://icon-sets.iconify.design/
|
||||
50
skills/slidev/references/style-scoped.md
Normal file
50
skills/slidev/references/style-scoped.md
Normal file
@@ -0,0 +1,50 @@
|
||||
---
|
||||
name: scoped
|
||||
description: Slide-scoped CSS styles
|
||||
---
|
||||
|
||||
# Slide Scope Styles
|
||||
|
||||
Define CSS that applies only to the current slide.
|
||||
|
||||
## Usage
|
||||
|
||||
```md
|
||||
# This is Red
|
||||
|
||||
<style>
|
||||
h1 {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
|
||||
---
|
||||
|
||||
# Other slides are not affected
|
||||
```
|
||||
|
||||
## Scoped by Default
|
||||
|
||||
All `<style>` tags in slides are automatically scoped.
|
||||
|
||||
Child combinators (`.a > .b`) don't work as expected due to scoping.
|
||||
|
||||
## Nested CSS with UnoCSS
|
||||
|
||||
```md
|
||||
# Slidev
|
||||
|
||||
> Hello **world**
|
||||
|
||||
<style>
|
||||
blockquote {
|
||||
strong {
|
||||
--uno: 'text-teal-500 dark:text-teal-400';
|
||||
}
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## Global Styles
|
||||
|
||||
For global styles, use `styles/index.css` in your project.
|
||||
39
skills/slidev/references/syntax-block-frontmatter.md
Normal file
39
skills/slidev/references/syntax-block-frontmatter.md
Normal file
@@ -0,0 +1,39 @@
|
||||
---
|
||||
name: block-frontmatter
|
||||
description: Using YAML code blocks as slide frontmatter for syntax highlighting
|
||||
---
|
||||
|
||||
# Block Frontmatter
|
||||
|
||||
Use a YAML code block as the frontmatter for slides when you need syntax highlighting and formatter support.
|
||||
|
||||
## Usage
|
||||
|
||||
Instead of traditional frontmatter `---`, use a yaml code block at the start of a slide:
|
||||
|
||||
````md
|
||||
---
|
||||
theme: default
|
||||
---
|
||||
|
||||
# Slide 1
|
||||
|
||||
---
|
||||
|
||||
```yaml
|
||||
layout: quote
|
||||
```
|
||||
|
||||
# Slide 2
|
||||
|
||||
---
|
||||
|
||||
# Slide 3
|
||||
````
|
||||
|
||||
## Key Points
|
||||
|
||||
- Works for per-slide frontmatter only
|
||||
- Cannot use for headmatter (first frontmatter of the deck)
|
||||
- Provides syntax highlighting in editors
|
||||
- Compatible with prettier-plugin-slidev
|
||||
49
skills/slidev/references/syntax-frontmatter-merging.md
Normal file
49
skills/slidev/references/syntax-frontmatter-merging.md
Normal file
@@ -0,0 +1,49 @@
|
||||
---
|
||||
name: frontmatter-merging
|
||||
description: Priority rules when importing slides with conflicting frontmatter
|
||||
---
|
||||
|
||||
# Frontmatter Merging
|
||||
|
||||
When importing slides, frontmatter from main entry takes priority.
|
||||
|
||||
## Example
|
||||
|
||||
Main file (`slides.md`):
|
||||
```md
|
||||
---
|
||||
src: ./cover.md
|
||||
background: https://sli.dev/bar.png
|
||||
class: text-center
|
||||
---
|
||||
```
|
||||
|
||||
Imported file (`cover.md`):
|
||||
```md
|
||||
---
|
||||
layout: cover
|
||||
background: https://sli.dev/foo.png
|
||||
---
|
||||
|
||||
# Cover
|
||||
|
||||
Cover Page
|
||||
```
|
||||
|
||||
## Result
|
||||
|
||||
```md
|
||||
---
|
||||
layout: cover
|
||||
background: https://sli.dev/bar.png # main entry wins
|
||||
class: text-center
|
||||
---
|
||||
|
||||
# Cover
|
||||
|
||||
Cover Page
|
||||
```
|
||||
|
||||
## Priority Rule
|
||||
|
||||
Main entry > Imported file for duplicate keys.
|
||||
60
skills/slidev/references/syntax-importing-slides.md
Normal file
60
skills/slidev/references/syntax-importing-slides.md
Normal file
@@ -0,0 +1,60 @@
|
||||
---
|
||||
name: importing-slides
|
||||
description: Split presentations into multiple files for reusability
|
||||
---
|
||||
|
||||
# Importing Slides
|
||||
|
||||
Split presentations into multiple files for reusability.
|
||||
|
||||
## Basic Import
|
||||
|
||||
```md
|
||||
# Title
|
||||
|
||||
This is a normal page
|
||||
|
||||
---
|
||||
src: ./pages/toc.md
|
||||
---
|
||||
|
||||
<!-- Content here is ignored -->
|
||||
|
||||
---
|
||||
|
||||
# Page 4
|
||||
|
||||
Another normal page
|
||||
```
|
||||
|
||||
## Import Specific Slides
|
||||
|
||||
Use hash to select slides:
|
||||
|
||||
```md
|
||||
---
|
||||
src: ./another-presentation.md#2,5-7
|
||||
---
|
||||
```
|
||||
|
||||
Imports slides 2, 5, 6, and 7.
|
||||
|
||||
## Reuse Slides
|
||||
|
||||
Import the same file multiple times:
|
||||
|
||||
```md
|
||||
---
|
||||
src: ./pages/toc.md
|
||||
---
|
||||
|
||||
<!-- later... -->
|
||||
|
||||
---
|
||||
src: ./pages/toc.md
|
||||
---
|
||||
```
|
||||
|
||||
## Frontmatter Priority
|
||||
|
||||
Main entry frontmatter overrides imported file frontmatter for duplicate keys.
|
||||
51
skills/slidev/references/syntax-mdc.md
Normal file
51
skills/slidev/references/syntax-mdc.md
Normal file
@@ -0,0 +1,51 @@
|
||||
---
|
||||
name: mdc
|
||||
description: MDC (Markdown Components) syntax support
|
||||
---
|
||||
|
||||
# MDC Syntax
|
||||
|
||||
Enhanced Markdown with component and style syntax.
|
||||
|
||||
## Enable
|
||||
|
||||
```md
|
||||
---
|
||||
mdc: true
|
||||
---
|
||||
```
|
||||
|
||||
## Inline Styles
|
||||
|
||||
```md
|
||||
This is a [red text]{style="color:red"}
|
||||
```
|
||||
|
||||
## Inline Components
|
||||
|
||||
```md
|
||||
:inline-component{prop="value"}
|
||||
```
|
||||
|
||||
## Image Attributes
|
||||
|
||||
```md
|
||||
{width=500px lazy}
|
||||
```
|
||||
|
||||
## Block Components
|
||||
|
||||
```md
|
||||
::block-component{prop="value"}
|
||||
The **default** slot content
|
||||
::
|
||||
```
|
||||
|
||||
## Use Cases
|
||||
|
||||
- Add inline styles without HTML
|
||||
- Use Vue components inline
|
||||
- Add attributes to images
|
||||
- Create complex component layouts
|
||||
|
||||
Based on Nuxt's MDC (Markdown Components) syntax.
|
||||
27
skills/slidev/references/tool-eject-theme.md
Normal file
27
skills/slidev/references/tool-eject-theme.md
Normal file
@@ -0,0 +1,27 @@
|
||||
---
|
||||
name: eject-theme
|
||||
description: Extract theme to local filesystem for customization
|
||||
---
|
||||
|
||||
# Eject Theme
|
||||
|
||||
Extract installed theme to local filesystem for customization.
|
||||
|
||||
## Command
|
||||
|
||||
```bash
|
||||
slidev theme eject
|
||||
```
|
||||
|
||||
## Result
|
||||
|
||||
- Theme files copied to `./theme/`
|
||||
- Frontmatter updated to `theme: ./theme`
|
||||
|
||||
## Use Case
|
||||
|
||||
- Full control over theme
|
||||
- Create new theme based on existing one
|
||||
- Customize without modifying node_modules
|
||||
|
||||
If creating a derivative theme, credit the original theme and author.
|
||||
Reference in New Issue
Block a user