ContextQMD
Back to Slidev

Slidev Theme Starter

packages/create-theme/template/example.md

52.15.11.9 KB
Original Source

Slidev Theme Starter

Presentation slides for developers

<div class="pt-12"> <span @click="$slidev.nav.next" class="px-2 py-1 rounded cursor-pointer" flex="~ justify-center items-center gap-2" hover="bg-white bg-opacity-10"> Press Space for next page <div class="i-carbon:arrow-right inline-block"/> </span> </div>

What is Slidev?

Slidev is a slide maker and presentation tool designed for developers. It includes the following features:

  • ๐Ÿ“ Text-based - focus on your content with Markdown, then style it later
  • ๐ŸŽจ Themable - themes can be shared and reused as npm packages
  • ๐Ÿง‘โ€๐Ÿ’ป Developer Friendly - code highlighting, live coding with autocompletion
  • ๐Ÿคน Interactive - embed Vue components to enhance your expressions
  • ๐ŸŽฅ Recording - built-in recording and camera view
  • ๐Ÿ“ค Portable - export to PDF, PPTX, PNGs, or even a hostable SPA
  • ๐Ÿ›  Hackable - virtually anything that's possible on a webpage is possible in Slidev

Read more about Why Slidev?

Navigation

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

Keyboard Shortcuts

<kbd>space</kbd> / <kbd>tab</kbd> / <kbd>right</kbd>next animation or slide
<kbd>left</kbd> / <kbd>shift</kbd><kbd>space</kbd>previous animation or slide
<kbd>up</kbd>previous slide
<kbd>down</kbd>next slide

layout: image-right image: https://cover.sli.dev

Code

Use code snippets and get the highlighting directly!

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

Learn More

Documentation / GitHub Repo