### Create Slidev Project Locally

Source: https://sli.dev/guide

Create a new Slidev project locally using various package managers. Ensure Node.js version 18.0 or higher is installed. Follow the on-screen prompts to complete the setup.

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

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

### Install Slidev CLI Globally for Single File Usage

Source: https://sli.dev/guide

Install the Slidev CLI globally to enable single-file Markdown slide presentations. This method is not recommended for complex projects but is useful for quick setups.

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

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

### Run Slidev Single File Presentation

Source: https://sli.dev/guide

After globally installing the Slidev CLI, you can create and start a single-file presentation directly from a Markdown file.

```bash
slidev slides.md
```

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

### Navigation Controls Example (JavaScript)

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

Demonstrates common navigation actions using the `$nav` object, such as moving to the next step, next slide, or a specific slide number. It also shows how to access current page and layout information.

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

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

### v-click Element Transition Classes

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

Provides examples of HTML structure and CSS for element transitions applied by the v-click directive, including default and custom styles.

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

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

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

### Markdown with Local Image

Source: https://sli.dev/features/bundle-remote-assets

Example of referencing a local image stored in the 'public' folder. Ensure the path starts with a '/'.

```markdown
![Local Image](/pic.png)
```

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

### v-click Directive Examples

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

Demonstrates various ways to use the v-click directive for controlling element visibility based on click counts, including absolute, relative, and mixed positioning.

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

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

### Install Slidev Theme via npm

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

Manually install a Slidev theme using npm. This command downloads the theme package, making it available for use in your project.

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

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

### Customize Slidev Dev Server Command in VS Code

Source: https://sli.dev/features/vscode-extension

This configuration allows customization of the command used to start the Slidev dev server. It supports placeholders like `${args}` for CLI arguments and `${port}` for the port number. Examples are provided for global installations, PNPM users, and code-server users.

```shell
npm exec -c 'slidev ${args}'
```

```shell
slidev ${args}
```

```shell
pnpm slidev ${args}
```

```shell
pnpm slidev ${args} --base /proxy/${port}/
```

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

### Define Custom Shortcuts in TypeScript

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

This snippet demonstrates how to define custom keyboard shortcuts for a Slidev presentation. It imports necessary types from '@slidev/types' and uses `defineShortcutsSetup` to create a setup function. This function takes navigation operations and base shortcuts as arguments and returns an array of shortcut objects, each with a `key` and an `fn` (function to execute). The example binds 'enter' to `nav.next()` and 'backspace' to `nav.prev()`, with `autoRepeat` 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,
    },
  ]
})
```

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

### Displaying Current Page Number (Markdown)

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

Shows a simple Markdown example of displaying the current page number using the `$page` global context variable and comparing it with the current navigation page.

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

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

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

### Install Custom Icon Collection (npm, yarn, pnpm, bun)

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

Shows how to install the `@iconify-json/uil` package using various package managers, which is necessary for using custom icons like `i-uil:github`.

```markdown
::code-group

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

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

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

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

::
```

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

### Accessing Project Configurations (Markdown)

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

Illustrates how to access project-wide configurations, like the slide title, directly within Markdown slides using the `$slidev.configs` object.

```markdown
---
title: My First Slidev!
---

# Page 1

---

# Any Page

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

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

### Basic Monaco Editor Setup

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

This snippet shows the basic setup for configuring the Monaco editor in Slidev by creating a `./setup/monaco.ts` file. It uses the `defineMonacoSetup` function from `@slidev/types` to allow for custom editor configurations.

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

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

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

### Slidev Package.json Scripts

Source: https://sli.dev/guide

Common Slidev commands can be added to your package.json scripts for easy execution. This configuration allows running development server, build, and export commands.

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

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

### Enable Slide Transitions (Markdown)

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

Configure slide transitions globally by setting the `transition` frontmatter option in your Slidev presentation's headmatter. This example sets a 'slide-left' transition for all slides.

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

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

### Programmatic Global Context Access with Composables (Vue)

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

Illustrates how to import and use Slidev's client-side composables in a Vue component for programmatic and type-safe access to global context. It includes examples for navigation, dark mode, and slide activity.

```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(() => { /* ... */ })
onSlideLeave(() => { /* ... */ })
// ...
</script>
```

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

### Accessing Theme Configurations (Markdown)

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

Shows how to define and access theme-specific configurations within Markdown slides using `$slidev.themeConfigs`. This allows for dynamic styling based on theme settings.

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

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

