@slidev/cli 52.11.3 → 52.11.5

package/skills/slidev/references/animation-drawing.md

@@ -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.

package/skills/slidev/references/animation-rough-marker.md

@@ -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>
+```

package/skills/slidev/references/api-slide-hooks.md

@@ -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

package/skills/slidev/references/build-og-image.md

@@ -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.

package/skills/slidev/references/build-pdf.md

@@ -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.

package/skills/slidev/references/build-remote-assets.md

@@ -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
+![Remote Image](https://sli.dev/favicon.png)
+```
+
+Cached automatically by vite-plugin-remote-assets.
+
+## Local Images
+
+Place in `public/` folder and reference with leading slash:
+
+```md
+![Local Image](/pic.png)
+```
+
+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" />
+```

package/skills/slidev/references/build-seo-meta.md

@@ -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.

package/skills/slidev/references/code-groups.md

@@ -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']
+})
+```

package/skills/slidev/references/code-import-snippet.md

@@ -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}
+```

package/skills/slidev/references/code-line-highlighting.md

@@ -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
+```
+````

package/skills/slidev/references/code-line-numbers.md

@@ -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
+```
+````

package/skills/slidev/references/code-magic-move.md

@@ -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/

package/skills/slidev/references/code-max-height.md

@@ -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.

package/skills/slidev/references/code-twoslash.md

@@ -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/