Slidev

https://sli.dev
Admin
Slidev is a tool for creating presentation slides designed for developers, allowing them to build...
Tokens:68,777
Snippets:707
Trust Score:9.1
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### Define custom shortcuts in ./setup/shortcuts.ts

Source: https://sli.dev/custom/config-shortcuts

Create this file to customize keyboard shortcuts. The setup function receives navigation operations and existing shortcuts, and returns a new array. The example binds the 'next' operation to Enter and 'prev' to Backspace, with auto-repeat enabled.

```TypeScript
import type { NavOperations, ShortcutOptions } from '@slidev/types'
import { defineShortcutsSetup } from '@slidev/types'

export default defineShortcutsSetup((nav: NavOperations, base: ShortcutOptions[]) => {
  return [
    ...base, // keep the existing shortcuts
    {
      key: 'enter',
      fn: () => nav.next(),
      autoRepeat: true,
    },
    {
      key: 'backspace',
      fn: () => nav.prev(),
      autoRepeat: true,
    },
  ]
})
```

--------------------------------

### Start a single-file Slidev project with slidev slides.md

Source: https://sli.dev/guide

Create and start a single-file slides project from slides.md after installing the Slidev CLI globally.

```bash
slidev slides.md
```

--------------------------------

### Install icon set with deno

Source: https://sli.dev/features/icons.html

Install the desired icon collection using deno.

```bash
deno add jsr:@iconify-json/[the-collection-you-want]
```

--------------------------------

### Install @iconify-json/uil with npm, yarn, pnpm, or bun

Source: https://sli.dev/features/code-groups.html

Install the icon collection required for custom icons. The example shows the command for npm, yarn, pnpm, and bun package managers.

```sh
npm add @iconify-json/uil
```

```sh
yarn add @iconify-json/uil
```

```sh
pnpm add @iconify-json/uil
```

```sh
bun add @iconify-json/uil
```

--------------------------------

### Install and Configure Custom Mermaid Renderer

Source: https://sli.dev/custom/config-mermaid-renderer

Install a third-party Mermaid library and create a renderer setup file that delegates rendering to its function. Replace the renderMermaid() call with the library's render function to customize Mermaid rendering in Slidev.

```bash
npm install beautiful-mermaid
```

```ts
// setup/mermaid-renderer.ts
import { defineMermaidRendererSetup } from '@slidev/types'
// example. https://github.com/lukilabs/beautiful-mermaid?tab=readme-ov-file#readme
import { renderMermaid } from 'beautiful-mermaid'

export default defineMermaidRendererSetup(() => {
  return (code, _options) => renderMermaid(code)
})
```

--------------------------------

### Install icon set with bun

Source: https://sli.dev/features/icons.html

Install the desired icon collection using bun.

```bash
bun add @iconify-json/[the-collection-you-want]
```

--------------------------------

### Define Preparser Setup in ./setup/preparser.ts

Source: https://sli.dev/custom/config-parser

Create this file to customize the preparser. It replaces any line equal to '@@@' with 'HELLO'. The setup function receives filepath, headmatter, and mode (since v0.48.0) and must return a list of extensions.

```ts
import { definePreparserSetup } from '@slidev/types'

export default definePreparserSetup(({ filepath, headmatter, mode }) => {
  return [
    {
      transformRawLines(lines) {
        for (const i in lines) {
          if (lines[i] === '@@@')
            lines[i] = 'HELLO'
        }
      },
    }
  ]
})
```

--------------------------------

### Install icon set with yarn

Source: https://sli.dev/features/icons.html

Install the desired icon collection using yarn.

```bash
yarn add @iconify-json/[the-collection-you-want]
```

--------------------------------

### Install icon set with npm

Source: https://sli.dev/features/icons.html

Install the desired icon collection using npm.

```bash
npm install @iconify-json/[the-collection-you-want]
```

--------------------------------

### Install icon set with pnpm

Source: https://sli.dev/features/icons.html

Install the desired icon collection using pnpm.

```bash
pnpm add @iconify-json/[the-collection-you-want]
```

--------------------------------

### Define context menu setup in ./setup/context-menu.ts

Source: https://sli.dev/custom/config-context-menu

