Slidev

https://sli.dev/guide
Admin
Slidev is a developer-friendly presentation tool that allows you to create beautiful slides using...
Tokens:13,640
Snippets:219
Trust Score:9.1
Update:3 months ago
Show doc for...
Tokens:
Raw
### Example AI Prompt for Export Configuration

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

Ask the AI to configure the presentation for PDF export, including the setup of speaker notes for presenters.

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

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

### Install Slidev CLI Globally with deno

Source: https://sli.dev/guide

Install the Slidev CLI globally using deno to enable single-file usage. This is not the recommended approach for project creation.

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

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

### Install Slidev CLI Globally with bun

Source: https://sli.dev/guide

Install the Slidev CLI globally using bun to enable single-file usage. This is not the recommended approach for project creation.

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

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

### Install Slidev Skill for AI Agents

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

Install the official Slidev skill for AI coding agents to enable them to understand Slidev syntax and best practices. This command-line installation is straightforward.

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

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

### Install Slidev CLI Globally with npm

Source: https://sli.dev/guide

Install the Slidev CLI globally using npm to enable single-file usage. This is not the recommended approach for project creation.

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

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

### Create Slidev Project with pnpm

Source: https://sli.dev/guide

Use this command to create a new Slidev project locally if you have pnpm installed. Ensure pnpm is installed globally first.

```bash
# If you haven't installed pnpm

```

```bash
npm i -g pnpm

pnpm create slidev
```

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

### Install Slidev CLI Globally with pnpm

Source: https://sli.dev/guide

Install the Slidev CLI globally using pnpm to enable single-file usage. This is not the recommended approach for project creation.

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

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

### Install Slidev CLI Globally with yarn

Source: https://sli.dev/guide

Install the Slidev CLI globally using yarn to enable single-file usage. This is not the recommended approach for project creation.

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

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

### Example AI Prompt for Animations

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

Instruct the AI to set up click animations for revealing bullet points sequentially, enhancing presentation engagement.

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

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

### Example AI Prompt for Presentation Creation

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

Use this prompt to ask an AI coding agent to create a Slidev presentation on a specific topic, including relevant code examples.

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

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

### Install Playwright for CLI Export

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

Install the `playwright-chromium` package as a development dependency to enable CLI-based exporting. This is required for PDF, PPTX, and PNG exports.

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

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

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

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

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

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

### Scoped Transitions for Specific Slides/Layouts

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

SCSS example demonstrating how to apply custom transitions to elements only on specific slides or layouts.

```scss
.slidev-page-7,
.slidev-layout.my-custom-layout {
  .slidev-vclick-target {
    transition: all 500ms ease;
  }

  .slidev-vclick-hidden {
    transform: scale(0);
  }
}
```

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

### Install Theme Package

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

Install a Slidev theme package using npm. This command is used to add a theme to your project if you are not using a local path or the theme is not automatically detected.

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

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

### Fix Broken Emojis in Exports

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

If PDFs or PNGs are missing Emojis, ensure required fonts like Google's Noto Emoji are installed in your environment. This example shows how to download and install the font on a Linux system.

```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
```

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

### Configure Advanced Transition Options

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

Pass options directly to the Vue Transition component via the 'transition' frontmatter. This example sets the transition name and custom classes for enter-from and enter-active states.

```markdown
---
transition:
  name: my-transition
  enterFromClass: custom-enter-from
  enterActiveClass: custom-enter-active
---

```

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

### Custom Scaling Transition CSS

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

Example CSS to override default transitions and implement a scaling-up effect for v-click elements.

```css
/* styles.css */

.slidev-vclick-target {
  transition: all 500ms ease;
}

.slidev-vclick-hidden {
  transform: scale(0);
}
```

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

### GitHub Actions Workflow for Deploying to GitHub Pages

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

This YAML file configures a GitHub Actions workflow to automatically build and deploy Slidev presentations to GitHub Pages on push events to the main or master branches. It sets up Node.js, installs dependencies, builds the project with a base path derived from the repository name, and configures/uploads artifacts for GitHub Pages deployment.

