### Example: Global Installation for Dev Command

Source: https://github.com/slidevjs/slidev/blob/main/docs/features/vscode-extension.md

Configure the `slidev.dev-command` for globally installed Slidev.

```json
{
  "slidev.dev-command": "slidev ${args}"
}
```

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

### Install and Run Slidev Project

Source: https://github.com/slidevjs/slidev/blob/main/packages/create-app/template/README.md

Install dependencies, start the development server, and visit the local address to view your slides. Edit slides.md to see live updates.

```bash
npm install
```

```bash
npm run dev
```

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

### Define Basic Preparser Setup

Source: https://github.com/slidevjs/slidev/blob/main/docs/custom/config-parser.md

Create a `./setup/preparser.ts` file to define custom preparser extensions. This example shows how to replace '@@@' lines with 'HELLO'. The `definePreparserSetup` function receives file path, headmatter, and mode, and must return a list of extensions.

```typescript
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 and Run Slidev Locally

Source: https://github.com/slidevjs/slidev/blob/main/docs/README.md

Install Slidev globally using pnpm, then install project dependencies and run the development server. Visit http://localhost:3000 to view the presentation.

```bash
npm i -g pnpm

pnpm i
pnpm run dev
```

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

### Define App Setup with Vue Plugins

Source: https://github.com/slidevjs/slidev/blob/main/docs/custom/config-vue.md

Use `defineAppSetup` to access the Vue app instance and router for custom configurations. This setup runs before the Slidev app starts.

```typescript
/* 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)
})
```

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

### Start Single File Slides

Source: https://github.com/slidevjs/slidev/blob/main/docs/guide/index.md

Command to create and start a single-file Slidev presentation after globally installing the CLI.

```bash
slidev slides.md
```

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

### Install Dependencies

Source: https://github.com/slidevjs/slidev/blob/main/CONTRIBUTING.md

Clone the repository and install all project dependencies using pnpm.

```bash
pnpm install
```

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

### Initialize Slidev Project Locally

Source: https://github.com/slidevjs/slidev/blob/main/README.md

Run this command in your terminal after installing Node.js to start a new Slidev project.

```bash
npm init slidev
```

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

### Install Theme Prompt

Source: https://github.com/slidevjs/slidev/blob/main/docs/guide/theme-addon.md

When a theme is not found, Slidev prompts for installation. This example shows the interactive prompt for installing '@slidev/theme-seriph'.

```bash
? The theme "@slidev/theme-seriph" was not found in your project, do you want to install it now? › (Y/n)
```

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

### Full Slidev Configuration Example

Source: https://github.com/slidevjs/slidev/blob/main/skills/slidev/references/core-headmatter.md

A comprehensive example combining multiple headmatter configurations for theme, title, fonts, features, export, and more.

```yaml
---
theme: default
title: Presentation Title
author: Your Name
highlighter: shiki
lineNumbers: true
transition: slide-left
aspectRatio: 16/9
canvasWidth: 980
fonts:
  sans: Roboto
  mono: Fira Code
drawings:
  enabled: true
  persist: true
download: true
---

```

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

### Vue Component Setup

Source: https://github.com/slidevjs/slidev/blob/main/packages/vscode/syntaxes/slidev.example.md

Demonstrates setting up a Vue component with a script setup block, importing 'ref' from Vue, and declaring a reactive variable.

```vue
<template>
  <div />
</template>

<script setup lang="ts">
import { ref } from 'vue'
let a = ref(1)
</script>
```

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

### Define KaTeX Setup in Node.js

Source: https://github.com/slidevjs/slidev/blob/main/docs/custom/config-katex.md

Create a setup file to export custom KaTeX options. Refer to KaTeX's documentation for a full list of options.

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

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

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

### LaTeX Inline Example

Source: https://github.com/slidevjs/slidev/blob/main/demo/starter/slides.md

Example of inline LaTeX.

```tex
\sqrt{3x-1}+(1+x)^2
```

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

### Install Theme in slides.md

Source: https://github.com/slidevjs/slidev/blob/main/packages/create-theme/template/README.md

Add this frontmatter to your slides.md to install the theme. Slidev will prompt for installation.

```markdown
---
theme: {{name}}
---
```

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

### Setup Shiki Highlighter with Default Themes

Source: https://github.com/slidevjs/slidev/blob/main/docs/custom/config-highlighter.md

Configure Shiki to use 'min-dark' and 'min-light' themes. This setup file should be placed at `./setup/shiki.ts`.

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

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

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

### Start Dev Server

Source: https://github.com/slidevjs/slidev/blob/main/skills/slidev/references/core-cli.md

Starts the Slidev development server. You can specify an entry markdown file or use the default.

```bash
slidev [entry]
slidev slides.md
```

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

### Run Slidev Demo

Source: https://github.com/slidevjs/slidev/blob/main/CONTRIBUTING.md

Start the Slidev development server locally.

```bash
pnpm demo:dev
```

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

### Install CLI Globally

Source: https://github.com/slidevjs/slidev/blob/main/skills/slidev/references/core-cli.md

Instructions for installing the Slidev CLI globally using npm.

```APIDOC
## Install CLI Globally

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

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

### Install Slidev CLI Globally with deno

Source: https://github.com/slidevjs/slidev/blob/main/docs/guide/index.md

Install the Slidev CLI globally using deno for single-file usage.

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

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

### Install Playwright Browsers for CI/CD

Source: https://github.com/slidevjs/slidev/blob/main/skills/slidev/references/core-exporting.md

In CI/CD environments, you need to explicitly install the necessary Playwright browsers. Use `npx playwright install` to download them.

```bash
npx playwright install chromium
```

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

### Install Slidev CLI Globally with pnpm

Source: https://github.com/slidevjs/slidev/blob/main/docs/guide/index.md

Install the Slidev CLI globally using pnpm for single-file usage. Ensure pnpm is installed globally.

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

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

### Start Slidev Development Server

Source: https://github.com/slidevjs/slidev/blob/main/docs/builtin/cli.md

Starts a local development server for Slidev. The default entry is 'slides.md'. Options can be passed with a space or '='. Boolean options like '--open' can omit 'true'.

```bash
slidev --port 8080
```

```bash
slidev --port=8080
```

```bash
slidev --open
```

```bash
slidev --remote --bind 0.0.0.0 --log warn
```

```bash
slidev --theme my-theme
```

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

### Install Prettier Plugin with deno

Source: https://github.com/slidevjs/slidev/blob/main/docs/features/prettier-plugin.md

Install the prettier-plugin-slidev using deno. This is a development dependency.

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

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

### Install Icon Collections

Source: https://github.com/slidevjs/slidev/blob/main/skills/slidev/references/style-icons.md

Install icon collections using pnpm. Replace `[collection-name]` with the desired icon set, e.g., `mdi`.

```bash
pnpm add @iconify-json/[collection-name]
```

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

### LaTeX Block Example

Source: https://github.com/slidevjs/slidev/blob/main/demo/starter/slides.md

Example of block LaTeX using the align environment.

```tex
{\displaystyle
\begin{aligned}
\nabla \cdot \vec{E} &= \frac{\rho}{\varepsilon_0} \\
\nabla \cdot \vec{B} &= 0 \\
\nabla \times \vec{E} &= -\frac{\partial\vec{B}}{\partial t} \\
\nabla \times \vec{B} &= \mu_0\vec{J} + \mu_0\varepsilon_0\frac{\partial\vec{E}}{\partial t}
\end{aligned}
}
```

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

### Monaco Editor Example

Source: https://github.com/slidevjs/slidev/blob/main/demo/starter/slides.md

Example of using the Monaco Editor with the {monaco} directive.

```typescript
import { ref } from 'vue'
import { emptyArray } from './external'

const arr = ref(emptyArray(10))
```

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

### Initialize Slidev Theme with npm

Source: https://github.com/slidevjs/slidev/blob/main/packages/create-theme/README.md

Use this command to start a new Slidev theme project using npm.

```bash
npm init slidev-theme
```

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

### Monaco Editor with Run Example

Source: https://github.com/slidevjs/slidev/blob/main/demo/starter/slides.md

Example of using the Monaco Editor with the {monaco-run} directive for executable code.

```typescript
import { version } from 'vue'
import { emptyArray, sayHello } from './external'

sayHello()
console.log(`vue ${version}`)
console.log(emptyArray<number>(10).reduce(fib => [...fib, fib.at(-1)! + fib.at(-2)!], [1, 1]))
```

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

### Install Slidev CLI Globally with bun

Source: https://github.com/slidevjs/slidev/blob/main/docs/guide/index.md

Install the Slidev CLI globally using bun for single-file usage.

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

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

### Install Prettier Plugin with bun

Source: https://github.com/slidevjs/slidev/blob/main/docs/features/prettier-plugin.md

Install the prettier-plugin-slidev using bun. This is a development dependency.

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

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

### Full Frontmatter Example

Source: https://github.com/slidevjs/slidev/blob/main/skills/slidev/references/core-frontmatter.md

A comprehensive example demonstrating multiple frontmatter options applied to a single slide, including layout, background, text styling, transitions, clicks, zoom, and TOC visibility.

```yaml
---
layout: center
background: /bg.jpg
class: text-white text-center
transition: fade
clicks: 3
zoom: 0.9
hideInToc: false
---

# Slide Content
```

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

### Development Server (`slidev [entry]`)

Source: https://github.com/slidevjs/slidev/blob/main/docs/builtin/cli.md

Starts a local development server for your Slidev presentation.

```APIDOC
## `slidev [entry]` {#dev}

Start a local server for Slidev.

### Parameters

#### Path Parameters

- **entry** (`string`, default: `slides.md`) - Path to the markdown file containing your slides.

### Options

- **`--port`, `-p`** (`number`, default: `3030`) - Port number for the server.
- **`--base`** (`string`, default: `/`) - Base URL for the application.
- **`--open`, `-o`** (`boolean`, default: `false`) - Automatically open the presentation in the default browser.
- **`--remote [password]`** (`string`) - Enable remote control by listening on the public host. If a password is provided, the presenter mode is private and requires the password in the URL query.
- **`--bind`** (`string`, default: `0.0.0.0`) - Specify the IP addresses the server should listen on in remote mode.
- **`--log`** (`'error' | 'warn' | 'info' | 'silent'`, default: `'warn'`) - Set the log level for the CLI.
- **`--force`, `-f`** (`boolean`, default: `false`) - Force the optimizer to ignore the cache and re-bundle.
- **`--theme`, `-t`** (`string`) - Override the default theme for the presentation.
```

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

### Install pnpm

Source: https://github.com/slidevjs/slidev/blob/main/CONTRIBUTING.md

Install pnpm globally if you haven't already. This is the package manager used by the project.

```bash
npm i -g pnpm
```

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

### Install Slidev CLI Globally with npm

Source: https://github.com/slidevjs/slidev/blob/main/docs/guide/index.md

Install the Slidev CLI globally using npm for single-file usage.

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

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

### Configure Editor Options Globally via Setup File

Source: https://github.com/slidevjs/slidev/blob/main/docs/custom/config-monaco.md

Apply editor options, such as 'wordWrap: "on"', to all Monaco instances by returning them from the 'defineMonacoSetup' function in your setup file.

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

export default defineMonacoSetup(() => {
  return {
    editorOptions: {
      wordWrap: 'on'
    }
  }
})
```

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

### Setup Shiki Highlighter with Custom Themes and Languages

Source: https://github.com/slidevjs/slidev/blob/main/docs/custom/config-highlighter.md

Configure Shiki to use custom themes and languages by importing them into the setup file. Ensure custom language and theme files are correctly imported.

```typescript
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: [
      // ...
    ],
  }
})
```

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

### Run Composable Vue Demo

Source: https://github.com/slidevjs/slidev/blob/main/CONTRIBUTING.md

Run the Slidev development server with the 'Composable Vue' real-world example.

```bash
pnpm demo:composable-vue
```

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

### Install Prettier Plugin with npm

Source: https://github.com/slidevjs/slidev/blob/main/docs/features/prettier-plugin.md

Install the prettier-plugin-slidev using npm. This is a development dependency.

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

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

### Install Slidev CLI Globally with yarn

Source: https://github.com/slidevjs/slidev/blob/main/docs/guide/index.md

Install the Slidev CLI globally using yarn for single-file usage.

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

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

### Initialize Slidev Theme with yarn

Source: https://github.com/slidevjs/slidev/blob/main/packages/create-theme/README.md

Use this command to start a new Slidev theme project using yarn.

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

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

### Motion Animation with Multiple Images

Source: https://github.com/slidevjs/slidev/blob/main/demo/starter/slides.md

Example of animating multiple images with `v-motion`.

```html
<img
  v-motion
  :initial="{ x: 800, y: -100, scale: 1.5, rotate: -50 }"
  :enter="final"
  class="absolute inset-0"
  src="https://sli.dev/logo-square.png"
  alt=""
/>
<img
  v-motion
  :initial="{ y: 500, x: -100, scale: 2 }"
  :enter="final"
  class="absolute inset-0"
  src="https://sli.dev/logo-circle.png"
  alt=""
/>
<img
  v-motion
  :initial="{ x: 600, y: 400, scale: 2, rotate: 100 }"
  :enter="final"
  class="absolute inset-0"
  src="https://sli.dev/logo-triangle.png"
  alt=""
/>
```

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

### Example: code-server Dev Command

Source: https://github.com/slidevjs/slidev/blob/main/docs/features/vscode-extension.md

Configure the `slidev.dev-command` for code-server users to ensure proper proxying.

```json
{
  "slidev.dev-command": "pnpm slidev ${args} --base /proxy/${port}/"
}
```

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

### Create Slidev Project with pnpm

Source: https://github.com/slidevjs/slidev/blob/main/docs/guide/index.md

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

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

pnpm create slidev
```

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

### Install Icon Collections

Source: https://github.com/slidevjs/slidev/blob/main/docs/features/icons.md

Install the desired icon collection package as a dependency using your package manager. Replace `[the-collection-you-want]` with the specific icon set name (e.g., `mdi`).

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

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

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

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

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

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

### Second YAML Content Block Example

Source: https://github.com/slidevjs/slidev/blob/main/test/fixtures/markdown/frontmatter.md

Similar to the previous example, this YAML block is treated as content because frontmatter has already been defined earlier in the file.

```yaml
# When there is already a frontmatter, the first yaml block should be treated as content
layout: should not from yaml 2
```

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

### Setup Monaco Editor Configuration

Source: https://github.com/slidevjs/slidev/blob/main/docs/custom/config-monaco.md

Use this file to define custom Monaco editor configurations. It allows you to hook into the Monaco editor setup process.

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

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

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

### Example: PNPM User Dev Command

Source: https://github.com/slidevjs/slidev/blob/main/docs/features/vscode-extension.md

Configure the `slidev.dev-command` for users of PNPM.

```json
{
  "slidev.dev-command": "pnpm slidev ${args}"
}
```

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

### Vue Script Setup for Animations

Source: https://github.com/slidevjs/slidev/blob/main/packages/slidev/template.md

Defines animation configurations, including spring physics, within a `<script setup>` block for use with `v-motion`. This script is scoped to the current page.

```html
<script setup lang="ts">
const final = {
  x: 0,
  y: 0,
  rotate: 0,
  scale: 1,
  transition: {
    type: 'spring',
    damping: 10,
    stiffness: 20,
    mass: 2
  }
}
</script>
```

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

### Create Slidev Project with bun

Source: https://github.com/slidevjs/slidev/blob/main/docs/guide/index.md

Use this command to create a new Slidev project if you have bun installed.

```bash
bun create slidev
```

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

### Motion Animation with Text

Source: https://github.com/slidevjs/slidev/blob/main/demo/starter/slides.md

Example of animating text with `v-motion`.

```html
<div
  class="text-5xl absolute top-14 left-40 text-[#2B90B6] -z-1"
  v-motion
  :initial="{ x: -80, opacity: 0}"
  :enter="{ x: 0, opacity: 1, transition: { delay: 2000, duration: 1000 } }">
  Slidev
</div>
```

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

### Click Animation Example

Source: https://github.com/slidevjs/slidev/blob/main/demo/starter/slides.md

This shows up when you trigger a click animation.

```html
<div v-click>This shows up when you trigger a click animation.</div>
```

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

### Install @vue/composition-api for Vue 2

Source: https://github.com/slidevjs/slidev/blob/main/demo/composable-vue/slides.md

Use this snippet to install the Composition API plugin for Vue 2. Ensure Vue is imported before using Vue.use.

```typescript
import VueCompositionAPI from '@vue/composition-api'
import Vue from 'vue'

Vue.use(VueCompositionAPI)
```

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

### Vue Script Setup for Motion Animation

Source: https://github.com/slidevjs/slidev/blob/main/demo/starter/slides.md

Vue script setup for motion animation, defining the final state and transition properties.

```javascript
const final = {
  x: 0,
  y: 0,
  rotate: 0,
  scale: 1,
  transition: {
    type: 'spring',
    damping: 10,
    stiffness: 20,
    mass: 2
  }
}
```

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

### Group npm, yarn, and pnpm install commands

Source: https://github.com/slidevjs/slidev/blob/main/docs/features/code-groups.md

Use code groups to display different package manager installation commands. Requires Comark syntax enabled.

```markdown
::code-group

```sh [npm]
npm i @slidev/cli
```

```sh [yarn]
yarn add @slidev/cli
```

```sh [pnpm]
pnpm add @slidev/cli
```

::
```

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

### Basic Console Log Example

Source: https://github.com/slidevjs/slidev/blob/main/packages/vscode/syntaxes/slidev.example.md

A simple TypeScript code snippet to log 'Hello World' to the console.

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

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

### Manually Install Theme

Source: https://github.com/slidevjs/slidev/blob/main/docs/guide/theme-addon.md

Install a Slidev theme manually using npm if the automatic prompt is not used or fails. Replace '@slidev/theme-seriph' with the actual theme package name.

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

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

### Define Mermaid Renderer Setup

Source: https://github.com/slidevjs/slidev/blob/main/docs/custom/config-mermaid-renderer.md

Use this setup to integrate a custom Mermaid rendering library. Replace `renderMermaid` with the actual render function from your chosen library.

```typescript
// 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)
})
```

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

### Motion Animation Example

Source: https://github.com/slidevjs/slidev/blob/main/demo/starter/slides.md

Motion animations are powered by @vueuse/motion, triggered by `v-motion` directive.

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

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

### useTitle Composable Example

Source: https://github.com/slidevjs/slidev/blob/main/demo/composable-vue/slides.md

Demonstrates the `useTitle` composable from `@vueuse/core`, showing how to get and set the browser's document title reactively.

```ts
import { useTitle } from '@vueuse/core'

const title = useTitle()

title.value = 'Hello World'
// now the page's title changed
```

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

### Add Custom Context Menu Item

Source: https://github.com/slidevjs/slidev/blob/main/docs/custom/config-context-menu.md

Define a custom context menu item in Slidev by creating a setup file. This example appends a new item with an icon, label, and action, which is disabled for presenters.

```typescript
// ---cut---
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,
    },
  ])
})
```

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

### Install UIL icon collection for custom icons

Source: https://github.com/slidevjs/slidev/blob/main/docs/features/code-groups.md

Grouped commands to install the `@iconify-json/uil` package using different package managers (npm, yarn, pnpm, bun). This is a prerequisite for using UIL icons in Slidev.

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

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

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

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

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

### Comark Syntax Examples

Source: https://github.com/slidevjs/slidev/blob/main/docs/features/comark.md

Demonstrates Comark Syntax for inline styling, components, and block components. Use `::` for block components and `{}` for attributes.

```markdown
This is a [red text]{style="color:red"} :inline-component{prop="value"}

![](/image.png){width=500px lazy}

::block-component{prop="value"}
The **default** slot
::
```

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

### Build Presentation with Options

Source: https://github.com/slidevjs/slidev/blob/main/skills/slidev/references/core-cli.md

Build with custom base URL, include PDF download, specify output directory, or exclude presenter notes.

```bash
slidev build --base /my-repo/
slidev build --download --out public
slidev build slides1.md slides2.md  # Multiple builds
```

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

### Motion Animation with Delayed Transition

Source: https://github.com/slidevjs/slidev/blob/main/demo/starter/slides.md

Example of motion animation with a delayed transition.

```html
<div
  v-motion
  :initial="{ x:35, y: 30, opacity: 0}"
  :enter="{ y: 0, opacity: 1, transition: { delay: 3500 } }">

[Learn more](https://sli.dev/guide/animations.html#motion)

</div>
```

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

### Create Slidev Project with yarn

Source: https://github.com/slidevjs/slidev/blob/main/docs/guide/index.md

Use this command to create a new Slidev project if you have yarn installed.

```bash
yarn create slidev
```

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

### Create and Run Slidev Project

Source: https://github.com/slidevjs/slidev/blob/main/skills/slidev/SKILL.md

Use these commands to create a new Slidev project, start the development server, build a static SPA, or export the presentation to PDF.

```bash
pnpm create slidev
pnpm run dev
pnpm run build
pnpm run export
```

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

### Build Presentation

Source: https://github.com/slidevjs/slidev/blob/main/skills/slidev/references/core-cli.md

Builds the presentation for deployment. Specify multiple entry files for batch builds.

```bash
slidev build [entry]
```

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

### Dev Server with Options

Source: https://github.com/slidevjs/slidev/blob/main/skills/slidev/references/core-cli.md

Run the dev server with custom port, open in browser, or enable remote access with a password.

```bash
slidev --port 8080 --open
slidev --remote mypassword
slidev --base /talks/my-talk/
```

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

### Install Prettier Plugin with yarn

Source: https://github.com/slidevjs/slidev/blob/main/docs/features/prettier-plugin.md

Install the prettier-plugin-slidev using yarn. This is a development dependency.

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

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

### Install Prettier Plugin with pnpm

Source: https://github.com/slidevjs/slidev/blob/main/docs/features/prettier-plugin.md

Install the prettier-plugin-slidev using pnpm. This is a development dependency.

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

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

### Define Basic Mermaid Setup

Source: https://github.com/slidevjs/slidev/blob/main/docs/custom/config-mermaid.md

Use this to set a basic theme for Mermaid diagrams. Ensure the file is placed at `./setup/mermaid.ts`.

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

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

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

### Build All Packages

Source: https://github.com/slidevjs/slidev/blob/main/CONTRIBUTING.md

Run this command from the project root to build all packages simultaneously.

```bash
pnpm build
```

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

### Install Playwright for Export

Source: https://github.com/slidevjs/slidev/blob/main/skills/slidev/SKILL.md

Install Playwright Chromium for PDF/PPTX/PNG export. This is a prerequisite for export functionality.

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

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

### Type Imports Example

Source: https://github.com/slidevjs/slidev/blob/main/skills/slidev/references/core-global-context.md

Example of importing types from @slidev/types.

```typescript
import type { TocItem } from '@slidev/types'
```

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

### Install CJK Fonts and Playwright Browsers on CI

Source: https://github.com/slidevjs/slidev/blob/main/docs/features/og-image.md

Install necessary CJK fonts and Playwright browsers on Ubuntu-based CI runners to ensure correct rendering of auto-generated Open Graph images. Install fonts before Playwright.

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

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

### Introduction Layout

Source: https://github.com/slidevjs/slidev/blob/main/skills/slidev/references/core-layouts.md

The 'intro' layout is designed for introductory slides.

```yaml
---
layout: intro
---
```

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

### Addons and Themes Configuration

Source: https://github.com/slidevjs/slidev/blob/main/skills/slidev/references/core-headmatter.md

Specify the presentation theme and list any additional addons to be included. Ensure addon packages are installed.

```yaml
---
theme: seriph
addons:
  - excalidraw
  - '@slidev/plugin-notes'
---

```

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

### useNav Composable Example

Source: https://github.com/slidevjs/slidev/blob/main/skills/slidev/references/core-global-context.md

Example of using the useNav composable to control navigation.

```typescript
const nav = useNav()
nav.next()
nav.go(5)
console.log(nav.currentPage)
```

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

### Conditional Rendering Examples

Source: https://github.com/slidevjs/slidev/blob/main/skills/slidev/references/core-global-context.md

Examples of conditional rendering based on global context variables.

```html
<!-- Show only in presenter mode -->
<div v-if="$nav.isPresenter">
  Presenter notes
</div>

<!-- Hide on cover slide -->
<footer v-if="$nav.currentLayout !== 'cover'">
  Page {{ $nav.currentPage }}
</footer>

<!-- Different content by context -->
<template v-if="$renderContext === 'slide'">
  Normal view
</template>
<template v-else-if="$renderContext === 'presenter'">
  Presenter view
</template>
```

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

### Comark Syntax Example

Source: https://github.com/slidevjs/slidev/blob/main/skills/slidev/SKILL.md

Enable Comark syntax by setting `comark: true` in the frontmatter. Apply inline styles like `style="color:red;"` to Comark elements.

```yaml
comark: true
---
{style="color:red"}
This is red text.
```

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

### useSlideContext Composable Example

Source: https://github.com/slidevjs/slidev/blob/main/skills/slidev/references/core-global-context.md

Example of using the useSlideContext composable to access slide-specific data.

```typescript
const { $page, $clicks, $frontmatter } = useSlideContext()
```

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

### useIsSlideActive Composable Example

Source: https://github.com/slidevjs/slidev/blob/main/skills/slidev/references/core-global-context.md

Example of using the useIsSlideActive composable to check slide activity.

```typescript
const isActive = useIsSlideActive()
// Returns ref<boolean>
```

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

### useDarkMode Composable Example

Source: https://github.com/slidevjs/slidev/blob/main/skills/slidev/references/core-global-context.md

Example of using the useDarkMode composable to manage dark mode.

```typescript
const { isDark, toggle } = useDarkMode()
```

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

### Initialize Slidev Project

Source: https://github.com/slidevjs/slidev/blob/main/demo/README.md

Run this command in your terminal to create a new Slidev project. This command sets up the basic structure and configuration for your presentation.

```bash
npm init slidev
```

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

### Create Slidev Project with deno

Source: https://github.com/slidevjs/slidev/blob/main/docs/guide/index.md

Use this command to create a new Slidev project if you are using deno.

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

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

### Build SPA (`slidev build [entry]`)

Source: https://github.com/slidevjs/slidev/blob/main/docs/builtin/cli.md

Builds a static, hostable Single Page Application (SPA) of your presentation.

```APIDOC
## `slidev build [entry]` {#build}

Build a hostable SPA.

### Parameters

#### Path Parameters

- **entry** (`string`, default: `slides.md`) - Path to the slides markdown file.

### Options

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

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

### Install Playwright for CLI Export

Source: https://github.com/slidevjs/slidev/blob/main/docs/guide/exporting.md

Install `playwright-chromium` as a dev dependency to enable CLI export functionality for PDF, PPTX, and PNG formats.

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

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

### Composable Function useDark Example

Source: https://github.com/slidevjs/slidev/blob/main/demo/composable-vue/slides.md

An example of a composable function `useDark` that utilizes other composables like `usePreferredDark` and `useLocalStorage` to manage dark mode.

```ts
export function useDark(options: UseDarkOptions = {}) {
  const preferredDark = usePreferredDark() // <--
  const store = useLocalStorage('vueuse-dark', 'auto') // <--

  return computed<boolean>({
    get() {
      return store.value === 'auto'
        ? preferredDark.value
        : store.value === 'dark'
    },
    set(v) {
      store.value = v === preferredDark.value
        ? 'auto'
        : v ? 'dark' : 'light'
    },
  })
}
```

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

### Example TypeScript Code

Source: https://github.com/slidevjs/slidev/blob/main/packages/create-theme/template/example.md

This TypeScript code defines an interface for a User and a function to update user information.

```typescript
interface User {
  id: number
  firstName: string
  lastName: string
  role: string
}

function updateUser(id: number, update: Partial<User>) {
  const user = getUser(id)
  const newUser = { ...user, ...update }
  saveUser(id, newUser)
}
```

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

### Set Default Theme and Appearance

Source: https://github.com/slidevjs/slidev/blob/main/skills/slidev/references/core-headmatter.md

Configure the presentation's theme, color scheme, favicon, and aspect ratio. Ensure the theme package is installed or provide a valid path.

```yaml
---
theme: default              # Theme package or path
colorSchema: auto           # 'auto' | 'light' | 'dark'
favicon: /favicon.ico       # Favicon URL
aspectRatio: 16/9           # Slide aspect ratio
canvasWidth: 980            # Canvas width in px
---

```

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

### YAML Content Block Example

Source: https://github.com/slidevjs/slidev/blob/main/test/fixtures/markdown/frontmatter.md

When frontmatter is already present, subsequent YAML blocks are treated as regular content, not frontmatter. This example shows such a case.

```yaml
# When there is already a frontmatter, the first yaml block should be treated as content
layout: should not from yaml 1
```

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

### AI Prompt for Slidev Presentation Creation

Source: https://github.com/slidevjs/slidev/blob/main/docs/guide/work-with-ai.md

Example prompt to ask an AI agent to create a Slidev presentation on a specific topic with code examples.

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

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

### Development Commands

Source: https://github.com/slidevjs/slidev/blob/main/packages/create-theme/template/README.md

Run these npm commands to develop and preview your Slidev theme. Use `npm run dev` for live preview.

```bash
npm install
```

```bash
npm run dev
```

```bash
npm run export
```

```bash
npm run screenshot
```

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

### Normalize Argument with ref() and Get Value with unref()

Source: https://github.com/slidevjs/slidev/blob/main/demo/composable-vue/slides.md

Use `ref()` to normalize an argument into a Ref and `unref()` to get its unwrapped value. `MaybeRef<T>` works well with both.

```typescript
type MaybeRef<T> = Ref<T> | T

function useBala<T>(arg: MaybeRef<T>) {
  const reference = ref(arg) // get the ref
  const value = unref(arg) // get the value
}
```

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

### Run Slidev with npm and pass options

Source: https://github.com/slidevjs/slidev/blob/main/docs/builtin/cli.md

When using npm, use `--` to pass options to Slidev commands. This example shows how to set the remote mode, port, and open the browser.

```bash
npm run slidev -- --remote --port 8080 --open
```

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

### Enable PDF Download in Headmatter

Source: https://github.com/slidevjs/slidev/blob/main/docs/features/build-with-pdf.md

Set 'download: true' in your frontmatter to include a PDF of your slides with the build. A download button will appear in the built output.

```markdown
---
download: true
---
```

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

### Create Slidev Project with npm

Source: https://github.com/slidevjs/slidev/blob/main/docs/guide/index.md

Use this command to create a new Slidev project with npm. Note that this method is not recommended due to slower performance and higher disk usage.

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

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

### TitleRenderer Usage

Source: https://github.com/slidevjs/slidev/blob/main/docs/builtin/components.md

Example of how to use the TitleRenderer component.

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

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

### SlidesTotal Usage

Source: https://github.com/slidevjs/slidev/blob/main/docs/builtin/components.md

Example of how to use the SlidesTotal component.

```markdown
<SlidesTotal />
```