Creates a context menu setup file that appends a custom menu item. Uses `defineContextMenuSetup` from `@slidev/types` and `useNav` from `@slidev/client`. The item is disabled in presenter mode and shows an alert when clicked.

```ts
import { useNav } from '@slidev/client'
import { defineContextMenuSetup } from '@slidev/types'
import { computed } from 'vue'
// ---cut-start---
// @ts-expect-error missing types
// ---cut-end---
import Icon3DCursor from '~icons/carbon/3d-cursor'

export default defineContextMenuSetup((items) => {
  const { isPresenter } = useNav()
  return computed(() => [
    ...items.value,
    {
      small: false,
      icon: Icon3DCursor, // if `small` is `true`, only the icon is shown
      label: 'Custom Menu Item', // or a Vue component
      action() {
        alert('Custom Menu Item Clicked!')
      },
      disabled: isPresenter.value,
    },
  ])
})
```

--------------------------------

### Start standalone MCP server over stdio

Source: https://sli.dev/features/mcp.html

Starts a standalone MCP server over stdio, operating directly on the markdown files. The `[entry]` argument is optional.

```bash
slidev mcp [entry]
```

--------------------------------

### Install @slidev/cli globally with pnpm, npm, yarn, bun, or deno

Source: https://sli.dev/guide

Install the Slidev CLI globally for single-file usage (not recommended). Choose the command matching your package manager.

```bash
pnpm i -g @slidev/cli
```

```bash
npm i -g @slidev/cli
```

```bash
yarn global add @slidev/cli
```

```bash
bun i -g @slidev/cli
```

```bash
deno i -g npm:@slidev/cli
```

--------------------------------

### Example prompts for Slidev skill

Source: https://sli.dev/guide/work-with-ai

Example prompts to ask agents for various Slidev tasks.

```text
Create a Slidev presentation about TypeScript generics with code examples
```

```text
Add a two-column slide with code on the left and explanation on the right
```

```text
Set up click animations to reveal bullet points one by one
```

```text
Configure the presentation for PDF export with speaker notes
```

--------------------------------

### Install Slidev skill

Source: https://sli.dev/guide/work-with-ai

Install the official Slidev skill to your AI coding agent.

```bash
npx skills add slidevjs/slidev
```

--------------------------------

### Frontmatter and Headmatter Example

Source: https://sli.dev/guide/syntax

Demonstrates headmatter and per-slide frontmatter in YAML format. The first frontmatter block configures the whole deck; subsequent blocks configure individual slides.

```markdown
---
theme: seriph
title: Welcome to Slidev
---

# Slide 1

The frontmatter of this slide is also the headmatter

---
layout: center
background: /background-1.png
class: text-white
---

# Slide 2

A page with the layout `center` and a background image

---

# Slide 3

A page without frontmatter

---
src: ./pages/4.md  # This slide only contains a frontmatter
---

---

# Slide 5
```

--------------------------------

### Slidev CLI prompt to install vite-plugin-pwa

Source: https://sli.dev/features/pwa.html

Prompt shown by the Slidev CLI when the pwa option is enabled but the vite-plugin-pwa package is missing. Confirm to install it with your project's package manager, or globally when Slidev is installed globally. In non-interactive environments like CI, install it ahead of time instead.

```text
? The "pwa" option requires the "vite-plugin-pwa" package, which is not installed
  in your project. Install it now? › (Y/n)
```

--------------------------------

### Configure Shiki themes in setup/shiki.ts

Source: https://sli.dev/custom/config-highlighter

Create this file to configure Shiki themes and transformers for Slidev. The setup function returns a themes object with dark and light theme names, and a transformers array for custom transformations.

```ts
import { defineShikiSetup } from '@slidev/types'

export default defineShikiSetup(() => {
  return {
    themes: {
      dark: 'min-dark',
      light: 'min-light',
    },
    transformers: [
      // ...
    ],
  }
})
```

--------------------------------

### slidev [entry]

Source: https://sli.dev/builtin/cli

Starts a local development server for Slidev, serving your slides in the browser with hot-reload.