```yaml
name: Deploy pages

on:
  workflow_dispatch:
  push:
    branches: [main, master]

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: pages
  cancel-in-progress: false

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v7

      - uses: actions/setup-node@v6
        with:
          node-version: 'lts/*'

      - name: Setup @antfu/ni
        run: npm i -g @antfu/ni

      - name: Install dependencies
        run: nci

      - name: Build
        run: nr build --base /${{github.event.repository.name}}/ 

      - name: Setup Pages
        uses: actions/configure-pages@v6
        with:
          enablement: true

      - uses: actions/upload-pages-artifact@v5
        with:
          path: dist

  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    needs: build
    runs-on: ubuntu-latest
    name: Deploy
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v5

```

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

### Example AI Prompt for Slide Layout

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

Request the AI to add a two-column slide layout, with code on one side and explanations on the other, for better content organization.

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

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

### Running Slidev with Docker

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

This bash command runs a pre-built Slidev Docker image, mounting the current directory to the container and exposing port 3030. It's useful for quickly running a presentation locally or testing a containerized build. The NPM_MIRROR environment variable can be used to specify a npm mirror for faster installation.

```bash
docker run --name slidev --rm -it \
    --user node \
    -v ${PWD}:/slidev \
    -p 3030:3030 \
    -e NPM_MIRROR="https://registry.npmmirror.com" \
    tangramor/slidev:latest

```

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

### Absolute Positioning with UnoCSS

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

Position elements absolutely using UnoCSS utility classes. This example demonstrates aligning an element to the bottom-left corner.

```html
<div class="absolute left-30px bottom-30px">
  This is a left-bottom aligned footer
</div>
```

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

### Define Custom Transition CSS

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

Provide CSS rules for your custom transition, defining the enter and leave animations. This example uses 'opacity' for a fade effect over 0.5 seconds.

```css
.my-transition-enter-active,
.my-transition-leave-active {
  transition: opacity 0.5s ease;
}

.my-transition-enter-from,
.my-transition-leave-to {
  opacity: 0;
}
```

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

### Define Slides with Separators

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

Use '---' on a new line to separate individual slides in your Markdown file. This example shows a basic structure with three slides.

```markdown
# Title

Hello, **Slidev**!

---

# Slide 2

Use code blocks for highlighting:

```ts
console.log('Hello, World!')
```

---

# Slide 3

Use UnoCSS classes and Vue components to style and enrich your slides:

<div class="p-3">
  <Tweet id="..." />
</div>
```

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

### Add Slidev Scripts to package.json

Source: https://sli.dev/guide

Integrate common Slidev commands into your package.json scripts for easy execution via npm run. This setup is automatically generated when creating a project with npm init slidev.

```json
{
  "scripts": {
    "dev": "slidev --open",
    "build": "slidev build",
    "export": "slidev export"
  }
}
```

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

### Create Slidev Project with npm

Source: https://sli.dev/guide

This command initializes a new Slidev project using npm. It is not recommended due to slower performance and higher disk usage compared to other package managers.

```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
```

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

### Create Slidev Project with deno

Source: https://sli.dev/guide

Use this command to create a new Slidev project locally with deno.

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

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

### Create Slidev Project with bun

Source: https://sli.dev/guide

Use this command to create a new Slidev project locally with bun.

```bash
bun create slidev
```

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

### Previewing a Local Addon

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

Include this configuration in your `slides.md` file to preview a local addon. Ensure the addon is in the same directory.

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

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

### Build Slides as SPA

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

Use this command to generate static files for your slides, suitable for hosting on any web server. The output is placed in the 'dist' folder by default.

```bash
slidev build
```

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

### Create Slidev Project with yarn

Source: https://sli.dev/guide

Use this command to create a new Slidev project locally with yarn.

```bash
yarn create slidev
```

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

### Enable View Transition API with Comark Syntax

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

Use 'view-transition' for the transition and enable Comark syntax to conveniently name view-transitions. This allows for smooth animations between DOM states using the View Transitions API.

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

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

---

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

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

### Configure Slides with Frontmatter

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

Configure slides using YAML frontmatter at the beginning of each slide. The first block acts as the headmatter for the entire deck.

```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
```

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

### Build Multiple Slide Decks

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

Generate builds for multiple slide decks simultaneously by providing multiple markdown files or using a glob pattern.

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

```bash
slidev build *.md
```

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

### v-motion with Click-Triggered Animations

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

Demonstrates using v-motion to apply different animations based on the number of clicks. Each click triggers a new state.

