@slidev/docs 52.11.3 → 52.11.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom/config-monaco.md +12 -0
- package/features/shiki-magic-move.md +61 -0
- package/features/vscode-extension.md +25 -2
- package/guide/ui.md +63 -0
- package/guide/work-with-ai.md +59 -0
- package/package.json +12 -12
package/custom/config-monaco.md
CHANGED
|
@@ -93,6 +93,18 @@ monaco: false # can also be `dev` or `build` to conditionally enable it
|
|
|
93
93
|
---
|
|
94
94
|
```
|
|
95
95
|
|
|
96
|
+
## Strict Mode {#strict-mode}
|
|
97
|
+
|
|
98
|
+
> Available since v0.52.0
|
|
99
|
+
|
|
100
|
+
By default, Monaco runnable code executes in strict mode (`"use strict"`). You can disable this if your code relies on non-strict mode behavior:
|
|
101
|
+
|
|
102
|
+
```yaml
|
|
103
|
+
---
|
|
104
|
+
monacoRunUseStrict: false
|
|
105
|
+
---
|
|
106
|
+
```
|
|
107
|
+
|
|
96
108
|
## Configure Code Runners
|
|
97
109
|
|
|
98
110
|
To configure how the Monaco Runner runs the code, or to add support for custom languages, please reference [Configure Code Runners](/custom/config-code-runners).
|
|
@@ -51,3 +51,64 @@ const add = () => count += 1
|
|
|
51
51
|
```
|
|
52
52
|
````
|
|
53
53
|
`````
|
|
54
|
+
|
|
55
|
+
## Title Bar {#title-bar}
|
|
56
|
+
|
|
57
|
+
> Available since v0.52.0
|
|
58
|
+
|
|
59
|
+
You can add a title bar to magic move blocks by specifying a filename in the opening fence of each step:
|
|
60
|
+
|
|
61
|
+
`````md
|
|
62
|
+
````md magic-move
|
|
63
|
+
```js [app.js]
|
|
64
|
+
console.log('Step 1')
|
|
65
|
+
```
|
|
66
|
+
```js [app.js]
|
|
67
|
+
console.log('Step 2')
|
|
68
|
+
```
|
|
69
|
+
````
|
|
70
|
+
`````
|
|
71
|
+
|
|
72
|
+
The title bar will also display an automatically matched icon based on the filename (see <LinkInline link="features/code-groups#title-icon-matching" />).
|
|
73
|
+
|
|
74
|
+
## Animation Duration {#duration}
|
|
75
|
+
|
|
76
|
+
> Available since v0.52.0
|
|
77
|
+
|
|
78
|
+
You can customize the animation duration for magic move transitions globally via the headmatter:
|
|
79
|
+
|
|
80
|
+
```yaml
|
|
81
|
+
---
|
|
82
|
+
magicMoveDuration: 500 # duration in milliseconds, default is 800
|
|
83
|
+
---
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
Or per-block by passing the `duration` option:
|
|
87
|
+
|
|
88
|
+
`````md
|
|
89
|
+
````md magic-move {duration:500}
|
|
90
|
+
```js
|
|
91
|
+
console.log('Step 1')
|
|
92
|
+
```
|
|
93
|
+
```js
|
|
94
|
+
console.log('Step 2')
|
|
95
|
+
```
|
|
96
|
+
````
|
|
97
|
+
`````
|
|
98
|
+
|
|
99
|
+
## Copy Button {#copy-button}
|
|
100
|
+
|
|
101
|
+
> Available since v0.52.0
|
|
102
|
+
|
|
103
|
+
Magic move code blocks support a copy button that appears on hover. Configure this behavior globally with the `magicMoveCopy` headmatter option:
|
|
104
|
+
|
|
105
|
+
```yaml
|
|
106
|
+
---
|
|
107
|
+
# Options: true | false | 'always' | 'final'
|
|
108
|
+
magicMoveCopy: true # show copy button on all steps (default)
|
|
109
|
+
magicMoveCopy: false # disable copy button
|
|
110
|
+
magicMoveCopy: 'final' # only show copy button on the final step
|
|
111
|
+
---
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
The copy button respects the global `codeCopy` setting. If `codeCopy` is `false`, the magic move copy button will also be disabled.
|
|
@@ -28,11 +28,12 @@ The VS Code extension provides some features to help you better organize your sl
|
|
|
28
28
|
### Features
|
|
29
29
|
|
|
30
30
|
- Preview slides in the side panel
|
|
31
|
-
- Slides tree view
|
|
32
|
-
- Re-ordering slides
|
|
31
|
+
- Slides tree view with slide numbers
|
|
32
|
+
- Re-ordering slides via drag and drop
|
|
33
33
|
- Folding for slide blocks
|
|
34
34
|
- Multiple slides project support
|
|
35
35
|
- Start the dev server with one click
|
|
36
|
+
- AI/Copilot integration via Language Model Tools
|
|
36
37
|
|
|
37
38
|
|
|
38
39
|
|
|
@@ -78,3 +79,25 @@ Examples:
|
|
|
78
79
|
- Global installation: `slidev ${args}`
|
|
79
80
|
- For PNPM users, you can set it to `pnpm slidev ${args}`.
|
|
80
81
|
- For [code-server](https://coder.com/docs/code-server/) users, you can set it to `pnpm slidev ${args} --base /proxy/${port}/`. This will make the dev server accessible at `http://localhost:8080/proxy/3000/`.
|
|
82
|
+
|
|
83
|
+
#### Slides Tree View {#slides-tree}
|
|
84
|
+
|
|
85
|
+
> Available since v0.52.0
|
|
86
|
+
|
|
87
|
+
The slides tree view shows all slides in your presentation with their slide numbers and titles. Each slide is displayed as `{slideNo}. {title}` making it easy to navigate to specific slides.
|
|
88
|
+
|
|
89
|
+
#### AI/Copilot Integration {#ai-integration}
|
|
90
|
+
|
|
91
|
+
> Available since v0.52.0
|
|
92
|
+
|
|
93
|
+
The extension provides Language Model Tools that allow VSCode's Copilot and other AI assistants to interact with your Slidev project. The following tools are available:
|
|
94
|
+
|
|
95
|
+
- `slidev_getActiveSlide` - Get information about the current active slide and project
|
|
96
|
+
- `slidev_getSlideContent` - Retrieve the content of a specific slide by number
|
|
97
|
+
- `slidev_getAllSlideTitles` - List all slide titles in the presentation
|
|
98
|
+
- `slidev_findSlideNoByTitle` - Find a slide number by its title
|
|
99
|
+
- `slidev_listEntries` - List all loaded Slidev project entries
|
|
100
|
+
- `slidev_getPreviewPort` - Get the preview server port for a project
|
|
101
|
+
- `slidev_chooseEntry` - Switch the active Slidev entry
|
|
102
|
+
|
|
103
|
+
These tools enable AI assistants to help you navigate, edit, and understand your slides more effectively.
|
package/guide/ui.md
CHANGED
|
@@ -50,6 +50,26 @@ Whenever you navigate through the slides in the presenter mode, all other opened
|
|
|
50
50
|
|
|
51
51
|
|
|
52
52
|
|
|
53
|
+
### Presenter Layouts {#presenter-layouts}
|
|
54
|
+
|
|
55
|
+
> Available since v0.50.0
|
|
56
|
+
|
|
57
|
+
The presenter view offers three different layouts that you can cycle through by clicking the layout toggle button <carbon-template class="inline-icon-btn"/> in the navigation bar:
|
|
58
|
+
|
|
59
|
+
- **Layout 1** (default): Current slide prominently displayed at the top, with notes and next slide preview below
|
|
60
|
+
- **Layout 2**: Notes panel on the left, current slide and next slide stacked on the right
|
|
61
|
+
- **Layout 3**: Notes and current slide on the left, larger next slide preview on the right
|
|
62
|
+
|
|
63
|
+
Each layout is optimized for different screen sizes and presentation preferences.
|
|
64
|
+
|
|
65
|
+
### Screen Mirror {#screen-mirror}
|
|
66
|
+
|
|
67
|
+
> Available since v0.50.0
|
|
68
|
+
|
|
69
|
+
In the presenter view, you can switch the main slide area to "Screen Mirror" mode. This allows you to capture and display another monitor or window directly in the presenter view.
|
|
70
|
+
|
|
71
|
+
Click the "Screen Mirror" option in the presenter view's segment control, then select the screen or window you want to mirror. This is useful when you want to see exactly what your audience sees on the projector or external display (e.g. live coding / live demo).
|
|
72
|
+
|
|
53
73
|
## Slide Overview {#slides-overview}
|
|
54
74
|
|
|
55
75
|
> Available since v0.48.0
|
|
@@ -61,6 +81,16 @@ You can visit an overview of all of your slides by first opening the [Quick Over
|
|
|
61
81
|
|
|
62
82
|
The overview page gives you a linear list of all your slides, with all of your notes on the side. You can double-click on the notes to edit the notes directly, and drag the clicks sliders to preview the steps in your slides.
|
|
63
83
|
|
|
84
|
+
## Notes Editor {#notes-editor}
|
|
85
|
+
|
|
86
|
+
> Available since v0.52.0
|
|
87
|
+
|
|
88
|
+
Slidev provides a batch notes editor at `http://localhost:<port>/notes-edit` where you can edit notes for all slides in a single text area.
|
|
89
|
+
|
|
90
|
+
Notes for each slide are separated by `--- #[slide-number]` markers. Changes are automatically saved as you type with debouncing.
|
|
91
|
+
|
|
92
|
+
This is useful when you want to write or review all your speaker notes in one place without switching between slides.
|
|
93
|
+
|
|
64
94
|
## Drawing UI {#drawing}
|
|
65
95
|
|
|
66
96
|
See:
|
|
@@ -79,6 +109,39 @@ See:
|
|
|
79
109
|
|
|
80
110
|
<LinkCard link="guide/exporting#browser"/>
|
|
81
111
|
|
|
112
|
+
## Settings {#settings}
|
|
113
|
+
|
|
114
|
+
Click the <carbon-settings-adjust class="inline-icon-btn"/> button in the navigation bar to access additional settings.
|
|
115
|
+
|
|
116
|
+
### CSS Filters {#css-filters}
|
|
117
|
+
|
|
118
|
+
> Available since v0.50.0
|
|
119
|
+
|
|
120
|
+
When presenting on different projectors or displays, colors may appear differently than expected. Slidev provides CSS filter controls to adjust the display in real-time:
|
|
121
|
+
|
|
122
|
+
- **Invert**: Flip all colors
|
|
123
|
+
- **Brightness**: Adjust overall brightness (0.5 - 1.5)
|
|
124
|
+
- **Contrast**: Adjust contrast levels (0.5 - 1.5)
|
|
125
|
+
- **Saturation**: Adjust color saturation (0.5 - 1.5)
|
|
126
|
+
- **Sepia**: Add sepia tone effect
|
|
127
|
+
- **Hue Rotate**: Shift all colors by degrees (-180 to 180)
|
|
128
|
+
|
|
129
|
+
These settings are stored locally and persist across sessions. A dot indicator appears on the settings button when any filter is active.
|
|
130
|
+
|
|
131
|
+
### Hide Idle Cursor {#hide-idle-cursor}
|
|
132
|
+
|
|
133
|
+
> Available since v0.50.0
|
|
134
|
+
|
|
135
|
+
When enabled, the cursor will automatically hide after a period of inactivity during the presentation. This provides a cleaner viewing experience for your audience.
|
|
136
|
+
|
|
137
|
+
### Slide Scale {#slide-scale}
|
|
138
|
+
|
|
139
|
+
Choose between "Fit" mode (scales slides to fit the viewport) or "1:1" mode (displays slides at their native resolution).
|
|
140
|
+
|
|
141
|
+
### Wake Lock {#wake-lock}
|
|
142
|
+
|
|
143
|
+
When enabled, prevents the screen from dimming or locking during your presentation. Requires browser support for the Wake Lock API.
|
|
144
|
+
|
|
82
145
|
## Global Layers {#global-layers}
|
|
83
146
|
|
|
84
147
|
You can add any custom UI below or above your slides for the whole presentation or per-slide:
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
# Work with AI
|
|
2
|
+
|
|
3
|
+
Thanks to Slidev being markdown-based, it works great with AI coding agents.
|
|
4
|
+
|
|
5
|
+
## Skills
|
|
6
|
+
|
|
7
|
+
Slidev provides official [skills](https://code.claude.com/docs/en/skills) for AI coding agents, enabling them to understand Slidev's syntax, features, and best practices when helping you create presentations.
|
|
8
|
+
|
|
9
|
+
### Installation
|
|
10
|
+
|
|
11
|
+
Install the Slidev skill to your AI coding agent:
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
npx skills add slidevjs/slidev
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
The source code of the skill is [here](https://github.com/slidevjs/slidev/tree/main/skills/slidev).
|
|
18
|
+
|
|
19
|
+
### Example Prompts
|
|
20
|
+
|
|
21
|
+
Once installed, you can ask agents to help with various Slidev tasks:
|
|
22
|
+
|
|
23
|
+
```
|
|
24
|
+
Create a Slidev presentation about TypeScript generics with code examples
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
```
|
|
28
|
+
Add a two-column slide with code on the left and explanation on the right
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
```
|
|
32
|
+
Set up click animations to reveal bullet points one by one
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
```
|
|
36
|
+
Configure the presentation for PDF export with speaker notes
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
### What's Included
|
|
40
|
+
|
|
41
|
+
The Slidev skill provides knowledge about:
|
|
42
|
+
|
|
43
|
+
- Markdown syntax, slide separators, and frontmatter
|
|
44
|
+
- Click animations and transitions
|
|
45
|
+
- Code highlighting, Monaco editor, and magic-move
|
|
46
|
+
- Diagrams (Mermaid, PlantUML) and LaTeX math
|
|
47
|
+
- Built-in layouts and components
|
|
48
|
+
- Exporting and hosting options
|
|
49
|
+
|
|
50
|
+
## VS Code Extension
|
|
51
|
+
|
|
52
|
+
The <LinkInline link="features/vscode-extension" /> provides Language Model Tools that allow VS Code's Copilot and other AI assistants to interact with your Slidev project directly. These tools enable AI to:
|
|
53
|
+
|
|
54
|
+
- Get information about the active slide and project
|
|
55
|
+
- Retrieve content of specific slides
|
|
56
|
+
- List and search slides by title
|
|
57
|
+
- Navigate between slides
|
|
58
|
+
|
|
59
|
+
See <LinkInline link="features/vscode-extension#ai-integration" /> for more details.
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@slidev/docs",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "52.11.
|
|
4
|
+
"version": "52.11.4",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"funding": "https://github.com/sponsors/antfu",
|
|
7
7
|
"homepage": "https://sli.dev",
|
|
@@ -17,10 +17,10 @@
|
|
|
17
17
|
],
|
|
18
18
|
"devDependencies": {
|
|
19
19
|
"@antfu/utils": "^9.3.0",
|
|
20
|
-
"@iconify/json": "^2.2.
|
|
20
|
+
"@iconify/json": "^2.2.432",
|
|
21
21
|
"@shikijs/vitepress-twoslash": "^3.21.0",
|
|
22
|
-
"@types/node": "^25.0.
|
|
23
|
-
"@unocss/reset": "^66.
|
|
22
|
+
"@types/node": "^25.0.10",
|
|
23
|
+
"@unocss/reset": "^66.6.0",
|
|
24
24
|
"@vueuse/core": "^14.1.0",
|
|
25
25
|
"fast-glob": "^3.3.3",
|
|
26
26
|
"gray-matter": "^4.0.3",
|
|
@@ -28,17 +28,17 @@
|
|
|
28
28
|
"shiki": "^3.21.0",
|
|
29
29
|
"typeit": "8.1.0",
|
|
30
30
|
"typescript": "^5.9.3",
|
|
31
|
-
"unocss": "^66.
|
|
32
|
-
"unplugin-icons": "^
|
|
33
|
-
"unplugin-vue-components": "^
|
|
31
|
+
"unocss": "^66.6.0",
|
|
32
|
+
"unplugin-icons": "^23.0.1",
|
|
33
|
+
"unplugin-vue-components": "^31.0.0",
|
|
34
34
|
"vite-plugin-inspect": "^11.3.3",
|
|
35
35
|
"vitepress": "^2.0.0-alpha.15",
|
|
36
|
-
"vitepress-plugin-group-icons": "^1.
|
|
36
|
+
"vitepress-plugin-group-icons": "^1.7.1",
|
|
37
37
|
"vitepress-plugin-llms": "^1.10.0",
|
|
38
|
-
"vue": "^3.5.
|
|
39
|
-
"@slidev/
|
|
40
|
-
"@slidev/types": "52.11.
|
|
41
|
-
"@slidev/
|
|
38
|
+
"vue": "^3.5.27",
|
|
39
|
+
"@slidev/client": "52.11.4",
|
|
40
|
+
"@slidev/types": "52.11.4",
|
|
41
|
+
"@slidev/parser": "52.11.4"
|
|
42
42
|
},
|
|
43
43
|
"scripts": {
|
|
44
44
|
"dev": "vitepress",
|