```APIDOC
## slidev [entry]

### Description
Starts a local development server for Slidev, serving your slides in the browser with hot-reload.

### Command
`slidev [entry]`

### Arguments
- `[entry]` (string, default: `slides.md`) - Path to the markdown file containing your slides.

### Options
- `--port`, `-p` (number, default: `3030`) - Port number.
- `--base` (string, default: `/`) - Base URL for the application.
- `--open`, `-o` (boolean, default: `false`) - Open in the browser.
- `--remote [password]` (string) - Listen on the public host and enable remote control. If a value is passed, presenter mode is private and only accessible by passing the password in the URL query `password` parameter.
- `--bind` (string, default: `0.0.0.0`) - Specify which IP addresses the server should listen on in remote mode.
- `--log` ('error', 'warn', 'info', 'silent', default: `'warn'`) - Log level.
- `--force`, `-f` (boolean, default: `false`) - Force the optimizer to ignore the cache and re-bundle.
- `--theme`, `-t` (string) - Override theme.

### Example
```bash
slidev slides.md --port 8080 --open
```
```

--------------------------------

### Install playwright-chromium with bun

Source: https://sli.dev/guide/exporting

Install the required Playwright Chromium package using bun. This is necessary for CLI-based exports.

```bash
$ bun add -D playwright-chromium
```

--------------------------------

### Install playwright-chromium with deno

Source: https://sli.dev/guide/exporting

Install the required Playwright Chromium package using deno. This is necessary for CLI-based exports.

```bash
$ deno add -D npm:playwright-chromium
```

--------------------------------

### Install prettier-plugin-slidev with npm, pnpm, yarn, bun, or deno

Source: https://sli.dev/features/prettier-plugin.html

Install the Slidev Prettier plugin and Prettier as dev dependencies using your preferred package manager. The commands are equivalent alternatives; choose the one for your environment.

```bash
npm i -D prettier prettier-plugin-slidev
```

```bash
pnpm i -D prettier prettier-plugin-slidev
```

```bash
yarn add -D prettier prettier-plugin-slidev
```

```bash
bun add -D prettier prettier-plugin-slidev
```

```bash
deno add -D npm:prettier npm:prettier-plugin-slidev
```

--------------------------------

### Styles directory structure

Source: https://sli.dev/custom/directory-structure

Example of a styles directory with index.ts, base.css, code.css, and layouts.css for managing multiple CSS imports.

```bash
your-slidev/
  ├── ...
  └── styles/
      ├── index.ts
      ├── base.css
      ├── code.css
      └── layouts.css
```

--------------------------------

### Install theme via npm

Source: https://sli.dev/guide/theme-addon

Install a theme manually using npm. The package name may require the full scoped name, e.g., `@slidev/theme-seriph`.

```bash
$ npm install @slidev/theme-seriph

```

--------------------------------

### Show output on click with showOutputAt

Source: https://sli.dev/features/monaco-run.html

Use `showOutputAt` to control when the output is displayed. The value is the same as `v-click`. In this example, the output appears after one click.

```markdown
```ts {monaco-run} {showOutputAt:'+1'}
console.log('Shown after 1 click')
```
```

--------------------------------

### Install vite-plugin-pwa with npm

Source: https://sli.dev/features/pwa.html

Install the optional peer dependency vite-plugin-pwa manually, required when enabling the pwa option. Use this in non-interactive environments such as CI where the CLI prompt cannot be shown.

```bash
npm i -D vite-plugin-pwa
```

--------------------------------

### UnoCSS and PostCSS style example

Source: https://sli.dev/custom/directory-structure

Example of using UnoCSS at-directives and CSS nesting in a .slidev-layout selector. Note that global CSS also applies to the presenter UI; prefer scoping under .slidev-layout.

```css
.slidev-layout {
  --uno: px-14 py-10 text-[1.1rem];

  h1, h2, h3, h4, p, div {
    --uno: select-none;
  }

  pre, code {
    --uno: select-text;
  }

  a {
    color: theme('colors.primary');
  }
}
```

--------------------------------

### slidev mcp [entry]

Source: https://sli.dev/builtin/cli

Starts an MCP (Model Context Protocol) server over stdio for AI agents to inspect and edit the slides.

```APIDOC
## slidev mcp [entry]

### Description
Starts an MCP (Model Context Protocol) server over stdio for AI agents to inspect and edit the slides.

### Command
`slidev mcp [entry]`

### Arguments
- `[entry]` (string, default: `slides.md`) - Path to the slides markdown entry.

### Example
```bash
slidev mcp slides.md
```
```

