--- description: A comprehensive guide to crafting high-quality advanced presentations using Slidev, covering advanced syntax, visuals, interactivity, customization, and deployment. author: Cline version: 1.0 category: "Presentation Tools" tags: ["slidev", "guide", "advanced", "presentation", "development"] globs: ["comprehensive-slide-dev-guide.md"] --- # Comprehensive Slidev Guide: Crafting High-Quality Advanced Presentations This guide provides a dense overview of Slidev's capabilities, focusing on advanced techniques and best practices for creating visually stunning and highly interactive presentations. It assumes a basic understanding of Markdown and Vue.js. ## 1. Core Structure and Advanced Syntax Slidev presentations are built upon Markdown files, enhanced with YAML frontmatter for configuration and Vue components for dynamic content. ### Slide Separation and Frontmatter Separate slides with `---`. The first `---` block is the headmatter (global config), subsequent blocks are slide-specific frontmatter. ```yaml --- theme: seriph # Global theme title: Advanced Slidev Techniques canvasWidth: 1200 # Custom canvas width aspectRatio: 16/9 # Widescreen aspect ratio fonts: sans: Roboto mono: 'Fira Code, monospace' provider: google # Use Google Fonts --- # Welcome Slide --- layout: cover # Use the cover layout background: /images/background.png # Slide background image class: text-white # Apply UnoCSS classes --- # Section Title ::right:: Content for the right slot --- src: ./sections/advanced-animations.md # Import slides from another file --- ``` **Advanced Frontmatter Options:** - `clicks`: Manually set the total number of clicks for a slide. - `routeAlias`: Define a custom route name for a slide for easier navigation (``). - `hideInToc`: Exclude a slide from the Table of Contents. - `download`: Include a download button for the PDF export in the built SPA. Can be boolean (`true`) or a custom URL string. - `monacoTypesAdditionalPackages`: Array of strings to specify extra packages for Monaco Editor type acquisition. - `monacoTypesSource: ata`: Enable client-side auto type acquisition for Monaco. - `drawings.persist`: Boolean (`true`/`false`) or `'dev'` to control drawing persistence. - `transition`: Define per-slide transitions (`fade`, `slide-left`, `view-transition`, custom CSS transitions). Use `|` for forward/backward transitions (`slide-left | slide-right`). Can also be an object for advanced Vue Transition options. - `title`: Set the title for a slide, overriding the title extracted from the first heading. - `level`: Set the title level for a slide, affecting its appearance in the Table of Contents. - `class`: Add custom CSS classes to the slide container. - `style`: Add inline CSS styles to the slide container. - `id`: Set a custom ID for the slide container. - `name`: Set a custom name for the slide, usable with ``. - `plantUmlServer`: Configure a custom PlantUML server URL. - `htmlAttrs`: Add attributes to the `` tag for a specific slide. - `bodyAttrs`: Add attributes to the `` tag for a specific slide. - `head`: Add custom tags to the `` section for a specific slide (array of objects). - `vue`: Configure Vue plugin options for a specific slide. - `markdown`: Configure Markdown-it options for a specific slide. - `highlighter`: Configure Shiki highlighter options for a specific slide. - `katex`: Configure KaTeX options for a specific slide. - `monaco`: Configure Monaco Editor options for a specific slide. - `shortcuts`: Configure keyboard shortcuts for a specific slide. - `transformers`: Configure markdown transformers for a specific slide. - `codeRunners`: Configure code runners for a specific slide. - `clicks`: Manually set the total number of clicks for a slide. - `routeAlias`: Define a custom route name for a slide for easier navigation (``). - `hideInToc`: Exclude a slide from the Table of Contents. - `download`: Include a download button for the PDF export in the built SPA. Can be boolean or a custom URL. - `monacoTypesAdditionalPackages`: Specify extra packages for Monaco Editor type acquisition. - `monacoTypesSource: ata`: Enable client-side auto type acquisition for Monaco. - `drawings.persist: true`: Save drawings as SVGs. Can also be set to `false` or `dev` to disable. - `plantUmlServer`: Configure a custom PlantUML server URL. - `htmlAttrs`: Add attributes to the `` tag for a specific slide. - `bodyAttrs`: Add attributes to the `` tag for a specific slide. - `head`: Add custom tags to the `` section for a specific slide. ### Notes and Click Markers Add presenter notes using HTML comments `` at the end of a slide. Use `[click]` markers within notes to synchronize notes with click animations. `[click:N]` skips N-1 clicks. ```markdown ``` **Advanced Click Markers:** - Use `[click]` at the beginning of a line in notes to synchronize with the next click animation on the slide. - Use `[click:N]` to synchronize with a specific absolute click number N. - Use `[click:+N]` to synchronize N clicks after the previous click marker. - Content between click markers is highlighted in the presenter notes. - Click markers help in navigating notes during the presentation, especially with the presenter mode. ### Importing Slides Organize large presentations by splitting content into multiple Markdown files and importing them using the `src` frontmatter option. ```yaml --- src: ./chapters/chapter1.md # Import entire file --- --- src: ./appendix.md#2-5,8 # Import specific slides (2, 3, 4, 5, and 8) --- ``` Frontmatter from the main entry has higher priority during merging. This allows overriding configurations from imported files. ## 2. Mastering Visuals and Styling Create visually appealing slides using themes, custom styles, fonts, and assets. ### Themes and Customization Apply a theme via the `theme` headmatter option. Explore the [Theme Gallery](https://sli.dev/resources/theme-gallery). Eject a theme (`slidev theme eject`) for deep customization. **Writing Themes:** Themes are npm packages (`slidev-theme-*`) that can provide styles, layouts, components, and default configurations (`package.json` `slidev.defaults`). Themes should focus on appearance. ### Styling with UnoCSS Slidev integrates UnoCSS for utility-first styling. Apply classes directly in Markdown or components. ```html

Centered Bold Primary Text

``` **Customizing UnoCSS:** Create `uno.config.ts` in your project root to extend configurations, add shortcuts, custom rules, variants, etc. ```ts import { defineConfig } from 'unocss' export default defineConfig({ shortcuts: { 'btn': 'px-4 py-2 rounded inline-block bg-teal-600 text-white cursor-pointer hover:bg-teal-700 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50', }, rules: [ [/^my-rule-(\d+)$/, ([, d]) => ({ margin: `${d / 4}rem`, })], ], variants: [ (matcher) => { if (!matcher.startsWith('hover:')) return matcher return { matcher: matcher.slice(6), selector: (s) => `${s}:hover`, } }, ], }) ``` **Scoped Styles:** Use `