### Conditional Rendering Based on Clicks (HTML/Vue)

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

Provides an example of using the `$clicks` global context variable to conditionally render content within a slide. This is useful for revealing information incrementally.

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

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

### Advanced Transition Configuration (Markdown)

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

Pass options directly to Vue's `<TransitionGroup>` component for advanced transition control. This example configures a custom transition named 'my-transition' with specific enter-from and enter-active CSS classes.

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

```

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

### Install Prettier Plugin for Slidev (deno)

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

Installs the prettier and prettier-plugin-slidev npm packages using deno. This command allows Deno users to leverage npm packages for development.

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

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

### CSS Grid Layouts for Slidev Slides

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

Provides examples of using CSS Grid for creating complex layouts within Slidev slides. It shows how to define two-column layouts and more intricate grids with specific column sizing using utility classes.

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

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

### Using Slidev Layouts via Frontmatter

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

Demonstrates how to specify a layout for a slide using frontmatter in a Markdown file. This is the primary method for applying custom or theme-provided layouts to individual slides.

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

A quote from someone
```

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

### Install Prettier Plugin for Slidev (bun)

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

Installs the prettier and prettier-plugin-slidev packages as development dependencies using bun. Bun is a fast JavaScript runtime and package manager.

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

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

### Custom CSS for Scaling Transitions

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

Demonstrates how to override default styles in a custom stylesheet (e.g., `styles.css`) to achieve scaling up transitions for v-click elements.

```css
/* styles.css */

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

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

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

### Frontmatter Configuration in Markdown

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

Illustrates the use of YAML frontmatter at the beginning of Slidev Markdown files for configuring slides and the entire presentation. Supports headmatter for global settings and individual slide frontmatters.

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

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

### Code Highlighting with TypeScript

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

Demonstrates how to use Markdown code blocks with TypeScript syntax highlighting in Slidev. Slidev uses Shiki for syntax highlighting, allowing for visually appealing code presentation.

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

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

### Install Playwright for CLI Export

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

To enable PDF, PPTX, or PNG exports via the CLI, you need to install `playwright-chromium`. This dependency is crucial for rendering slides. The installation command varies slightly depending on your package manager.

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

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

### slidev dev

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

Starts a local development server for your Slidev presentation. It watches for changes in your slides markdown file and automatically reloads the server.

```APIDOC
## slidev dev [entry]

### Description
Start a local server for Slidev.

### Method
CLI Command

### Endpoint
N/A (CLI Command)

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

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```bash
slidev dev
slidev dev slides.md
```

### Response
#### Success Response
- The CLI will start a local server and provide a URL to access your presentation.

#### Response Example
```
Slidev dev server running at:
Local:   http://localhost:3030/
Network: http://[your-ip]:3030/

Press h to show help, or q to quit.
```

### 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 web browser.
* `--remote [password]` (`string`): Enable remote control by listening on the public host. If a password is provided, presenter mode will be private and require the password in the URL query.
* `--bind` (`string`, default: `0.0.0.0`): Specify the IP addresses the server should listen on when in remote mode.
* `--log` (`'error' | 'warn' | 'info' | 'silent'`, default: `'warn'`): Set the log level for the server.
* `--force`, `-f` (`boolean`, default: `false`): Force the optimizer to ignore the cache and re-bundle assets.
* `--theme`, `-t` (`string`): Override the default theme for the presentation.
```

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

### Install Icon Sets for Slidev

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

Install the necessary icon set packages as dependencies to use icons in your Slidev presentations. The package name follows the pattern `@iconify-json/[collection-name]`. This is required for Slidev to access the icon data.

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

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

### Install Prettier Plugin for Slidev (npm)

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

Installs the prettier and prettier-plugin-slidev packages as development dependencies using npm. This is the first step to enable code formatting for Slidev slides.

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

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

### Synchronizing Code Blocks with v-click

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

Shows how to synchronize the highlighting of multiple code blocks using the v-click directive with specific line highlighting.

```javascript
1 + 1
'a' + 'b'
```

```javascript
= 2
= 'ab'
```

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

### v-motion with Click-Triggered Animations

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

Demonstrates using v-motion with click-specific animation variants (:click-1, :click-2, etc.) to control motion based on the number of clicks.

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

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

### Conditional Rendering Based on Render Context (Markdown)

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

Demonstrates how to use the `$renderContext` global variable to conditionally render content based on the current view, such as main slides, presenter mode, or overview.

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

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

### Configure Addons in Slidev Headmatter

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

Specify the 'addons' option in your Markdown file's headmatter to include multiple addons in your Slidev presentation. This allows for extended functionality.

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

```

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

