try also 'default' to start simple
theme: seriph
random image from a curated Unsplash collection by Anthony
like them? see https://unsplash.com/collections/94734566/slidev
background: https://source.unsplash.com/collection/94734566/1920x1080
apply any windi css classes to the current slide
class: 'text-center'
https://sli.dev/custom/highlighters.html
highlighter: shiki
show line numbers in code blocks
lineNumbers: false
some information about the slides, markdown enabled
info: |
Slidev Starter Template
Presentation slides for developers.
Learn more at Sli.dev
persist drawings in exports and build
drawings: persist: false
use UnoCSS
css: unocss
Welcome to Slidev
Presentation slides for developers
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, learn more
Keyboard Shortcuts
| right / space | next animation or slide |
| left / shiftspace | previous animation or slide |
| up | previous slide |
| down | next slide |
Here!
layout: image-right image: https://source.unsplash.com/collection/94734566/1920x1080
Code
Use code snippets and get the highlighting directly
interface User {
id: number
firstName: string
lastName: string
role: string
}
function updateUser(id: number, update: User) {
const user = getUser(id)
const newUser = { ...user, ...update }
saveUser(id, newUser)
}
Components
You can use Vue components directly inside your slides.
We have provided a few built-in components like <Tweet/> and <Youtube/> that you can use directly. And adding your custom components is also super easy.
<Counter :count="10" />
Check out the guides for more.
<Tweet id="1390115482657726468" />
class: px-20
Themes
Slidev comes with powerful theming support. Themes can provide styles, layouts, components, or even configurations for tools. Switching between themes by just one edit in your frontmatter:
---
theme: default
---
---
theme: seriph
---
Read more about How to use a theme and check out the Awesome Themes Gallery.
preload: false
Animations
Animations are powered by @vueuse/motion.
<div
v-motion
:initial="{ x: -80 }"
:enter="{ x: 0 }">
Slidev
</div>
LaTeX
LaTeX is supported out-of-box powered by KaTeX.
Inline $\sqrt{3x-1}+(1+x)^2$
Block $$ \begin{array}{c}
\nabla \times \vec{\mathbf{B}} -, \frac1c, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}} \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \
\nabla \times \vec{\mathbf{E}}, +, \frac1c, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \
\nabla \cdot \vec{\mathbf{B}} & = 0
\end{array} $$
Diagrams
You can create diagrams / graphs from textual descriptions, directly in your Markdown.
@startuml
package "Some Group" {
HTTP - [First Component]
[Another Component]
}
node "Other Groups" {
FTP - [Second Component]
[First Component] --> FTP
}
cloud {
[Example 1]
}
database "MySql" {
folder "This is my folder" {
[Folder 3]
}
frame "Foo" {
[Frame 4]
}
}
[Another Component] --> [Example 1]
[Example 1] --> [Folder 3]
[Folder 3] --> [Frame 4]
@enduml