--------------------------------

### Fallback fonts example and generated CSS

Source: https://sli.dev/custom/config-fonts

Shows the frontmatter configuration and the resulting CSS with fallback font stacks for `.font-sans`, `.font-serif`, and `.font-mono`.

```yaml
---
fonts:
  sans: Robot
  serif: Robot Slab
  mono: Fira Code
---
```

```css
.font-sans {
  font-family: "Robot",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}
.font-serif {
  font-family: "Robot Slab",ui-serif,Georgia,Cambria,"Times New Roman",Times,serif;
}
.font-mono {
  font-family: "Fira Code",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}
```

--------------------------------

### Use {*} placeholder with maxHeight

Source: https://sli.dev/features/code-block-max-height.html

Use {*} as a placeholder for line highlighting when setting maxHeight. This example sets maxHeight to '100px' and uses the wildcard placeholder.

```markdown
```ts {*}{maxHeight:'100px'}
// ...
```
```

--------------------------------

### Conventional directory structure

Source: https://sli.dev/custom/directory-structure

Shows the optional directories Slidev recognizes: components, layouts, public, setup, snippets, styles, index.html, slides.md, and vite.config.ts.

```bash
your-slidev/
  ├── components/       # custom components
  ├── layouts/          # custom layouts
  ├── public/           # static assets
  ├── setup/            # custom setup / hooks
  ├── snippets/         # code snippets
  ├── styles/           # custom style
  ├── index.html        # injections to index.html
  ├── slides.md         # the main slides entry
  └── vite.config.ts    # extending vite config
```

--------------------------------

### Configure stdio MCP server in JSON

Source: https://sli.dev/features/mcp.html

JSON configuration for an MCP client to launch the Slidev MCP server via npx. The example uses `slides.md` as the entry file.

```json
{
  "mcpServers": {
    "slidev": {
      "command": "npx",
      "args": ["slidev", "mcp", "slides.md"]
    }
  }
}
```

--------------------------------

### Set default Slidev configurations in package.json

Source: https://sli.dev/guide/write-theme

Add a slidev.defaults field in package.json to provide default configurations that merge with user's settings. Example sets transition to slide-left and aspectRatio to 4/3.

```json
{
  "slidev": {
    "defaults": {
      "transition": "slide-left",
      "aspectRatio": "4/3"
    }
  }
}
```

--------------------------------

### Create setup/katex.ts with defineKatexSetup

Source: https://sli.dev/custom/config-katex

Create `./setup/katex.ts` with this content to customize KaTeX options. The return value should be the custom options for KaTeX, as documented in KaTeX's documentation or the type definition.

```ts
import { defineKatexSetup } from '@slidev/types'

export default defineKatexSetup(() => {
  return {
    maxExpand: 2000,
    /* ... */
  }
})
```

--------------------------------

### Install CJK fonts and Playwright on CI

Source: https://sli.dev/features/og-image.html

On Ubuntu-based CI runners, install Noto CJK fonts before running `playwright install` to ensure non-Latin characters render correctly. This example shows the GitHub Actions steps.

```yaml
- name: Install CJK fonts
  run: sudo apt-get install -y fonts-noto-cjk

- name: Install Playwright browsers
  run: pnpm exec playwright install chromium --with-deps
```

--------------------------------

### Create ./setup/monaco.ts with defineMonacoSetup

Source: https://sli.dev/custom/config-monaco

Create this file to customize the Monaco editor. The `defineMonacoSetup` function receives the Monaco instance for configuration.

```ts
import { defineMonacoSetup } from '@slidev/types'

export default defineMonacoSetup(async (monaco) => {
  // use `monaco` to configure
})
```

--------------------------------

### Use case 1: compact syntax top-level presentation

Source: https://sli.dev/custom/config-parser

Defines a custom preparser that transforms compact @cover: and @src: syntax in slides.md into frontmatter-delimited slide definitions. The slides.md example shows the supported input format, while the preparser.ts setup registers a transformRawLines hook to expand those directives.

```markdown
```md
@cover: /nice.jpg
# Welcome
@src: page1.md
@src: page2.md
@cover: /break.jpg
@src: pages3-4.md
@cover: https://cover.sli.dev
# Questions?
see you next time
```
```

