@slidev/cli 52.11.4 → 52.11.5

package/skills/slidev/references/core-layouts.md

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

package/skills/slidev/references/core-syntax.md

@@ -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"}
+![](/image.png){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
+---
+```

package/skills/slidev/references/diagram-latex.md

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

package/skills/slidev/references/diagram-mermaid.md

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

package/skills/slidev/references/diagram-plantuml.md

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

package/skills/slidev/references/editor-monaco-run.md

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

package/skills/slidev/references/editor-monaco-write.md

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

package/skills/slidev/references/editor-monaco.md

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