### Scoped CSS Transitions for Specific Slides/Layouts

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

Shows how to apply custom transition styles to specific slides or layouts using SCSS selectors targeting `.slidev-page-X` or custom layout classes.

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

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

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

### Define Custom Preparser Setup in TypeScript

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

Sets up a custom preparser extension for Slidev. This function is called during the presentation build process and can modify raw lines of Markdown content. It requires the '@slidev/types' package for type definitions.

```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'
        }
      },
    }
  ]
})
```

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

### Run Slidev Development Server

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

Starts a local development server for Slidev presentations. It takes an optional entry point (defaulting to 'slides.md') and supports various options for port, base URL, opening in browser, remote control, logging, and theme overrides.

```bash
slidev [entry]
slidev --port 8080
slidev --port=8080
slidev --open
slidev --open true
slidev --remote
slidev --remote=mypassword
slidev --bind 0.0.0.0
slidev --log warn
slidev --force
slidev --theme my-theme
```

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

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

### Previewing Slidev Addons with slides.md

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

This markdown snippet demonstrates how to preview a local Slidev addon by specifying its path in the `addons` configuration within `slides.md`. This allows for local development and testing of addon functionalities before publishing.

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

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

### v-motion Directive for Element Animations

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

An example of applying the v-motion directive to an HTML element to animate its position on the x-axis during enter and leave transitions.

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

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

### Run Slidev with Prebuilt Docker Image

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

This command runs a pre-built Slidev Docker image. It mounts the current directory to the container, exposes port 3030, and sets an NPM mirror for faster installations. If the directory is empty, it generates a template.

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

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

### Configure KaTeX Setup with TypeScript

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

Defines custom KaTeX rendering options for Slidev presentations. It imports `defineKatexSetup` from '@slidev/types' and exports a function that returns an object with KaTeX configuration options like `maxExpand`. Refer to KaTeX's documentation for a full list of options.

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

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

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

### Build and Run Custom Slidev Docker Image

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

This Dockerfile defines how to build a custom Docker image for Slidev presentations. It starts from a base Slidev image and copies the presentation files into the container. Commands are provided to build the image and run it.

```dockerfile
FROM tangramor/slidev:latest

ADD . /slidev
```

```bash
docker build -t myslides .

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

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

### Build Slidev Presentation as SPA

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

Builds a hostable Single Page Application (SPA) from Slidev presentations. It accepts an entry point and options for output directory, base URL, PDF download, theme overrides, and excluding speaker notes.

```bash
slidev build [entry]
slidev build --out dist
slidev build --base /app/
slidev build --download
slidev build --theme custom-theme
slidev build --without-notes
```

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

### Absolute Positioning with UnoCSS - Slidev

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

Demonstrates how to use UnoCSS utility classes to position elements absolutely within Slidev slides. This example shows how to align an element to the bottom-left corner of its container.

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

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

### Importing Types for Programmatic Use (Vue)

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

Demonstrates how to import specific types, such as `TocItem`, from `@slidev/types` within a Vue component's script setup for better type safety in programmatic logic.

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

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

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

### Add Custom Icon to Code Block Title (npm)

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

Example of how to add a custom icon to a code block title using the `~icon~` syntax. This requires installing the icon collection and configuring it in `uno.config.ts`.

```markdown
```js [npm ~i-uil:github~]
console.log('Hello, GitHub!')
```
```

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

### CSS Flexbox Layouts for Slidev Slides

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

Illustrates how to use CSS Flexbox for responsive layouts in Slidev. Examples include creating horizontally aligned items and vertically centering content within a flex container.

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

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

### Configure Shiki Custom Themes and Languages

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

Configures Shiki with custom themes and languages by importing them into the setup file. This allows for extended syntax highlighting capabilities beyond the built-in options. It requires importing TextMate grammar and theme JSON files.

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

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

### Access Global Context in Vue Components

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

Shows how to access Slidev's global context properties and use navigation controls within a Vue component. It includes examples for accessing slide title and triggering navigation.

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

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

### Configure Netlify for Slidev Hosting

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

Configuration file for Netlify to build and host Slidev presentations. It specifies the build command, publish directory, Node.js version, and sets up redirects for SPA routing.

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

[build.environment]
NODE_VERSION = '20'

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

```

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