```html
<div
  v-motion
  :initial="{ x: -80 }"
  :enter="{ x: 0, y: 0 }"
  :click-1="{ x: 0, y: 30 }"
  :click-2="{ y: 60 }"
  :click-2-4="{ x: 40 }"
  :leave="{ y: 0, x: 80 }"
>
  Slidev
</div>
```

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

### Preview Local Theme

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

Configure the headmatter of a `slides.md` file to point to the current directory as the theme. This allows you to preview your theme during development.

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

```

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

### Netlify Configuration for Slidev

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

This TOML file configures Netlify to build and serve a Slidev presentation. It specifies the publish directory as 'dist', sets the build command, defines the Node.js version, and configures redirects to handle client-side routing.

```toml
[build]
publish = 'dist'
command = 'npm run build'

[build.environment]
NODE_VERSION = '24'

[[redirects]]
from = '/*'
to = '/index.html'
status = 200

```

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

### Specify Output Directory for SPA Build

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

Customize the output folder for your built slides using the --out option.

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

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

### Set Base Path for SPA Build

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

Configure the base path for your slides when deploying to sub-routes. Ensure the path begins and ends with a forward slash.

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

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

### Configure Default Theme Settings

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

Add a `slidev.defaults` field to your `package.json` to provide default configurations for your theme. These settings will be merged with the user's configurations.

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

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

### Export with Clicks

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

Include click animations in the export by using the `--with-clicks` option. This exports multiple pages for slides with click steps.

```bash
$ slidev export --with-clicks
```

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

### Configure Addons in Headmatter

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

Add addons to your Slidev presentation by listing them in the 'addons' option within the headmatter. Multiple addons can be included to extend functionality.

```markdown
---
addons:
  - excalidraw
  - '@slidev/plugin-notes'
---
```

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

### Export Multiple Presentations

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

Export multiple markdown presentation files at once. Each input file will generate its own output file.

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

```bash
$ slidev export *.md
```

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

### Dockerfile for Building a Slidev Docker Image

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

This Dockerfile uses a pre-built Slidev image as a base and copies the project files into the container. It's used to create a custom Docker image for deploying or running a specific Slidev presentation.

```dockerfile
FROM tangramor/slidev:latest

ADD . /slidev

```

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

### Creating a Custom Vue Component

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

Shows the directory structure for adding a custom Vue component to your Slidev project. Place your Vue files in the `components` directory to make them available for use in slides.

```bash
your-slidev/
  ├── ...
  ├── slides.md
  └── components/
      ├── ...
      └── MyComponent.vue
```

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

### Handling Assets in Frontmatter and Components

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

Relative paths in frontmatter or custom components may break after build. Place assets in the `public` folder and use absolute paths to ensure they are preserved.

```markdown
---
background: ./image.png  # Broken after build
---

<Comp src="./image.png" />
```

```markdown
---
background: /image.png
---

<Comp src="/image.png" />
```

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

### Scaffold a New Slidev Theme

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

Use one of these commands to generate a new Slidev theme project. Choose the package manager that suits your workflow.

```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
```

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

### Specify Forward and Backward Transitions

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

Use a '|' separator to define distinct transitions for forward and backward slide navigation. 'go-forward' is used when moving to the next slide, and 'go-backward' when returning to the previous one.

```markdown
---
transition: go-forward | go-backward
---
```

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

### Access Project Title Configuration

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

Display the project's title, defined in the frontmatter, using `$slidev.configs.title`.

```markdown
---

title: My First Slidev!
---

# Page 1

---

# Any Page

{{ $slidev.configs.title }} // 'My First Slidev!'
```

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

### Export to PDF

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

Use the default `slidev export` command to generate a PDF of your slides. The output is saved as `./slides-export.pdf` by default.

```bash
$ slidev export
```

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

### Combining v-click and v-motion

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

Shows how to synchronize v-motion animations with v-click steps. The element appears at click 2 and disappears at click 4.

```html
<div v-click="[2, 4]" v-motion
  :initial="{ x: -50 }"
  :enter="{ x: 0 }"
  :leave="{ x: 50 }"
>
  Shown at click 2 and hidden at click 4.
