Skip to content

Commit f63dddb

Browse files
authored
📽️ add presentation examples
Added examples for presentation mode and custom styles.
1 parent 66e0f38 commit f63dddb

1 file changed

Lines changed: 25 additions & 1 deletion

File tree

README.md

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,9 +65,13 @@ Both absolute and relative paths are supported. Relative paths are resolved from
6565
Force VS Code to use a specific color theme:
6666

6767
```js
68-
<Editor session="demo" colorScheme="dark" />
6968
<Editor session="demo" colorScheme="light" />
7069
```
70+
```js
71+
<Editor session="demo" colorScheme="dark" />
72+
```
73+
74+
<img width="2668" height="1544" alt="A VS Code editor with the dark color theme applied inside a Slidev slide" src="https://github.com/user-attachments/assets/339048e5-a277-4df6-b64a-9af0bd661b44" />
7175

7276
If omitted, the color scheme automatically follows your Slidev presentation's `colorSchema` setting.
7377

@@ -86,6 +90,24 @@ livecode:
8690
zoom: 0.8
8791
```
8892
93+
<img width="2668" height="1548" alt="A VS Code editor scaled to 80% inside a Slidev slide" src="https://github.com/user-attachments/assets/b8ebc2aa-d654-4c0d-8f66-d340a82a531d" />
94+
95+
## 🔬 Presentation mode
96+
97+
Clean up the VS Code UI for a focused demo — hide distractions and increase the font size for large rooms:
98+
99+
```js
100+
<Editor
101+
session="demo"
102+
:fontSize="18"
103+
hideMinimap
104+
hideActivityBar
105+
hideStatusBar
106+
/>
107+
```
108+
109+
<img width="2668" height="1544" alt="A VS Code editor with the activity bar, minimap and status bar hidden" src="https://github.com/user-attachments/assets/c5908413-4e32-4435-a5d8-21a43b40b2d3" />
110+
89111
## 🎨 Custom style
90112

91113
The editor container is a plain `div` — pass any `class` or `style` to control its appearance:
@@ -130,6 +152,8 @@ By default, navigating away from a slide stops the session. Use `persist` to kee
130152

131153
The session survives slide changes and resumes instantly when you come back.
132154

155+
<img width="1832" height="1080" alt="Two Slidev slides showing the same VS Code session with state preserved after navigation" src="https://github.com/user-attachments/assets/4b69fe91-e479-4d0a-9fcb-99688cb0bf6f" />
156+
133157
## ⚙️ Deck-level config
134158

135159
Set defaults for all editors in your frontmatter:

0 commit comments

Comments
 (0)