```typescript
```ts twoslash [./setup/preparser.ts]
import { definePreparserSetup } from '@slidev/types'

export default definePreparserSetup(() => {
  return [
    {
      transformRawLines(lines) {
        let i = 0
        while (i < lines.length) {
          const l = lines[i]
          if (/^@cover:/i.test(l)) {
            lines.splice(
              i,
              1,
              '---',
              'layout: cover',
              `background: ${l.replace(/^@cover: */i, '')}`,
              '---',
              ''
            )
            continue
          }
          if (/^@src:/i.test(l)) {
            lines.splice(
              i,
              1,
              '---',
              `src: ${l.replace(/^@src: */i, '')}`,
              '---',
              ''
            )
            continue
          }
          i++
        }
      }
    },
  ]
})
```
```

--------------------------------

### Preview theme with demo slides.md

Source: https://sli.dev/guide/write-theme

Create a slides.md file with the theme set to './' to use the theme in the current directory for previewing.

```markdown
---
theme: ./  # Use the theme in the current directory
---
```

--------------------------------

### Configure Vue App with defineAppSetup in setup/main.ts

Source: https://sli.dev/custom/config-vue

Create this file at ./setup/main.ts to extend the Slidev Vue app. The defineAppSetup function receives an object with the Vue app instance and router, allowing you to add custom plugins or configurations before the app starts.

```ts
/* eslint-disable import/first */
import type { Plugin } from 'vue'

declare const YourPlugin: Plugin
// ---cut---
import { defineAppSetup } from '@slidev/types'

export default defineAppSetup(({ app, router }) => {
  // Vue App
  app.use(YourPlugin)
})
```

--------------------------------

### Install playwright-chromium with yarn

Source: https://sli.dev/guide/exporting

Install the required Playwright Chromium package using yarn. This is necessary for CLI-based exports.

```bash
$ yarn add -D playwright-chromium
```

--------------------------------

### Install playwright-chromium with npm

Source: https://sli.dev/guide/exporting

Install the required Playwright Chromium package using npm. This is necessary for CLI-based exports.

```bash
$ npm i -D playwright-chromium
```

--------------------------------

### Install playwright-chromium with pnpm

Source: https://sli.dev/guide/exporting

Install the required Playwright Chromium package using pnpm. This is necessary for CLI-based exports.

```bash
$ pnpm add -D playwright-chromium
```

--------------------------------

### Configure Mermaid with defineMermaidSetup

Source: https://sli.dev/custom/config-mermaid

Create this file at ./setup/mermaid.ts to configure Mermaid globally for Slidev. The return value should be the custom configs for Mermaid; refer to the Mermaid documentation or the type definition for the full config list.

```ts
import { defineMermaidSetup } from '@slidev/types'

export default defineMermaidSetup(() => {
  return {
    theme: 'forest',
  }
})
```

--------------------------------

### Preview addon with slides.md

Source: https://sli.dev/guide/write-addon

Use this slides.md file to preview your addon locally. The addons field references the current directory './' to load the addon.

```markdown
---
addons:
  - ./
---

```

--------------------------------

### Create a layout file in the layouts directory

Source: https://sli.dev/guide/write-layout

Shows the file structure for a custom layout. Create a new Vue file in the `layouts` directory, e.g., `MyLayout.vue`.

```bash
your-slidev/
  ├── ...
  ├── slides.md
  └── layouts/
      ├── ...
      └── MyLayout.vue
```

--------------------------------

### Build slides as SPA

Source: https://sli.dev/guide/hosting

Builds the slides into a static SPA. By default, the generated files are placed in the `dist` folder. You can test the built version by running `npx vite preview` or any other static server.

```bash
$ slidev build
```

--------------------------------

### Navigation methods and properties of $nav

Source: https://sli.dev/guide/global-context

Shows how to use $nav methods like next, nextSlide, and go, and access properties like currentPage, currentLayout, and currentFrontmatter.

```javascript
$nav.next() // go next step
$nav.nextSlide() // go next slide (skip clicks)
$nav.go(10) // go slide #10

$nav.currentPage // current slide number
$nav.currentLayout // current layout name
$nav.currentFrontmatter // current slide frontmatter, including custom fields
```

--------------------------------

### Install Noto Color Emoji font