### Import Slides from External Files (Markdown)

Source: https://sli.dev/features/importing-slides

Demonstrates how to split a `slides.md` file into multiple reusable files by using the `src` frontmatter option to specify the path to external markdown files. This allows for better organization and reusability of slide content.

```markdown
---
src: ./pages/toc.md // [!code highlight]
---

<!-- this page will be loaded from './pages/toc.md' -->

Contents here are ignored

---

# Page 4

Another normal page

---
src: ./pages/toc.md   # Reuse the same file // [!code highlight]
---

```

```markdown
# Table of Contents

Part 1

---

# Table of Contents

Part 2
```

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

### Enable Remote Access with Tunneling

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

Enables remote access for Slidev presentations with tunneling using the `--remote --tunnel` flags. This exposes your local server to the internet via Cloudflare Quick Tunnels, allowing external sharing without server setup. Examples are provided for pnpm, npm, yarn, bun, and deno.

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

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

### Explicitly Ordering Named Slots with Slot Sugar (Markdown)

Source: https://sli.dev/features/slot-sugar

Shows how to use the 'slot sugar' syntax (`::slotName::`) to explicitly define and order named slots within a Slidev layout. This example demonstrates controlling the placement of 'right' and 'default' slots.

```markdown
---
layout: two-cols
---

::right::

# Right

This shows on the right

::default::

# Left

This is shown on the left
```

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

### Using View Transition API (Markdown)

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

Enable View Transitions API with MDC syntax support. This allows naming view transitions using CSS classes, facilitating animated DOM state changes between slides. Requires `mdc: true` in frontmatter.

```markdown
---
transition: view-transition
mdc: true
---

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

---

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

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

### Install Prettier Plugin for Slidev (pnpm)

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

Installs the prettier and prettier-plugin-slidev packages as development dependencies using pnpm. This command is an alternative to npm for package management.

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

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

### slidev build

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

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

```APIDOC
## slidev build [entry]

### Description
Build a hostable SPA for your Slidev presentation.

### Method
CLI Command

### Endpoint
N/A (CLI Command)

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

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```bash
slidev build
slidev build slides.md
```

### Response
#### Success Response
- The command will output the built SPA files into the specified output directory (default: `dist`).

### Options
* `--out`, `-o` (`string`, default: `dist`): The directory where the built SPA will be outputted.
* `--base` (`string`, default: `/`): The base URL for the application.
* `--download` (`boolean`, default: `false`): Enable an option within the SPA to download the slides as a PDF.
* `--theme`, `-t` (`string`): Override the default theme for the presentation.
* `--without-notes` (`boolean`, default: `false`): Exclude speaker notes from the generated SPA.
```

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

### Install Prettier Plugin for Slidev (yarn)

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

Installs the prettier and prettier-plugin-slidev packages as development dependencies using yarn. This command is another common method for managing project dependencies.

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

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

### Build Slidev Presentation to SPA

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

Builds Slidev presentations into a static Single-Page Application (SPA). The output is typically placed in the 'dist' folder. This command can accept multiple markdown files or glob patterns for batch builds.

```bash
$ slidev build
$ slidev build --base /talks/my-cool-talk/
$ slidev build --out my-build-folder
$ slidev build --without-notes
$ slidev build slides1.md slides2.md
$ slidev build *.md
```

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

### Import Specific Slides by Hash (Markdown)

Source: https://sli.dev/features/importing-slides

Explains how to import specific slides from another Markdown file by appending a hash to the `src` path. This allows for granular reuse of slides, importing a range or specific slide numbers.

```markdown
---
src: ./another-presentation.md#2,5-7
---
```

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

### HTML Image Tag with Styling

Source: https://sli.dev/features/bundle-remote-assets

Demonstrates how to use an HTML `<img>` tag for local images, allowing for custom classes and styles.

```html
<img src="/pic.png" class="m-40 h-40 rounded shadow" />
```

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

### Install Noto Emoji Font on Linux

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

Troubleshoot broken emojis in exported PDFs or PNGs on Linux environments by installing the Noto Emoji font. This involves downloading the font, moving it to the system font directory, and updating 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
```

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

### Configure Forward and Backward Transitions (Markdown)

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

