| 1 | --- |
| 2 | theme: ./ |
| 3 | background: https://cover.sli.dev |
| 4 | --- |
| 5 | |
| 6 | # Slidev Theme Starter |
| 7 | |
| 8 | Presentation slides for developers |
| 9 | |
| 10 | <div class="pt-12"> |
| 11 | <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"> |
| 12 | Press Space for next page <div class="i-carbon:arrow-right inline-block"/> |
| 13 | </span> |
| 14 | </div> |
| 15 | |
| 16 | --- |
| 17 | |
| 18 | # What is Slidev? |
| 19 | |
| 20 | Slidev is a slide maker and presentation tool designed for developers. It includes the following features: |
| 21 | |
| 22 | - 📝 **Text-based** - focus on your content with Markdown, then style it later |
| 23 | - 🎨 **Themable** - themes can be shared and reused as npm packages |
| 24 | - 🧑💻 **Developer Friendly** - code highlighting, live coding with autocompletion |
| 25 | - 🤹 **Interactive** - embed Vue components to enhance your expressions |
| 26 | - 🎥 **Recording** - built-in recording and camera view |
| 27 | - 📤 **Portable** - export to PDF, PPTX, PNGs, or even a hostable SPA |
| 28 | - 🛠 **Hackable** - virtually anything that's possible on a webpage is possible in Slidev |
| 29 | |
| 30 | <br> |
| 31 | <br> |
| 32 | |
| 33 | Read more about [Why Slidev?](https://sli.dev/guide/why) |
| 34 | |
| 35 | --- |
| 36 | |
| 37 | # Navigation |
| 38 | |
| 39 | Hover on the bottom-left corner to see the navigation's controls panel |
| 40 | |
| 41 | ## Keyboard Shortcuts |
| 42 | |
| 43 | | | | |
| 44 | | --- | --- | |
| 45 | | <kbd>space</kbd> / <kbd>tab</kbd> / <kbd>right</kbd> | next animation or slide | |
| 46 | | <kbd>left</kbd> / <kbd>shift</kbd><kbd>space</kbd> | previous animation or slide | |
| 47 | | <kbd>up</kbd> | previous slide | |
| 48 | | <kbd>down</kbd> | next slide | |
| 49 | |
| 50 | --- |
| 51 | layout: image-right |
| 52 | image: https://cover.sli.dev |
| 53 | --- |
| 54 | |
| 55 | # Code |
| 56 | |
| 57 | Use code snippets and get the highlighting directly! |
| 58 | |
| 59 | ```ts |
| 60 | interface User { |
| 61 | id: number |
| 62 | firstName: string |
| 63 | lastName: string |
| 64 | role: string |
| 65 | } |
| 66 | |
| 67 | function updateUser(id: number, update: Partial<User>) { |
| 68 | const user = getUser(id) |
| 69 | const newUser = { ...user, ...update } |
| 70 | saveUser(id, newUser) |
| 71 | } |
| 72 | ``` |
| 73 | |
| 74 | --- |
| 75 | layout: center |
| 76 | class: "text-center" |
| 77 | --- |
| 78 | |
| 79 | # Learn More |
| 80 | |
| 81 | [Documentation](https://sli.dev) / [GitHub Repo](https://github.com/slidevjs/slidev) |
| 82 |