Source: https://sli.dev/guide/exporting

Installs the Noto Color Emoji font in a Linux environment to fix missing emojis in exported PDFs or PNGs. Requires sudo and updates the font cache.

```bash
$ curl -L --output NotoColorEmoji.ttf https://github.com/googlefonts/noto-emoji/raw/main/fonts/NotoColorEmoji.ttf
$ sudo mv NotoColorEmoji.ttf /usr/local/share/fonts/
$ fc-cache -fv
```

--------------------------------

### Add custom Shiki theme and language in setup/shiki.ts

Source: https://sli.dev/custom/config-highlighter

Extend the Shiki setup to import custom TextMate grammar/themes from JSON files. The themes object can use the imported customTheme for dark mode, and langs can include built-in languages plus customLanguage.

```ts
import { defineShikiSetup } from '@slidev/types'
// ---cut-start---
// @ts-expect-error missing types
// ---cut-end---
import customLanguage from './customLanguage.tmLanguage.json'
// ---cut-start---
// @ts-expect-error missing types
// ---cut-end---
import customTheme from './customTheme.tmTheme.json'

export default defineShikiSetup(() => {
  return {
    themes: {
      dark: customTheme,
      light: 'min-light',
    },
    langs: [
      'js',
      'typescript',
      'cpp',
      customLanguage,
      // ...
    ],
    transformers: [
      // ...
    ],
  }
})
```

--------------------------------

### Create a Slidev project with pnpm, npm, yarn, bun, or deno

Source: https://sli.dev/guide

Create a new Slidev project locally using your preferred package manager. Requires Node.js >= 22.12.0. The npm variant is not recommended because it downloads packages each time and is slow.

```bash
# If you haven't installed pnpm
npm i -g pnpm

pnpm create slidev
```

```bash
# Not recommended -
# NPM will download the packages each time you create a new project,
# which is slow and takes up a lot of space

npm init slidev@latest
```

```bash
yarn create slidev
```

```bash
bun create slidev
```

```bash
deno init --npm slidev
```

--------------------------------

### RenderWhen

Source: https://sli.dev/builtin/components

Renders slots depending on whether the context matches (for example whether we are in presenter view).

```APIDOC
## RenderWhen

### Description
Renders slots depending on whether the context matches (for example whether we are in presenter view).

### Usage

```md
<RenderWhen context="presenter">This will only be rendered in presenter view.</RenderWhen>
```

Context type: `'main' | 'visible' | 'print' | 'slide' | 'overview' | 'presenter' | 'previewNext'`

### Props
- **context** (`Context | Context[]`) - Required - A context or array of contexts you want to check for
  - `'main'`: Render in slides and presenter view (equivalent to ['slide', 'presenter'])
  - `'visible'`: Render the content if it is visible
  - `'print'`: Render in print mode
  - `'slide'`: Render in slides
  - `'overview'`: Render in overview
  - `'presenter'`: Render in presenter view
  - `'previewNext'`: Render in presenter's next slide view

### Slots
- **#default**: Rendered when the context matches
- **#fallback**: Rendered when the context does not match

```

--------------------------------

### Scaffold a theme with create slidev-theme (pnpm, npm, yarn, bun, deno)

Source: https://sli.dev/guide/write-theme

Use one of these commands to scaffold a new Slidev theme. Choose the package manager you prefer.

```bash
$ pnpm create slidev-theme
```

```bash
$ npm init slidev-theme@latest
```

```bash
$ yarn create slidev-theme
```

```bash
$ bun create slidev-theme
```

```bash
$ deno init --npm slidev-theme
```

--------------------------------

### Build with custom output directory

Source: https://sli.dev/guide/hosting

Builds the slides and outputs the generated files to a custom directory specified by `--out`.

```bash
$ slidev build --out my-build-folder
```

--------------------------------

### Using a Vue component in a slide

Source: https://sli.dev/guide/component

Example of using a component directly in a Markdown slide without manual imports.

```md
# My Slide

<MyComponent :count="4"/>
```

--------------------------------

### Export with Range

Source: https://sli.dev/guide/exporting

Exports only the specified slides or ranges. The example exports slides 1, 6, 7, 8, and 10.

```bash
$ slidev export --range 1,6-8,10
```

