### Define App Setup for Slidev
Source: https://cn.sli.dev/custom/config-vue
Use `defineAppSetup` to extend the Vue app with plugins or perform initializations before the app starts. This code runs in the browser.
```typescript
import {
defineAppSetup
} from '@slidev/types'
export default
defineAppSetup
(({
app
,
router
}) => {
// Vue App
app
.
use
(
YourPlugin
)
})
```
--------------------------------
### Run Slidev with npm
Source: https://cn.sli.dev/builtin/cli
When using npm, use '--' to pass arguments to Slidev. This example starts a remote server on port 8080 and opens it in the browser.
```bash
npm run slidev -- --remote --port 8080 --open
```
--------------------------------
### Start Slidev Local Server
Source: https://cn.sli.dev/builtin/cli
Starts a local development server for Slidev presentations. The entry point defaults to 'slides.md'.
```bash
slidev [entry]
```
--------------------------------
### Install Icon Collections (bun)
Source: https://cn.sli.dev/features/code-groups
Install the desired Iconify icon collection using bun.
```shell
bun add @iconify-json/uil
```
--------------------------------
### Configure Monaco Editor Options in Setup
Source: https://cn.sli.dev/custom/config-monaco
Return editor options directly from the `defineMonacoSetup` function to apply them to all Monaco instances. This example enables word wrap.
```typescript
import {
defineMonacoSetup
} from '@slidev/types'
export default
defineMonacoSetup
(() => {
return {
editorOptions: {
wordWrap: 'on'
}
}
})
```
--------------------------------
### Install Icon Collections (bun)
Source: https://cn.sli.dev/features/icons.html
Install a specific icon collection using bun. Replace `[the-collection-you-want]` with the desired collection name, e.g., `mdi`.
```bash
bun add @iconify-json/[the-collection-you-want]
```
--------------------------------
### Install Icon Collections (deno)
Source: https://cn.sli.dev/features/icons.html
Install a specific icon collection using deno. Replace `[the-collection-you-want]` with the desired collection name, e.g., `mdi`.
```bash
deno add jsr:@iconify-json/[the-collection-you-want]
```
--------------------------------
### Install Icon Collections (yarn)
Source: https://cn.sli.dev/features/code-groups
Install the desired Iconify icon collection using yarn.
```shell
yarn add @iconify-json/uil
```
--------------------------------
### Define Custom Pre-parser Setup
Source: https://cn.sli.dev/custom/config-parser
Use `definePreparserSetup` to create a custom pre-parser. The setup function receives file path, frontmatter, and mode, allowing conditional transformations. It must return a list of pre-parser 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 Icon Collections (pnpm)
Source: https://cn.sli.dev/features/code-groups
Install the desired Iconify icon collection using pnpm.
```shell
pnpm add @iconify-json/uil
```
--------------------------------
### Install Icon Collections (npm)
Source: https://cn.sli.dev/features/icons.html
Install a specific icon collection using npm. Replace `[the-collection-you-want]` with the desired collection name, e.g., `mdi`.
```bash
npm install @iconify-json/[the-collection-you-want]
```
--------------------------------
### Install Icon Collections (npm)
Source: https://cn.sli.dev/features/code-groups
Install the desired Iconify icon collection using npm.
```shell
npm add @iconify-json/uil
```
--------------------------------
### AI Prompt Examples for Slidev
Source: https://cn.sli.dev/guide/work-with-ai
These prompts demonstrate how to ask an AI coding agent to assist with various Slidev presentation tasks, from content creation to configuration. Use these as a starting point for generating presentations, adding specific slide layouts, or configuring export settings.
```markdown
Create a Slidev presentation about TypeScript generics with code examples
```
```markdown
Add a two-column slide with code on the left and explanation on the right
```
```markdown
Set up click animations to reveal bullet points one by one
```
```markdown
Configure the presentation for PDF export with speaker notes
```
--------------------------------
### Install Icon Collections (pnpm)
Source: https://cn.sli.dev/features/icons.html
Install a specific icon collection using pnpm. Replace `[the-collection-you-want]` with the desired collection name, e.g., `mdi`.
```bash
pnpm add @iconify-json/[the-collection-you-want]
```
--------------------------------
### Install Icon Collections (yarn)
Source: https://cn.sli.dev/features/icons.html
Install a specific icon collection using yarn. Replace `[the-collection-you-want]` with the desired collection name, e.g., `mdi`.
```bash
yarn add @iconify-json/[the-collection-you-want]
```
--------------------------------
### Setup Monaco Editor - Slidev
Source: https://cn.sli.dev/custom/config-monaco
This is the basic setup for configuring the Monaco editor in Slidev. It uses `defineMonacoSetup` to allow for custom configurations.
```typescript
import {
defineMonacoSetup
} from '@slidev/types'
export default
defineMonacoSetup
(async (monaco) => {
// Use `monaco` to configure
})
```
--------------------------------
### Install Slidev CLI Globally with pnpm
Source: https://cn.sli.dev/guide/index
Install the Slidev CLI globally using pnpm. This allows you to use the `slidev` command directly after installation.
```bash
pnpm i -g @slidev/cli
```
--------------------------------
### Install Slidev CLI Globally with bun
Source: https://cn.sli.dev/guide/index
Install the Slidev CLI globally using bun. This allows you to run `slidev` commands directly for single-file presentations.
```bash
bun i -g @slidev/cli
```
--------------------------------
### Fix Emoji Display Issues
Source: https://cn.sli.dev/guide/exporting
If emojis are missing in exports, ensure you have the necessary fonts like Noto Emoji installed. This example shows how to download and install it on a Linux environment.
```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
```
--------------------------------
### Serve Presentations with `slidev`
Source: https://cn.sli.dev/builtin/cli
Starts a local development server for your Slidev presentations. You can specify the entry markdown file and various server options.
```APIDOC
## `slidev [entry]`
Starts Slidev's local server.
* `[entry]` (`string`, default: `slides.md`): Path to the markdown file containing your slides.
Options:
* `--port`, `-p` (`number`, default: `3030`): Port number to use.
* `--base` (`string`, default: `/`): Base URL for the application.
* `--open`, `-o` (`boolean`, default: `false`): Automatically open the presentation in a browser.
* `--remote [password]` (`string`): Enable remote control by listening on a public host. If a password is provided, presenter mode becomes private and accessible only with the password in the URL query parameter.
* `--bind` (`string`, default: `0.0.0.0`): The IP address the server should listen on when in remote mode.
* `--log` (`'error' | 'warn' | 'info' | 'silent'`, default: `'warn'`): Logging level for the server.
* `--force`, `-f` (`boolean`, default: `false`): Force the optimizer to ignore the cache and rebuild.
* `--theme`, `-t` (`string`): Override the default theme.
```
--------------------------------
### Install Slidev CLI Globally with deno
Source: https://cn.sli.dev/guide/index
Install the Slidev CLI globally using deno, leveraging npm for package management. This enables the `slidev` command for single-file presentations.
```bash
deno i -g npm:@slidev/cli
```
--------------------------------
### Install Prettier Plugin for Slidev
Source: https://cn.sli.dev/features/prettier-plugin.html
Install the prettier-plugin-slidev package as a development dependency using your preferred package manager.
```bash
npm i -D prettier prettier-plugin-slidev
```
```bash
pnpm i -D prettier prettier-plugin-slidev
```
```bash
yarn add -D prettier prettier-plugin-slidev
```
```bash
bun add -D prettier prettier-plugin-slidev
```
```bash
deno add -D npm:prettier npm:prettier-plugin-slidev
```
--------------------------------
### Install Theme with npm
Source: https://cn.sli.dev/guide/theme-addon
Manually install a Slidev theme using npm if you prefer not to use the automatic prompt. This ensures the theme is available in your project.
```bash
$ npm install @slidev/theme-seriph
```
--------------------------------
### Install Slidev CLI Globally with npm
Source: https://cn.sli.dev/guide/index
Install the Slidev CLI globally using npm. This enables direct use of the `slidev` command for single-file presentations.
```bash
npm i -g @slidev/cli
```
--------------------------------
### Install Slidev CLI Globally with yarn
Source: https://cn.sli.dev/guide/index
Globally install the Slidev CLI using yarn. This makes the `slidev` command available system-wide for single-file presentations.
```bash
yarn global add @slidev/cli
```
--------------------------------
### Create Slidev Project with bun
Source: https://cn.sli.dev/guide/index
This command creates a new Slidev project using the bun runtime. Ensure bun is installed globally.
```bash
bun create slidev
```
--------------------------------
### Install playwright-chromium
Source: https://cn.sli.dev/guide/exporting
Install `playwright-chromium` as a development dependency to enable PDF, PPTX, and PNG exports. This is required for the CLI export functionality.
```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
```
--------------------------------
### Merged Frontmatter Example
Source: https://cn.sli.dev/features/frontmatter-merging
Illustrates the final merged frontmatter, showing how the main entry's background takes precedence.
```markdown
---
layout: cover
background: https://sli.dev/bar.png // [!code highlight]
class: text-center
---
# 封面
封面页
```
--------------------------------
### Define Basic Mermaid Setup
Source: https://cn.sli.dev/custom/config-mermaid
Use this to set a basic theme for Mermaid diagrams. Ensure browser compatibility for imported packages.
```typescript
import {
defineMermaidSetup
} from '@slidev/types'
export default
defineMermaidSetup
(() => {
return {
theme
: 'forest',
}
})
```
--------------------------------
### Run Slidev Presentation from Single File
Source: https://cn.sli.dev/guide/index
After globally installing the Slidev CLI, use this command to create and launch a presentation directly from a Markdown file.
```bash
slidev slides.md
```
--------------------------------
### Custom Navigation Controls Example
Source: https://cn.sli.dev/features/global-layers
Add custom navigation buttons, like a 'Next' button, to the navigation controls area. This example uses the `$nav.next` method to advance to the next slide.
```html
```
--------------------------------
### Create Slidev Project with pnpm
Source: https://cn.sli.dev/guide/index
Use this command to create a new Slidev project if you have pnpm installed. Ensure Node.js version is 22.0 or higher.
```bash
# If you don't have pnpm installed yet
npm i -g pnpm
pnpm create slidev
```
--------------------------------
### Customize Slidev Development Server Command
Source: https://cn.sli.dev/features/vscode-extension
Set the `slidev.dev-command` configuration to customize the command used to start the development server. Placeholders like `${args}` and `${port}` can be used.
```string
npm exec -c 'slidev ${args}'
```
```string
slidev ${args}
```
```string
pnpm slidev ${args}
```
```string
pnpm slidev ${args} --base /proxy/${port}/
```
--------------------------------
### VAfter, VClick, and VClicks
Source: https://cn.sli.dev/builtin/components
These components are related to animations and are detailed in the Animations guide.
```APIDOC
## VAfter, VClick, and VClicks
📖 Animations
📖 Animations
Guide
Click to read the guide
```
--------------------------------
### Configure Theme in Frontmatter
Source: https://cn.sli.dev/guide/theme-addon
Set the 'theme' option in the frontmatter to specify which theme to use for your presentation. Slidev will prompt to install it if not found.
```markdown
---
theme: seriph
---
# The first slide
```
--------------------------------
### Add Slidev Skills to AI Agent
Source: https://cn.sli.dev/guide/work-with-ai
Install the official Slidev skills for your AI coding agent to enable it to understand Slidev syntax, features, and best practices. This command-line installation is the first step in integrating AI assistance into your Slidev workflow.
```bash
npx skills add slidevjs/slidev
```
--------------------------------
### Define Custom Code Runners Setup
Source: https://cn.sli.dev/custom/config-code-runners
Use this setup to define custom code runners for various languages. The `python` runner executes code remotely, while the `html` runner sanitizes HTML input. Ensure browser compatibility for imported packages.
```typescript
import {
defineCodeRunnersSetup
} from '@slidev/types'
export default
defineCodeRunnersSetup
(() => {
return {
async
python
(
code
,
ctx
) {
// 以某种方式执行代码并返回结果
const
result
= await
executePythonCodeRemotely
(
code
)
return {
text
:
result
}
},
html
(
code
,
ctx
) {
return {
html
:
sanitizeHtml
(
code
)
}
},
// 或其他语言，key 是语言 id
}
})
```
--------------------------------
### Highlight Specific Lines with Placeholder
Source: https://cn.sli.dev/features/code-block-line-numbers.html
Demonstrates using a placeholder '*' to highlight all lines in a code block when line numbers are enabled and a custom start line is set.
```typescript
// ...
```
--------------------------------
### Define KaTeX Setup in Node.js
Source: https://cn.sli.dev/custom/config-katex
Use this snippet to define custom KaTeX options for your Slidev presentation. Ensure this code runs in a Node.js environment. Refer to KaTeX documentation for a full list of available options.
```typescript
import {
defineKatexSetup
} from '@slidev/types'
export default
defineKatexSetup
(() => {
return {
maxExpand
: 2000,
/* ... */
}
})
```
--------------------------------
### Configure Monaco Editor Options
Source: https://cn.sli.dev/custom/config-monaco
Customize the Monaco editor's behavior by providing an `editorOptions` object that matches the Monaco IEditorOptions definition. This example enables word wrap.
```typescript
console.log('HelloWorld')
```
--------------------------------
### Specify Executable Path
Source: https://cn.sli.dev/guide/exporting
Provide a custom path to the browser executable if Playwright needs to use a specific Chrome or Edge installation, for example, to ensure necessary codecs are available.
```bash
$ slidev export --executable-path [path_to_chromium]
```
--------------------------------
### Create Slidev Project with npm
Source: https://cn.sli.dev/guide/index
This command initializes a new Slidev project using npm. It's less recommended due to slower speeds and higher disk usage compared to pnpm.
```bash
# Not recommended -
# NPM downloads packages every time it creates a new project,
# which is slower and takes up a lot of space
npm init slidev@latest
```
--------------------------------
### Monaco Editor with Vue and VueUse Types
Source: https://cn.sli.dev/custom/config-monaco
Example demonstrating how Slidev automatically handles TypeScript types for libraries like Vue and VueUse when used in Monaco code blocks. Ensure these are installed as dependencies.
```typescript
import { ref } from 'vue'
import { useMouse } from '@vueuse/core'
const counter = ref(0)
```
--------------------------------
### Create Slidev Project with deno
Source: https://cn.sli.dev/guide/index
Initialize a new Slidev project using deno's package management capabilities. This command uses npm for package resolution.
```bash
deno init --npm slidev
```
--------------------------------
### Preview Theme Locally
Source: https://cn.sli.dev/guide/write-theme
Create a `slides.md` file with specific frontmatter to preview your theme during development. This allows you to see your theme in action before publishing.
```markdown
---
theme: ./ # 使用当前目录中的主题
---
```
--------------------------------
### Create Slidev Presentation
Source: https://cn.sli.dev/
Use the Slidev CLI to create a new presentation. This command initializes a new Slidev project in the current directory.
```bash
npm init slidev
```
--------------------------------
### Previewing a Local Addon
Source: https://cn.sli.dev/guide/write-addon
Configure your `slides.md` to preview a local addon by specifying its path in the `addons` array.
```markdown
---
addons:
- ./
---
```
--------------------------------
### Build Static Presentations with `slidev build`
Source: https://cn.sli.dev/builtin/cli
Builds a static, hostable Single Page Application (SPA) of your presentation.
```APIDOC
## `slidev build [entry]`
Builds a hostable SPA.
* `[entry]` (`string`, default: `slides.md`): Path to the markdown file containing your slides.
Options:
* `--out`, `-o` (`string`, default: `dist`): Output directory for the build.
* `--base` (`string`, default: `/`): Base URL for the application.
* `--download` (`boolean`, default: `false`): Enable downloading the presentation as a PDF within the SPA.
* `--theme`, `-t` (`string`): Override the default theme.
* `--without-notes` (`boolean`, default: `false`): Exclude speaker notes from the built SPA.
```
--------------------------------
### Enable Line Numbers and Set Start Line
Source: https://cn.sli.dev/features/code-block-line-numbers.html
Enable line numbers for a specific code block and set its starting line number to 5. Lines 6 and 7 are also explicitly highlighted.
```typescript
function add(
a: Ref | number,
b: Ref | number
) {
return computed(() => unref(a) + unref(b))
}
```
--------------------------------
### Use Inline and Block MDC Components
Source: https://cn.sli.dev/features/mdc.html
Demonstrates inline styling and custom components within Markdown. Use `[text]{style="..."}` for inline styling and `:component{prop="value"}` for inline components. Block components are defined using `::component{prop="value"}`.
```markdown
这是一段 [红色文本]{style="color:red"} :inline-component{prop="value"}
{width=500px lazy}
::block-component{prop="value"}
**默认** 插槽
::
```
--------------------------------
### Create a New Slidev Theme
Source: https://cn.sli.dev/guide/write-theme
Use your preferred package manager to scaffold a new Slidev theme project. This command initializes the necessary files and structure for theme development.
```bash
pnpm create slidev-theme
```
```bash
npm init slidev-theme@latest
```
```bash
yarn create slidev-theme
```
```bash
bun create slidev-theme
```
```bash
deno init --npm slidev-theme
```
--------------------------------
### Build Slidev SPA
Source: https://cn.sli.dev/builtin/cli
Builds a static single-page application (SPA) for hosting Slidev presentations. The output directory defaults to 'dist'.
```bash
slidev build [entry]
```
--------------------------------
### Arrow
Source: https://cn.sli.dev/builtin/components
Draws an arrow with customizable start and end points, width, and color. Supports two-way arrows.
```APIDOC
## Arrow
Draws an arrow.
### Usage
```md
```
Or:
```md
```
### Props
* `x1` (`string | number`, required): The x-coordinate of the starting point.
* `y1` (`string | number`, required): The y-coordinate of the starting point.
* `x2` (`string | number`, required): The x-coordinate of the ending point.
* `y2` (`string | number`, required): The y-coordinate of the ending point.
* `width` (`string | number`, default: `2`): The width of the line.
* `color` (`string`, default: `'currentColor'`): The color of the line.
* `two-way` (`boolean`, default: `false`): Draw a two-way arrow.
```
--------------------------------
### Slidev Presentation Content
Source: https://cn.sli.dev/
Example of a Slidev presentation markdown file. This defines the title and content of the first slide.
```markdown
# 欢迎使用 Slidev！
面向|
```
--------------------------------
### Global Bottom Layer Example
Source: https://cn.sli.dev/features/global-layers
This component will appear at the bottom of every slide. It's useful for adding persistent footers.
```html
```
--------------------------------
### Import Snippet with Highlighting and Monaco Options
Source: https://cn.sli.dev/features/import-snippet.html
Import code snippets with advanced options for line highlighting and Monaco editor configuration. Use line numbers or ranges for highlighting, and specify options like 'lines:true' or Monaco settings.
```markdown
```
<<< @/snippets/snippet.js {2,3|5}{lines:true}
```
```
```markdown
```
<<< @/snippets/snippet.js ts {monaco}{height:200px}
```
```
--------------------------------
### Configure Addons in Frontmatter
Source: https://cn.sli.dev/guide/theme-addon
Use the 'addons' option in the frontmatter to include multiple plugins for extended functionality. List each addon by its package name.
```markdown
---
addons:
- excalidraw
- '@slidev/plugin-notes'
---
```
--------------------------------
### Enable Remote Access with Tunneling via deno
Source: https://cn.sli.dev/features/remote-access.html
Expose your local Slidev server to the internet using Cloudflare Quick Tunnels with deno. This allows sharing your slides without a public server.
```bash
deno run dev --remote --tunnel
# 即 slidev --remote --tunnel
```
--------------------------------
### Type Hinting with TocItem
Source: https://cn.sli.dev/guide/global-context
Import and use TypeScript types like TocItem from '@slidev/types' for better type safety in your Vue script setup.
```vue
```
--------------------------------
### Enable Remote Access with Tunneling via npm
Source: https://cn.sli.dev/features/remote-access.html
Expose your local Slidev server to the internet using Cloudflare Quick Tunnels with npm. This allows sharing your slides without a public server.
```bash
npm run dev -- --remote --tunnel
# 即 slidev --remote --tunnel
```
--------------------------------
### Conditionally Hide Footer from Specific Page
Source: https://cn.sli.dev/features/global-layers
Use the `$nav.currentPage` property to conditionally render components. This example hides the footer on page 4.
```html
```
--------------------------------
### Advanced Transition Options
Source: https://cn.sli.dev/guide/animations
Pass an options object to the `transition` frontmatter to configure advanced properties like transition name and CSS classes for enter/leave states.
```markdown
---
transition:
name: my-transition
enterFromClass: custom-enter-from
enterActiveClass: custom-enter-active
---
```
--------------------------------
### Project-Level Configuration in Frontmatter
Source: https://cn.sli.dev/custom/index
Configure your entire Slidev project in the frontmatter of the first slide. This includes theme, addons, title, export options, and more.
```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: false
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
---
```
--------------------------------
### Two-Column Layout with Slot Sugar Syntax
Source: https://cn.sli.dev/features/slot-sugar.html
This demonstrates the shorthand slot sugar syntax `::name::` for defining content insertion points, offering a more concise alternative to explicit v-slot directives.
```markdown
---
layout: two-cols
---
# 左侧
这显示在左侧
::right::
# 右侧
这显示在右侧
```
--------------------------------
### Custom CSS Styling with UnoCSS
Source: https://cn.sli.dev/custom/directory-structure
Example of applying custom styles using UnoCSS directives within a Slidev layout. Supports CSS nesting and at-directives.
```css
.slidev-layout {
--uno: px-14 py-10 text-[1.1rem];
h1, h2, h3, h4, p, div {
--uno: select-none;
}
pre, code {
--uno: select-text;
}
a {
color: theme('colors.primary');
}
}
```
--------------------------------
### Enable Remote Access with Tunneling via bun
Source: https://cn.sli.dev/features/remote-access.html
Expose your local Slidev server to the internet using Cloudflare Quick Tunnels with bun. This allows sharing your slides without a public server.
```bash
bun dev --remote --tunnel
# 即 slidev --remote --tunnel
```
--------------------------------
### Conditionally Hide Footer from Specific Layout
Source: https://cn.sli.dev/features/global-layers
Use the `$nav.currentLayout` property to conditionally render components based on the current slide layout. This example hides the footer when the layout is 'cover'.
```html
```
--------------------------------
### Configure Slides with Frontmatter
Source: https://cn.sli.dev/guide/syntax
Use YAML frontmatter at the beginning of slides to configure project-wide settings (headmatter) or individual slide properties like theme, layout, and background. VS Code extensions can assist with readability.
```yaml
---
theme: seriph
title: Welcome to Slidev
---
# 第一页
第一页的 frontmatter 也是整个演示文稿的 headmatter
---
layout: center
background: /background-1.png
class: text-white
---
# 第二页
本页的布局是 `center`，背景是一张图片
---
# 第三页
本页没有 frontmatter
---
src: ./pages/4.md # 本页只包含 frontmatter
---
---
# 第五页
```
--------------------------------
### Configure Basic Fonts
Source: https://cn.sli.dev/custom/config-fonts
Configure the sans, serif, and mono fonts for your presentation. Fonts are automatically imported from Google Fonts via CDN by default.
```yaml
---
fonts:
# Basic text font
sans: Robot
# For use with UnoCSS's `font-serif` css class
serif: Robot Slab
# For code blocks, inline code, etc.
mono: Fira Code
---
```
--------------------------------
### Generated Font CSS
Source: https://cn.sli.dev/custom/config-fonts
Example of CSS generated by Slidev for font families based on the frontmatter configuration. This demonstrates how specified fonts are translated into CSS `font-family` rules with fallbacks.
```css
.font-sans {
font-family: "Robot",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}
.font-serif {
font-family: "Robot Slab",ui-serif,Georgia,Cambria,"Times New Roman",Times,serif;
}
.font-mono {
font-family: "Fira Code",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}
```
--------------------------------
### Configure Presentation Duration and Timer Mode
Source: https://cn.sli.dev/features/timer.html
Set the total duration for the presentation and choose between 'stopwatch' or 'countdown' mode. The default duration is '30min' and the default mode is 'stopwatch'.
```yaml
---
# 演示时长，默认为 '30min'
duration: 30min
# 计时器模式，可以是 'countdown' 或 'stopwatch'，默认为 'stopwatch'
timer: stopwatch
---
```
--------------------------------
### Configure notesAutoRuby in Frontmatter - Slidev
Source: https://cn.sli.dev/features/notes-auto-ruby.html
Map words to their ruby text in the frontmatter to enable automatic ruby annotations in notes. This is useful for providing pronunciation guides for specific words.
```markdown
---
notesAutoRuby:
日本語: ni hon go
勉強: べんきょう
---
# Your slide content
```
--------------------------------
### Create Slidev Project with yarn
Source: https://cn.sli.dev/guide/index
Use this command to create a new Slidev project if you are using yarn as your package manager.
```bash
yarn create slidev
```
--------------------------------
### Scoped Styles with UnoCSS Directives
Source: https://cn.sli.dev/features/slide-scope-style.html
Leverage UnoCSS within `
```
--------------------------------
### Conditional Styling with UnoCSS Variants
Source: https://cn.sli.dev/features/direction-variant.html
Use UnoCSS `forward:` or `backward:` variants to apply classes only during specific navigation directions. The example shows a transition delay applied only when navigating forward.
```html
Element
Element
```
--------------------------------
### Highlight Specific Lines with Max Height
Source: https://cn.sli.dev/features/code-block-max-height.html
You can use `{*}` as a placeholder for line highlighting when setting `maxHeight` for a code block. This example shows how to apply it to a code block with a max height of '100px'.
```typescript
// ...
```
--------------------------------
### Built-in Icon Mapping
Source: https://cn.sli.dev/features/code-groups
Slidev automatically matches icons for code blocks based on their titles, supporting package managers, frameworks, build tools, and configuration files. You can extend this by installing `@iconify-json/vscode-icons`.
```javascript
const builtinIcons = {
// 包管理器
'pnpm': 'i-vscode-icons:file-type-light-pnpm',
'npm': 'i-vscode-icons:file-type-npm',
'yarn': 'i-vscode-icons:file-type-yarn',
'bun': 'i-vscode-icons:file-type-bun',
'deno': 'i-vscode-icons:file-type-deno',
// 框架
'vue': 'i-vscode-icons:file-type-vue',
'svelte': 'i-vscode-icons:file-type-svelte',
'angular': 'i-vscode-icons:file-type-angular',
'react': 'i-vscode-icons:file-type-reactjs',
'next': 'i-vscode-icons:file-type-light-next',
'nuxt': 'i-vscode-icons:file-type-nuxt',
'solid': 'logos:solidjs-icon',
'astro': 'i-vscode-icons:file-type-light-astro',
// 打包工具
'rollup': 'i-vscode-icons:file-type-rollup',
'webpack': 'i-vscode-icons:file-type-webpack',
'vite': 'i-vscode-icons:file-type-vite',
'esbuild': 'i-vscode-icons:file-type-esbuild',
// 配置文件
'package.json': 'i-vscode-icons:file-type-node',
'tsconfig.json': 'i-vscode-icons:file-type-tsconfig',
'.npmrc': 'i-vscode-icons:file-type-npm',
'.editorconfig': 'i-vscode-icons:file-type-editorconfig',
'.eslintrc': 'i-vscode-icons:file-type-eslint',
'.eslintignore': 'i-vscode-icons:file-type-eslint',
'eslint.config': 'i-vscode-icons:file-type-eslint',
'.gitignore': 'i-vscode-icons:file-type-git',
'.gitattributes': 'i-vscode-icons:file-type-git',
'.env': 'i-vscode-icons:file-type-dotenv',
'.env.example': 'i-vscode-icons:file-type-dotenv',
'.vscode': 'i-vscode-icons:file-type-vscode',
'tailwind.config': 'vscode-icons:file-type-tailwind',
'uno.config': 'i-vscode-icons:file-type-unocss',
'unocss.config': 'i-vscode-icons:file-type-unocss',
'.oxlintrc': 'i-vscode-icons:file-type-oxlint',
'vue.config': 'i-vscode-icons:file-type-vueconfig',
// 文件扩展名
'.mts': 'i-vscode-icons:file-type-typescript',
'.cts': 'i-vscode-icons:file-type-typescript',
'.ts': 'i-vscode-icons:file-type-typescript',
'.tsx': 'i-vscode-icons:file-type-typescript',
'.mjs': 'i-vscode-icons:file-type-js',
'.cjs': 'i-vscode-icons:file-type-js',
'.json': 'i-vscode-icons:file-type-json',
'.js': 'i-vscode-icons:file-type-js',
'.jsx': 'i-vscode-icons:file-type-js',
'.md': 'i-vscode-icons:file-type-markdown',
'.py': 'i-vscode-icons:file-type-python',
'.ico': 'i-vscode-icons:file-type-favicon',
'.html': 'i-vscode-icons:file-type-html',
'.css': 'i-vscode-icons:file-type-css',
'.scss': 'i-vscode-icons:file-type-scss',
'.yml': 'i-vscode-icons:file-type-light-yaml',
'.yaml': 'i-vscode-icons:file-type-light-yaml',
'.php': 'i-vscode-icons:file-type-php',
}
```
--------------------------------
### Export with Click Steps
Source: https://cn.sli.dev/guide/exporting
Export slides with multiple steps enabled, generating a separate page for each click animation. Use `--with-clicks false` to disable this.
```bash
$ slidev export --with-clicks
```
--------------------------------
### Embed YouTube Video with Youtube Component
Source: https://cn.sli.dev/builtin/components
Embed YouTube videos using the Youtube component by providing the video ID. You can also specify the start time of the video within the ID string.
```html
```
--------------------------------
### Enable Remote Access with Tunneling via pnpm
Source: https://cn.sli.dev/features/remote-access.html
Expose your local Slidev server to the internet using Cloudflare Quick Tunnels with pnpm. This allows sharing your slides without a public server.
```bash
pnpm dev --remote --tunnel
# 即 slidev --remote --tunnel
```
--------------------------------
### Hide Custom Nav Button in Presenter Mode
Source: https://cn.sli.dev/features/global-layers
Conditionally render navigation controls based on the presenter mode status using `$nav.isPresenter`. This example hides the 'Next' button when in presenter mode.
```html
```
--------------------------------
### Configure Shiki with Built-in Themes
Source: https://cn.sli.dev/custom/config-highlighter
Set up Shiki with predefined dark and light themes. This configuration is compatible with both Node.js and browser environments.
```typescript
import {
defineShikiSetup
} from '@slidev/types'
export default
defineShikiSetup
(() => {
return {
themes
: {
dark
: 'min-dark',
light
: 'min-light',
},
transformers
: [
// ...
],
}
})
```
--------------------------------
### Set Max Height for Code Blocks
Source: https://cn.sli.dev/features/code-block-max-height.html
Use `maxHeight` to set a fixed height for code blocks that exceed slide capacity, enabling scrolling. This example demonstrates setting the height to '100px'.
```typescript
function add(
a: Ref | number,
b: Ref | number
) {
return computed(() => unref(a) + unref(b))
}
/// ...任意多行
const c = add(1, 2)
```
--------------------------------
### Add Custom Icons to Code Groups
Source: https://cn.sli.dev/features/code-groups
Use the `~icon~` syntax within the code block title to specify custom icons from any Iconify collection. Ensure the icon collection is installed and configured in `uno.config.ts`.
```javascript
console.log('Hello, GitHub!')
```
--------------------------------
### Forward and Backward Transitions
Source: https://cn.sli.dev/guide/animations
Specify different transition effects for forward and backward navigation using a pipe `|` separator in the `transition` frontmatter option.
```markdown
---
transition: go-forward | go-backward
---
```
--------------------------------
### RenderWhen
Source: https://cn.sli.dev/builtin/components
Renders a slot based on whether the context matches, such as when in presenter view. Supports multiple contexts and fallback content.
```APIDOC
## RenderWhen
Renders a slot based on whether the context matches (e.g., whether it's in presenter view).
### Usage
```md
This only renders in presenter view.
```
Context types: `'main' | 'visible' | 'print' | 'slide' | 'overview' | 'presenter' | 'previewNext'`
### Props
* `context` (`Context | Context[]`): The context or array of contexts to check.
* `'main'`: Renders in both slides and presenter view (equivalent to `['slide', 'presenter']`).
* `'visible'`: Renders if visible.
* `'print'`: Renders in print mode.
* `'slide'`: Renders in slides.
* `'overview'`: Renders in overview.
* `'presenter'`: Renders in presenter view.
* `'previewNext'`: Renders in the presenter's next slide preview.
### Slots
* `#default`: Renders when the context matches.
* `#fallback`: Renders when the context does not match.
```
--------------------------------
### Customize Animation Timing with 'at' Attribute
Source: https://cn.sli.dev/guide/animations
Control the exact click number an element animates using the `at` attribute with `v-click`. Values starting with '+' or '-' are relative to the previous animation's timing, while numeric values are absolute click counts.
```html
```
```html
```js {1|2}{at:1}
1 + 1
'a' + 'b'
```
```js {1|2}{at:1}
= 2
= 'ab'
```
```
--------------------------------
### Basic Magic Move Usage
Source: https://cn.sli.dev/features/shiki-magic-move
Use this syntax to enable magic move transitions between code blocks. Each block represents a step in the animation.
```markdown
````md magic-move
```js
console.log(`Step ${1}`)
```
```js
console.log(`Step ${1 + 1}`)
```
```ts
console.log(`Step ${3}` as string)
```
````
```
--------------------------------
### Export to PPTX
Source: https://cn.sli.dev/guide/exporting
Export your slides to a PPTX file. Note that all slides will be images, and speaker notes will be included.
```bash
$ slidev export --format pptx
```
--------------------------------
### Enable Remote Access with npm
Source: https://cn.sli.dev/features/remote-access.html
Run your Slidev presentation with remote access enabled using npm. This allows others to view your slides remotely.
```bash
npm run dev -- --remote
# 即 slidev --remote
```
--------------------------------
### Configure Shiki with Custom Themes and Languages
Source: https://cn.sli.dev/custom/config-highlighter
Extend Shiki by importing custom themes and languages defined in JSON files. Ensure custom languages are compatible with TextMate grammar.
```typescript
import {
defineShikiSetup
} from '@slidev/types'
import
customLanguage
from './customLanguage.tmLanguage.json'
import
customTheme
from './customTheme.tmTheme.json'
export default
defineShikiSetup
(() => {
return {
themes
: {
dark
:
customTheme
,
light
: 'min-light',
},
langs
: [
'js',
'typescript',
'cpp',
customLanguage
,
// ...
],
transformers
: [
// ...
],
}
})
```
--------------------------------
### Enable Remote Access with deno
Source: https://cn.sli.dev/features/remote-access.html
Run your Slidev presentation with remote access enabled using deno. This allows others to view your slides remotely.
```bash
deno run dev --remote
# 即 slidev --remote
```
--------------------------------
### 使用 public 文件夹和绝对路径
Source: https://cn.sli.dev/guide/faq
将资源放在 public 文件夹中，并使用绝对路径导入，以解决构建后路径失效的问题。
```markdown
---
background: /image.png
---
```
--------------------------------
### Export to PDF
Source: https://cn.sli.dev/guide/exporting
Export your slides to a PDF file. The PDF will be saved as `./slides-export.pdf` by default.
```bash
$ slidev export
```
--------------------------------
### Custom index.html Head Injection
Source: https://cn.sli.dev/custom/directory-structure
Demonstrates how to inject custom head elements, such as external font links, into the main index.html.
```html
```
--------------------------------
### Configure Default Slidev Settings in Theme
Source: https://cn.sli.dev/guide/write-theme
Provide default Slidev configurations for your theme by adding a `slidev.defaults` field to your `package.json`. These settings will be merged with the user's configuration.
```json
{
"slidev": {
"defaults": {
"transition": "slide-left",
"aspectRatio": "4/3"
}
}
}
```
--------------------------------
### Enable Remote Access with bun
Source: https://cn.sli.dev/features/remote-access.html
Run your Slidev presentation with remote access enabled using bun. This allows others to view your slides remotely.
```bash
bun dev --remote
# 即 slidev --remote
```
--------------------------------
### Markdown 中导入静态资源
Source: https://cn.sli.dev/guide/faq
在 Markdown 文件中直接导入图片，构建后 URL 会被解析为 /BASE_URL/assets/image.png。
```markdown
```
--------------------------------
### Configure Slidev Include Glob Patterns
Source: https://cn.sli.dev/features/vscode-extension
Add glob patterns to the `slidev.include` configuration to include files as Slidev entries. The default is `["**/*.md"]`.
```json
{
"slidev.include": ["**/presentation.md"]
}
```
--------------------------------
### Use `image` Layout with Custom Background Size
Source: https://cn.sli.dev/builtin/layouts
Use the `image` layout to display an image as the main content. You can customize the background size using `backgroundSize` property, which accepts keywords like `cover` or specific dimensions.
```yaml
---
layout: image
image: /path/to/the/image
backgroundSize: contain
---
```
```yaml
---
layout: image-left
image: /path/to/the/image
backgroundSize: 20em 70%
---
```
--------------------------------
### Enable MDC Syntax
Source: https://cn.sli.dev/features/mdc.html
Add `mdc: true` to the frontmatter of your Markdown file to enable MDC syntax.
```yaml
---
mdc: true
---
```
--------------------------------
### Import Snippet with Placeholder Highlighting
Source: https://cn.sli.dev/features/import-snippet.html
Use a wildcard '{*}' as a placeholder for line highlighting when you want to apply highlighting without specifying exact line numbers. This is often used in conjunction with options like 'lines:true'.
```markdown
```
<<< @/snippets/snippet.js {*}{lines:true}
```
```
```
--------------------------------
### Configure Slidev Include Glob Patterns
Source: https://cn.sli.dev/features/vscode-extension
Add glob patterns to the `slidev.include` configuration to include files as Slidev entries. The default is `["**/*.md"]`.
```json
{
"slidev.include": ["**/presentation.md"]
}
```
--------------------------------
### Use `image` Layout with Custom Background Size
Source: https://cn.sli.dev/builtin/layouts
Use the `image` layout to display an image as the main content. You can customize the background size using `backgroundSize` property, which accepts keywords like `cover` or specific dimensions.
```yaml
---
layout: image
image: /path/to/the/image
backgroundSize: contain
---
```
```yaml
---
layout: image-left
image: /path/to/the/image
backgroundSize: 20em 70%
---
```
--------------------------------
### Enable MDC Syntax
Source: https://cn.sli.dev/features/mdc.html
Add `mdc: true` to the frontmatter of your Markdown file to enable MDC syntax.
```yaml
---
mdc: true
---
```
--------------------------------
### Import Snippet with Placeholder Highlighting
Source: https://cn.sli.dev/features/import-snippet.html
Use a wildcard '{*}' as a placeholder for line highlighting when you want to apply highlighting without specifying exact line numbers. This is often used in conjunction with options like 'lines:true'.
```markdown
```
<<< @/snippets/snippet.js {*}{lines:true}
```
```