slidev-theme-dracula
Version:
Dracula theme for Slidev
83 lines (60 loc) โข 2.1 kB
Markdown
theme: ../
favicon: 'https://draculatheme.com/static/img/favicon.ico'
# Dracula Theme
One of the best dark theme meets slidev
<div class="pt-12">
<span @click="next" class="px-2 p-1 rounded cursor-pointer hover:bg-white hover:bg-opacity-10">
Press Space for next page <carbon:arrow-right class="inline"/>
</span>
</div>
# 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
<br>
<br>
Read more about [Why Slidev?](https://sli.dev/guide/why)
# 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://source.unsplash.com/collection/94734566/1920x1080
# Code
Use code snippets and get the highlighting directly!
```ts {all|2|1-6|all}
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)
}
```
And it nicely handles `inline` code as well.
layout: center
class: "text-center"
# Learn More
[Source Code](https://github.com/jd-solanki/slidev-theme-dracula/blob/main/slides/example.md) / [GitHub Repo](https://github.com/jd-solanki/slidev-theme-dracula)