VS Code Extension

 

The VS Code extension provides some features to help you better organize your slides and have a quick overview of them.

Features

• Preview slides in the side panel
• Slides tree view
• Re-ordering slides
• Folding for slide blocks
• Multiple slides project support
• Start the dev server with one click

Installation

You can install the extension from the VS Code Marketplace or the Open VSX Registry.

Usage

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.

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 icon over it to switch the active project. The icon allows you to load a slides project that wasn't scanned automatically.

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.

In the preview webview, you can click the icon to start the dev server and click the icon to open the slides in the browser. Toggle icon to sync/unsync the preview navigation with the editor cursor.

There are also some commands you can use. Type Slidev in the command palette to see them.

You can add glob patterns to the slidev.include configuration to include files as Slidev entries. The default value is ["**/*.md"]. Example:

{
  "slidev.include": ["**/presentation.md"]
}

Dev Command

You can customize the command to start dev server by setting the slidev.dev-command configuration. The default value is npm exec -c 'slidev ${args}'.

The configured command can contain placeholders:

• ${args}: All CLI arguments. e.g. slides.md --port 3000 --remote
• ${port}: The port number. e.g. 3000

Examples:

• Global installation: slidev ${args}
• For PNPM users, you can set it to pnpm slidev ${args}.
• For 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/.