Specify distinct transitions for forward and backward slide navigation using a '|' separator in the `transition` frontmatter option. '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
---
```

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

### Deploy Slidev to GitHub Pages using GitHub Actions

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

A GitHub Actions workflow to automatically build and deploy Slidev presentations to GitHub Pages. It checks out the code, sets up Node.js, installs dependencies, builds the project with a base path, and uploads the 'dist' folder as a GitHub Pages artifact for deployment.

```yaml
name: Deploy pages

on:
  workflow_dispatch:
  push:
    branches: [main]

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@v4

      - uses: actions/setup-node@v4
        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@v4

      - uses: actions/upload-pages-artifact@v3
        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@v4

```

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

### Markdown with Remote Image

Source: https://sli.dev/features/bundle-remote-assets

Example of using a remote image URL directly in markdown. The plugin will cache this image.

```markdown
![Remote Image](https://sli.dev/favicon.png)
```

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

### Youtube Component

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

Embeds a YouTube video using its ID. Allows specifying dimensions and starting the video at a particular time.

```APIDOC
## Youtube Component

### Description
Embeds a YouTube video into the slide using its unique ID.

### Usage
```md
<Youtube id="luoMHjh-XcQ" />
```

### Props
* `id` (`string`, required): The unique identifier of the YouTube video.
* `width` (`number`): The width of the embedded video player.
* `height` (`number`): The height of the embedded video player.

**Note:** You can specify a start time by appending `?start=SECONDS` to the video `id` (e.g., `id="dQw4w9WgXcQ?start=120"` to start at 2 minutes).
```

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

### Configure Background Image (YAML)

Source: https://sli.dev/resources/covers

This YAML snippet demonstrates how to configure a background image for a slide in Slidev. It uses a URL to fetch a random image from the curated collection hosted at cover.sli.dev. No external dependencies are required beyond the Slidev environment.

```yaml
---
# random image from the curated collection
background: https://cover.sli.dev
---
```

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

### Default CSS for v-click Transitions

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

Presents the default CSS styles applied to elements with the `slidev-vclick-target` and `slidev-vclick-hidden` classes for opacity transitions.

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

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

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

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

### HTML Styling with UnoCSS Classes

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

Example of using UnoCSS classes for styling HTML content. This demonstrates the grid layout and column configuration.

```html
<div class="grid pt-4 gap-4 grid-cols-[100px,1fr]">

### Name

- Item 1
- Item 2

</div>
```

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

### Configure Mermaid Default Theme

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

Sets up the default Mermaid theme for diagrams in a Slidev presentation. This involves creating a `mermaid.ts` file and exporting a setup function that returns the desired theme configuration. No external dependencies are required beyond the Slidev types.

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

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

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

### Configure Slide Deck Options (YAML)

Source: https://sli.dev/custom

Configure the entire slides project in the frontmatter of the first slide (headmatter). This includes settings for theme, addons, title, author, export options, and more. These configurations apply globally to the presentation.

```yaml
---
theme: default
addons: []
title: Slidev
titleTemplate: '%s - Slidev'
info: false
author: Your Name Here
keywords: keyword1,keyword2
presenter: true
browserExporter: dev
download: false
exportFilename: slidev-exported
export:
  format: pdf
  timeout: 30000
  dark: false
  withClicks: false
  withToc: false
twoslash: true
lineNumbers: false
monaco: true
monacoTypesSource: local
monacoTypesAdditionalPackages: []
monacoRunAdditionalDeps: []
remoteAssets: false
selectable: true
record: dev
contextMenu: true
wakeLock: true
overviewSnapshots: false
colorSchema: auto
routerMode: history
aspectRatio: 16/9
canvasWidth: 980
themeConfig:
  primary: '#5d8392'
favicon: 'https://cdn.jsdelivr.net/gh/slidevjs/slidev/assets/favicon.png'
plantUmlServer: https://www.plantuml.com/plantuml
fonts:
  sans: Roboto
  serif: Roboto Slab
  mono: Fira Code
defaults:
  layout: default
drawings:
  enabled: true
  persist: false
  presenterOnly: true
  syncAll: true
htmlAttrs:
  dir: ltr
  lang: en
seoMeta:
  ogTitle: Slidev Starter Template
  ogDescription: Presentation slides for developers
  ogImage: https://cover.sli.dev
  ogUrl: https://example.com
  twitterCard: summary_large_image
  twitterTitle: Slidev Starter Template
  twitterDescription: Presentation slides for developers
  twitterImage: https://cover.sli.dev
  twitterSite: username
  twitterUrl: https://example.com
---
```