</div>
```

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

### Importing Static Assets in Markdown

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

Use relative paths for static assets like images directly in markdown or HTML tags. URLs are resolved to `/BASE_URL/assets/image.png` after build.

```markdown
![alt](./image.png)
<img src="./image.png" />
```

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

### Export to PPTX

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

Export slides to a PPTX file using the `--format pptx` option. Note that slides are exported as images, and presenter notes are included.

```bash
$ slidev export --format pptx
```

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

### Export to Markdown

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

Compile slides into a markdown file composed of PNG images using the `--format md` option.

```bash
$ slidev export --format md
```

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

### Create a Custom Layout File

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

To create a custom layout, create a new Vue file in the `layouts` directory of your Slidev project.

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

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

### Set Wait Until Condition

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

Specify the condition for waiting before exporting each slide using `--wait-until`. Options include 'networkidle', 'domcontentloaded', 'load', and 'none'.

```bash
$ slidev export --wait-until none
```

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

### Enable Slide Transitions Globally

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

Set the 'transition' frontmatter option to 'slide-left' to enable a sliding effect for all slide changes. This applies the specified transition to every slide switch.

```markdown
---
transition: slide-left
---
```

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

### Export in Dark Mode

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

Generate the export using the dark version of the theme by adding the `--dark` option.

```bash
$ slidev export --dark
```

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

### Access Theme Configuration

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

Access parsed theme configurations, such as primary color, defined in the frontmatter using `$slidev.themeConfigs.primary`.

```yaml
---
title: My First Slidev!
themeConfig:
  primary: '#213435'
---

```

```markdown
{{ $slidev.themeConfigs.primary }} // '#213435'
```

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

### Highlight Code with Markdown Blocks

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

Use standard Markdown code blocks with language specifiers to highlight code snippets. Slidev uses Shiki for syntax highlighting.

```typescript
console.log('Hello, World!')
```

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

### Build SPA Without Speaker Notes

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

Exclude speaker notes from the build output when sharing publicly by using the --without-notes flag.

```bash
slidev build --without-notes
```

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

### v-after as v-click Shortcut

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

Illustrates that `v-after` is a shortcut for `v-click` with a '0' offset, and `v-click` without a value defaults to '+1'.

```html
<!-- The following 2 usages are equivalent -->
<img v-after />
<img v-click="'+0'" />

<!-- The following 3 usages are equivalent -->
<img v-click />
<img v-click="'+1'" />
<v-click-gap size="1" /><img v-after />
```

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

### Using Vue Components in Slidev

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

Demonstrates how to use a Vue component directly within a Slidev markdown slide. Ensure the component is available either built-in, from a theme, or in the `components` directory.

```markdown
# My Slide

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

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

### Default Opacity Transition CSS

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

The default CSS styles that provide a subtle opacity transition for elements managed by v-click.

```css
/* below shows the default style */

.slidev-vclick-target {
  transition: opacity 100ms ease;
}

.slidev-vclick-hidden {
  opacity: 0;
  pointer-events: none;
}
```

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

### Default Click Animation Preset

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

Defines a default click animation preset for all elements on a slide or globally using frontmatter.

```yaml
---
clickAnimation: up
---
```

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

### Define Theme Color Schema

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

Specify the color schema your theme supports in `package.json`. Options include 'light', 'dark', or 'both' (default). This helps Slidev apply the correct styles.

```json
{
  "slidev": {
    "colorSchema": "light" // or "dark" or "both"
  }
}
```

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

### Specify Minimum Slidev Version

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

Declare the minimum required Slidev version in your `package.json` to ensure compatibility with your theme's features. An error will be shown if an incompatible version is used.

```json
{
  "engines": {
    "slidev": ">=0.48.0"
  }
}
```

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

### Export to PNGs

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

Export each slide as a PNG image using the `--format png` option. This is useful for individual slide assets.

```bash
$ slidev export --format png
```

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

### Running a Custom Slidev Docker Image

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

This bash command runs a custom-built Slidev Docker image, exposing port 3030. It allows you to run your Slidev presentation from a containerized environment after building the image using a Dockerfile.

```bash
docker run --name myslides --rm --user node -p 3030:3030 myslides

```

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

### Animate Multiple Items per Click with v-clicks every

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

The `every` prop on the `<v-clicks>` component allows you to specify how many items should appear with each click, useful for revealing content in batches.

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

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

