| 1 | <br> |
| 2 | <p align="center"> |
| 3 | <a href="https://github.com/slidevjs/slidev" target="_blank"> |
| 4 | <img src="https://github.com/slidevjs/slidev/blob/main/assets/logo-for-vscode.png?raw=true" alt="Slidev" width="350"/> |
| 5 | </a> |
| 6 | </p> |
| 7 | |
| 8 | <p align="center"> |
| 9 | Presentation <b>slide</b>s for <b>dev</b>elopers<br> |
| 10 | <sup><del>who use VS Code 🤣</del></sup> |
| 11 | </p> |
| 12 | |
| 13 | <p align="center"> |
| 14 | <a href="https://marketplace.visualstudio.com/items?itemName=antfu.slidev" target="__blank"><img src="https://img.shields.io/visual-studio-marketplace/v/antfu.slidev.svg?color=4EC5D4&label=VS%20Code%20Marketplace&logo=visual-studio-code" alt="Visual Studio Marketplace Version" /></a> |
| 15 | <a href="https://marketplace.visualstudio.com/items?itemName=antfu.slidev" target="__blank"><img src="https://img.shields.io/visual-studio-marketplace/d/antfu.slidev.svg?color=2B90B6" alt="Visual Studio Marketplace Downloads" /></a> |
| 16 | <a href="https://kermanx.github.io/reactive-vscode/" target="__blank"><img src="https://img.shields.io/badge/made_with-reactive--vscode-%23007ACC?style=flat&labelColor=%23229863" alt="Made with reacrive-vscode" /></a> |
| 17 | </p> |
| 18 | |
| 19 | <br> |
| 20 | |
| 21 | ### Features |
| 22 | |
| 23 | - Preview slides in the side panel |
| 24 | - Slides tree view |
| 25 | - Re-ordering slides |
| 26 | - Folding for slide blocks |
| 27 | - Multiple slides project support |
| 28 | - Start dev server in one click |
| 29 | |
| 30 | <img width="974" src="https://github.com/slidevjs/slidev/assets/63178754/2c9ba01a-d21f-4b33-b6b6-4e249873f865"> |
| 31 | |
| 32 | ## Usage |
| 33 | |
| 34 | Click the `Slidev` icon in the activity bar to open the **Slidev panel**. In the Slidev panel, you can see the projects tree view, slides tree view, and the preview webview. |
| 35 | |
| 36 | In the **projects tree view**, you can see all the Slidev projects in your workspace. You can click the item to open the corresponding file, and click the `eye` icon over it to switch the active project. The `add` icon allows you to load a slides project that wasn't scanned automatically. |
| 37 | |
| 38 | In the **slides tree view**, you can see all the slides in the active project. You can click the item to move your cursor to the slide in the editor, and drag and drop to reorder the slides. |
| 39 | |
| 40 | In the **preview webview**, you can click the `run-all` icon to start the dev server and click the `globe` icon to open the slides in the browser. Toggle `lock` icon to sync/unsync the preview navigation with the editor cursor. |
| 41 | |
| 42 | There are also some **commands** you can use. Type `Slidev` in the command palette to see them. |
| 43 | |
| 44 | ## Sponsors |
| 45 | |
| 46 | <p align="center"> |
| 47 | <a href="https://antfu.me/sponsor"> |
| 48 | <img src='https://cdn.jsdelivr.net/gh/antfu/static/sponsors.png'/> |
| 49 | </a> |
| 50 | </p> |
| 51 | |
| 52 | ## License |
| 53 | |
| 54 | MIT License © 2021-2025 [Anthony Fu](https://github.com/antfu) |
| 55 |