Syntax Guide

Slidev's slides are written as Markdown files, which are called Slidev Markdowns. A presentation has a Slidev Markdown as its entry, which is ./slides.md by default, but you can change it by passing the file path as an argument to the CLI commands.

In a Slidev Markdown, not only the basic Markdown features can be used as usual, Slidev also provides additional features to enhance your slides. This section covers the syntax introduced by Slidev. Please make sure you know the basic Markdown syntax before reading this guide.

Slide Separators

Use --- padded with a new line to separate your slides.

# Title

Hello, **Slidev**!

---

# Slide 2

Use code blocks for highlighting:

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

---

# Slide 3

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

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

Frontmatter & Headmatter

At the beginning of each slide, you can add an optional frontmatter to configure the slide. The first frontmatter block is called headmatter and can configure the whole slide deck. The rest are frontmatters for individual slides. Texts in the headmatter or the frontmatter should be an object in YAML format. For example:

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

Configurations you can set are described in the Slides deck configurations and Per slide configurations sections.

To make the headmatter more readable, you can installed the VSCode extension:

✨ VS Code Extension

editor

Help you better organize your slides and have a quick overview of them.

Also, there is another possible frontmatter format:

✨ Block Frontmatter

syntax

Use a YAML code block as the frontmatter.

Notes

You can also create presenter notes for each slide. They will show up in Presenter Mode for you to reference during presentations.

The comment blocks at the end of each slide are treated as the note of the slide:

---
layout: cover
---

# Page 1

This is the cover page.

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

---

# Page 2

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

The second page

<!--
This is _another_ note
-->

Basic Markdown and HTML are also supported in notes and will be rendered.

See also:
✨ Click Markers
presenter animation
Highlighting notes and auto-scrolling to the active section of notes.

Code Blocks

One big reason that led to the creation of Slidev was the need to perfectly display code in slides. Consequently, you can use Markdown-flavored code blocks to highlight your code.