</v-clicks>
```

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

### Element Transition Classes

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

These are the default classes applied by the v-click directive for managing element visibility and transitions.

```html
<div class="slidev-vclick-target slidev-vclick-hidden">Text</div>
```

```html
<div class="slidev-vclick-target">Text</div>
```

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

### Apply Show/Hide Click Animations with v-click

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

Use the `<v-click>` component or `v-click` directive to make elements appear on subsequent clicks. The component usage hides content until the first click, while the directive hides until the second click.

```html
<v-click> Hello World! </v-click>

<!-- Directive usage:
     this will be invisible until you press "next" the second time -->
<div v-click class="text-xl"> Hey! </div>
```

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

### Set Executable Path for Playwright

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

Specify the path to your Chrome or Edge browser executable for Playwright using the `--executable-path` option. This can resolve issues with missing codecs.

```bash
$ slidev export --executable-path [path_to_chromium]
```

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

### Define Custom Slide Transitions

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

Specify a custom transition name in the frontmatter, such as 'my-transition'. You then define the actual transition logic using CSS in your custom stylesheets.

```markdown
---
transition: my-transition
---
```

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

### Vercel Configuration for Slidev

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

This JSON file configures Vercel to serve a Slidev presentation by setting up rewrites to direct all incoming requests to the index.html file, which is essential for client-side routing in single-page applications.

```json
{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

```

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

### Specify Output Filename

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

Set a custom output filename for the exported file using the `--output` option. Alternatively, configure `exportFilename` in the headmatter.

```bash
$ slidev export --output my-pdf-export
```

```yaml
---
exportFilename: my-pdf-export
---
```

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

### CSS Grid Layouts

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

Utilize CSS Grids for creating complex layouts. Supports defining multiple columns with specific widths or flexible sizing.

```html
<div class="grid grid-cols-2 gap-4">
  <div>
    The first column
  </div>
  <div>
    The second column
  </div>
</div>
```

```html
<div class="grid grid-cols-[200px_1fr_10%] gap-4">
  <div>
    The first column (200px)
  </div>
  <div>
    The second column (auto fit)
  </div>
  <div>
    The third column (10% width to parent container)
  </div>
</div>
```

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

### Synchronized Code Block Highlighting

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

Synchronizes the highlighting of two code blocks, ensuring that the same click count triggers the same line highlighting in both blocks.

```js
1 + 1
'a' + 'b'
```

```js
= 2
= 'ab'
```

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

### Control Nested List Animations with v-clicks depth

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

Use the `depth` prop with the `<v-clicks>` component to manage animations in nested lists. Each increment in depth reveals items at that level sequentially.

```html
<v-clicks depth="2">

- Item 1
  - Item 1.1
  - Item 1.2
- Item 2
  - Item 2.1
  - Item 2.2

</v-clicks>
```

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

### Enter and Leave Animations with v-click

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

Specifies enter and leave animations for `v-click` using an array. The end index is exclusive, controlling when an element is shown and hidden.

```html
<div v-click.hide="[2, 4]">
  This will be hidden at click 2 and 3 (and shown otherwise).
</div>
<div v-click />
<div v-click="['+1', '+1']">
  This will be shown only at click 2 (and hidden otherwise).
</div>
```

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

### Default Layout Component

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

A basic layout component that uses the default slot to render slide content. Place this in your `layouts` directory.

```vue
<template>
  <div class="slidev-layout default">
    <slot />
  </div>
</template>
```

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

### Flexbox Layouts

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

Employ Flexbox for responsive layouts. Can be used for horizontal or vertical arrangements of elements, with options for alignment.

```html
<div class="flex items-center">
  <div>
    First block
  </div>
  <div>
    Second block
  </div>
</div>
```

```html
<div class="flex flex-col items-center">
  <div>
    Centered content
  </div>
</div>
```

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

### Slide Navigation Actions

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

Programmatically control slide navigation using methods like `next()`, `nextSlide()`, and `go()` on the `$nav` object. Access properties like `currentPage` and `currentLayout`.

```js
$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
```

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

### Generate PDF Outline

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

Include a PDF outline (table of contents) in the exported PDF by using the `--with-toc` option. Available since v0.36.10.

```bash
$ slidev export --with-toc
```

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

### Conditional Rendering Based on Render Context

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

Control content rendering based on the current context (`slide`, `presenter`, `overview`, `previewNext`) using `$renderContext`.

```markdown
<div v-if="['slide', 'presenter'].includes($renderContext)">
  This content will only be rendered in main slides view
</div>
```

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

### Animate List Items Sequentially with v-clicks

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

The `<v-clicks>` component is a convenient shorthand for applying `v-click` to all its child elements, ideal for animating lists or tables. Each click reveals the next item.

```html
<v-clicks>

- Item 1
- Item 2
- Item 3

</v-clicks>
```

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

### Set Theme in Headmatter

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

Specify the theme for your Slidev presentation by adding the 'theme' option to the headmatter. This is the primary way to change the visual appearance of your slides.

```markdown
---
theme: seriph
---

# The first slide
```

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

### Add Wait Time for Export

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

If content is missing or animations are not finished in the exported PDF, add a wait time in milliseconds before exporting each slide.

```bash
$ slidev export --wait 1000
```

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

### Omit Background for PNG Export

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

When exporting to PNGs, use `--omit-background` to remove the default browser window background, allowing for transparency. Additional CSS may be needed to reveal transparency.

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

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

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

### Custom Total Clicks for Slide Transition

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

Overrides the default slide transition behavior by setting a custom total number of clicks required before advancing to the next slide using frontmatter.

```yaml
---
# 10 clicks in this slide, before going to the next slide
clicks: 10
---
```

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

### Relative Positioning with v-click

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

Demonstrates relative positioning for elements triggered by clicks. Elements are shown or hidden based on the click count relative to previous elements. The default for `v-click` is '+1'.

```html
<div v-click> visible after 1 click </div>
<v-click at="+2"><div> visible after 3 clicks </div></v-click>
<div v-click.hide="'-1'"> hidden after 2 clicks </div>
```

```js
1  // highlighted after 7 clicks
2  // highlighted after 8 clicks
```

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

### Specify Layout in Slide Frontmatter

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

Use the `layout` frontmatter property to assign a specific layout to a slide. The content below the frontmatter will be rendered within the chosen layout.

```markdown
---
layout: quote
---

A quote from someone
```

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

### Element-Specific Animation Presets

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

Applies specific animation presets to individual elements using directive modifiers on `v-click`.

```html
<div v-click>Uses default animation preset defined in frontmatter</div>
<div v-click.scale>Scales up when showing and scales down when hiding</div>
<div v-click.fade.right>Composes multiple animations: fade and right</div>
<div v-click.none>No animation for this element</div>
```

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

### v-switch for Enter/Leave Effects

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

Utilizes the `v-switch` component to manage showing and hiding elements at specific click counts, offering a more declarative approach.

```html
<v-switch>
  <template #1> show at click 1, hide at click 2. </template>
  <template #2> show at click 2, hide at click 5. </template>
  <template #5-7> show at click 5, hide at click 7. </template>
</v-switch>
```

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

### Custom CSS for Animation Presets

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

Defines custom CSS rules for animation presets, allowing for unique visual effects when elements appear or disappear.

```css
.slidev-vclick-anim-pop.slidev-vclick-hidden {
  transform: scale(0.96) translateY(8px);
}
```

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

### Add Extra Delay Before Export

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

Introduce an extra delay before exporting each slide using the `--wait` option, specified in milliseconds. Useful for rendering complex elements.

```bash
$ slidev export --wait 10000
```

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

### Mixing Absolute and Relative Positioning

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

Demonstrates combining absolute and relative positioning within the same slide to control element visibility at different click counts.

```html
<div v-click> visible after 1 click </div>
<div v-click="3"> visible after 3 clicks </div>
<div v-click> visible after 2 click </div>
<div v-click="'-1'"> visible after 1 click </div>
<div v-click="4"> visible after 4 clicks </div>
```

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

### Basic v-motion Directive Usage

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

Applies a simple horizontal motion to an element using the v-motion directive. The element moves from left to right on entry and right to left on leave.

```html
<div
  v-motion
  :initial="{ x: -80 }"
  :enter="{ x: 0 }"
  :leave="{ x: 80 }"
>
  Slidev
</div>
```

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

### Conditional Rendering Based on Clicks

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

Conditionally render content on a slide based on the number of clicks using the `$clicks` variable.

```html
<div v-if="$clicks > 3">Content</div>
```

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

### Add Presenter Notes to Slides

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

Include presenter notes at the end of a slide using comment blocks (<!-- -->). These notes are visible in the presenter view.

```markdown
---
layout: cover
---

# Slide 1

This is the cover page.

<!-- This is a **note** -->

---

# Slide 2

<!-- This is NOT a note because it is not at the end of the slide -->

The second page

<!--
This is _another_ note
-->
```

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

### Composable Usage for Context in Vue

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

Import and use composables like `useNav`, `useDarkMode`, and `useSlideContext` for type-safe access to global context in Vue components. Available since v0.48.0.

```vue
<script setup>
import { onSlideEnter, onSlideLeave, useDarkMode, useIsSlideActive, useNav, useSlideContext } from '@slidev/client'

const { $slidev } = useSlideContext()
const { currentPage, currentLayout, currentSlideRoute } = useNav()
const { isDark } = useDarkMode()
const isActive = useIsSlideActive()
onSlideEnter((to, from) => { /* ... */ })
onSlideLeave((to, from) => { /* ... */ })
// ...
</script>
```

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

### Increase Playwright Timeout

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

Increase the Playwright timeout for large presentations using the `--timeout` option, specified in milliseconds.

```bash
$ slidev export --timeout 60000
```

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

### Display Current Page Number

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

Show the current page number using the `$page` variable and compare it with `$nav.currentPage` to check if it's the active page.

```markdown
Page: {{ $page }}

Is current page active: {{ $page === $nav.currentPage }}
```

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

### Absolute Positioning with v-click

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

Shows absolute positioning where elements are triggered at a specific click count. The `at` prop or directive value specifies the exact click number.

```html
<div v-click="3"> visible after 3 clicks </div>
<v-click at="2"><div> visible after 2 clicks </div></v-click>
<div v-click.hide="1"> hidden after 1 click </div>
```

```js
1  // highlighted after 3 clicks
2  // highlighted after 4 clicks
```

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

### Export Specific Slide Range

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

Export a specific slide or a range of slides using the `--range` option. Accepts comma-separated slide numbers and ranges (e.g., `1,6-8,10`).

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

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

### Split Layout Component with Named Slots

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

A layout component demonstrating the use of named slots for dividing slide content into distinct areas, such as 'left' and 'right'.

```vue
<template>
  <div class="slidev-layout split">
    <div class="left">
      <slot name="left" />
    </div>
    <div class="right">
      <slot name="right" />
    </div>
  </div>
</template>
```

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

### Reveal Elements Sequentially with v-after

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

The `v-after` directive makes an element visible when the previous `v-click` animation is triggered. Use it to reveal elements immediately after a preceding one appears.

```html
<div v-click> Hello </div>
<div v-after> World </div>  <!-- or <v-after> World </v-after> -->
```

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

### Type Hinting for Table of Contents

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

Import and use types like `TocItem` from `@slidev/types` for programmatic type safety in Vue components, particularly for functions dealing with table of contents.

```vue
<script setup>
import type { TocItem } from '@slidev/types'

function tocFunc(tree: TocItem[]): TocItem[] {
  // ...
}
</script>
```

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

### Access Current Page in Markdown

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

Display the current page number directly in your Markdown slides using the `$nav.currentPage` variable.

```markdown
# Page 1

Current page is: {{ $nav.currentPage }}
```

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

### Navigation Controls in Vue Components

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

Use `$nav.next` and `$nav.nextSlide` to control slide navigation within Vue components. Access project title via `$slidev.configs.title`.

```vue
<template>
  <div>Title: {{ $slidev.configs.title }}</div>
  <button @click="$nav.next">
    Next Click
  </button>
  <button @click="$nav.nextSlide">
    Next Slide
  </button>
</template>
```

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

### Hide Elements After Clicking with v-click.hide and v-after.hide

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

Add the `.hide` modifier to `v-click` or `v-after` directives to make elements disappear after being revealed. For components, use the `hide` prop to achieve the same effect.

```html
<div v-click> Visible after 1 click </div>
<div v-click.hide> Hidden after 2 clicks </div>
<div v-after.hide> Hidden after 2 clicks </div>
```

```html
<v-click> Visible after 1 click </v-click>
<v-click hide> Hidden after 2 clicks </v-click>
<v-after hide> Also hidden after 2 clicks </v-after>
```
Tokens:
Raw