--------------------------------

### Build multiple slide decks

Source: https://sli.dev/guide/hosting

Builds multiple slide decks in one go by passing multiple markdown files as arguments. Each input file will generate a folder containing the build in the output directory.

```bash
$ slidev build slides1.md slides2.md
```

--------------------------------

### Omit Background

Source: https://sli.dev/guide/exporting

Removes the default browser background when exporting to PNGs. The CSS example covers all backgrounds in the application to reveal transparency.

```bash
$ slidev export --omit-background
```

```css
* {
  background: transparent !important;
}
```

--------------------------------

### Build with custom base path

Source: https://sli.dev/guide/hosting

Builds the slides with a custom base path for deployment under sub-routes. The `--base` path must begin and end with a slash `/`.

```bash
$ slidev build --base /talks/my-cool-talk/
```

--------------------------------

### Export slides to PDF with slidev export

Source: https://sli.dev/guide/exporting

Exports slides to a PDF file. Requires playwright-chromium to be installed. The PDF is saved to ./slides-export.pdf by default.

```bash
$ slidev export
```

--------------------------------

### Use view-transition with Comark syntax

Source: https://sli.dev/guide/animations.html

Enables the view-transition API and uses Comark syntax to name elements for smooth transitions. Requires browser support for the View Transitions API.

```markdown
---
transition: view-transition
comark: true
---

# View Transition {.inline-block.view-transition-title}

---

# View Transition {.inline-block.view-transition-title}
```

--------------------------------

### Build with PDF download via CLI

Source: https://sli.dev/features/build-with-pdf

Builds slides with PDF generation enabled via the CLI option `--download` (boolean only). Equivalent to setting `download: true` in headmatter.

```bash
$ slidev build --download
```

--------------------------------

### Run Slidev with Remote Tunnel (--remote --tunnel)

Source: https://sli.dev/features/remote-access.html

Start the Slidev dev server with remote access and a Cloudflare Quick Tunnel to expose the local server to the internet. This allows sharing slides without setting up a server.

```bash
pnpm dev --remote --tunnel
# i.e. slidev --remote --tunnel
```

```bash
npm run dev -- --remote --tunnel
# i.e. slidev --remote --tunnel
```

```bash
yarn dev --remote --tunnel
# i.e. slidev --remote --tunnel
```

```bash
bun dev --remote --tunnel
# i.e. slidev --remote --tunnel
```

```bash
deno run dev --remote --tunnel
# i.e. slidev --remote --tunnel
```

--------------------------------

### Incorrect: Re-adding @vitejs/plugin-vue

Source: https://sli.dev/custom/config-vite

This is an example of what NOT to do: re-adding a plugin that Slidev already uses internally. Instead, pass options to the `slidev.vue` field in `vite.config.ts`.

```ts
import Vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    Vue({
      /* vue options */
    })
  ],
})
```

--------------------------------

### TitleRenderer usage

Source: https://sli.dev/builtin/components

Use the TitleRenderer component to display the title of a specific slide. The 'no' prop specifies the slide number (starting from 1).

```md
<TitleRenderer no="42" />
```

--------------------------------

### slidev build [entry]

Source: https://sli.dev/builtin/cli

Builds a hostable single-page application (SPA) from your slides.

```APIDOC
## slidev build [entry]

### Description
Builds a hostable single-page application (SPA) from your slides.

### Command
`slidev build [entry]`

### Arguments
- `[entry]` (string, default: `slides.md`) - Path to the slides markdown file.

### Options
- `--out`, `-o` (string, default: `dist`) - Output directory.
- `--base` (string, default: `/`) - Base URL for the application.
- `--download` (boolean, default: `false`) - Allow the download of the slides as a PDF inside the SPA.
- `--theme`, `-t` (string) - Override theme.
- `--without-notes` (boolean, default: `false`) - Exclude speaker notes from the SPA.

### Example
```bash
slidev build slides.md --out dist --download
```
```

--------------------------------

### v-clicks with every prop

Source: https://sli.dev/guide/animations.html

Use the every prop to specify the number of items to show after each click. In this example, two items appear per click.

```markdown
<v-clicks every="2">

- Item 1.1
- Item 1.2
- Item 2.1
- Item 2.2

</v-clicks>
```
Tokens:
Raw