example.md

theme	layout	background
./	cover	cover

Slidev Theme Starter

---

layout: image image: ../assets/vm.png

Presentation slides for developers

---

background: 'common'

What is Slidev?

Slidev is a slides maker and presenter designed for developers, consist of the following features

• 📝 Text-based - focus on the content with Markdown, and then style them later
• 🎨 Themable - theme can be shared and used with npm packages
• 🧑‍💻 Developer Friendly - code highlighting, live coding with autocompletion
• 🤹 Interactive - embedding Vue components to enhance your expressions
• 🎥 Recording - built-in recording and camera view
• 📤 Portable - export into PDF, PNGs, or even a hostable SPA
• 🛠 Hackable - anything possible on a webpage

Read more about Why Slidev?

---

Navigation

Hover on the bottom-left corner to see the navigation's controls panel

Keyboard Shortcuts

space / tab / right	next animation or slide
left / shiftspace	previous animation or slide
up	previous slide
down	next slide

---

layout: two-cols-right-full background: 'common'

Code

Use code snippets and get the highlighting directly!

::right::

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

---

layout: center class: 'text-center' background: 'center'

Learn More

Documentations / GitHub Repo

---

layout: two-cols background: common title: My Title

• one
• two
• three

::right::

• four
• five
• six

---

layout: hexlet-next background: ../assets/hexlet-next.png