You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/custom/config-monaco.md
+12Lines changed: 12 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -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).
Copy file name to clipboardExpand all lines: docs/features/shiki-magic-move.md
+61Lines changed: 61 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -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 <LinkInlinelink="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.
- 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.
Copy file name to clipboardExpand all lines: docs/guide/ui.md
+63Lines changed: 63 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -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-templateclass="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
<LinkCardlink="guide/exporting#browser"/>
81
111
112
+
## Settings {#settings}
113
+
114
+
Click the <carbon-settings-adjustclass="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:
-**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:
Copy file name to clipboardExpand all lines: docs/guide/work-with-ai.md
+11Lines changed: 11 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -46,3 +46,14 @@ The Slidev skill provides knowledge about:
46
46
- Diagrams (Mermaid, PlantUML) and LaTeX math
47
47
- Built-in layouts and components
48
48
- Exporting and hosting options
49
+
50
+
## VS Code Extension
51
+
52
+
The <LinkInlinelink="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 <LinkInlinelink="features/vscode-extension#ai-integration" /> for more details.
0 commit comments