| 1 | --- |
| 2 | # try also 'default' to start simple |
| 3 | theme: seriph |
| 4 | # random image from a curated Unsplash collection by Anthony |
| 5 | # like them? see https://unsplash.com/collections/94734566/slidev |
| 6 | background: https://cover.sli.dev |
| 7 | # apply any unocss classes to the current slide |
| 8 | class: 'text-center' |
| 9 | # some information about the slides, markdown enabled |
| 10 | info: | |
| 11 | ## Slidev Starter Template |
| 12 | Presentation slides for developers. |
| 13 | |
| 14 | Learn more at [Sli.dev](https://sli.dev) |
| 15 | transition: slide-left |
| 16 | title: Welcome to Slidev |
| 17 | comark: true |
| 18 | --- |
| 19 | |
| 20 | # Welcome to Slidev |
| 21 | |
| 22 | Presentation slides for developers |
| 23 | |
| 24 | <div class="pt-12"> |
| 25 | <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"> |
| 26 | Press Space for next page <div class="i-carbon:arrow-right inline-block"/> |
| 27 | </span> |
| 28 | </div> |
| 29 | |
| 30 | <div class="abs-br m-6 flex gap-2"> |
| 31 | <button @click="$slidev.nav.openInEditor()" title="Open in Editor" class="text-xl slidev-icon-btn opacity-50 !border-none !hover:text-white"> |
| 32 | <div class="i-carbon:edit" /> |
| 33 | </button> |
| 34 | <a href="https://github.com/slidevjs/slidev" target="_blank" alt="GitHub" title="Open in GitHub" |
| 35 | class="text-xl slidev-icon-btn opacity-50 !border-none !hover:text-white"> |
| 36 | <carbon-logo-github /> |
| 37 | </a> |
| 38 | </div> |
| 39 | |
| 40 | <!-- |
| 41 | The last comment block of each slide will be treated as slide notes. It will be visible and editable in Presenter Mode along with the slide. [Read more in the docs](https://sli.dev/guide/syntax.html#notes) |
| 42 | --> |
| 43 | |
| 44 | --- |
| 45 | transition: fade-out |
| 46 | --- |
| 47 | |
| 48 | # What is Slidev? |
| 49 | |
| 50 | Slidev is a slide maker and accompanying presentation tool designed for developers. It consists of the following features: |
| 51 | |
| 52 | - 📝 **Text-based** - focus on the content with Markdown, and apply styles later |
| 53 | - 🎨 **Themable** - themes can be shared and used as npm packages |
| 54 | - 🧑💻 **Developer Friendly** - code highlighting, live coding with autocompletion |
| 55 | - 🤹 **Interactive** - embedding Vue components to enhance your slides |
| 56 | - 🎥 **Recording** - built-in recording and camera view |
| 57 | - 📤 **Portable** - export to PDF, PPTX, PNGs, or even a hostable SPA |
| 58 | - 🛠 **Hackable** - virtually anything that's possible on a webpage is possible in Slidev |
| 59 | |
| 60 | <br> |
| 61 | <br> |
| 62 | |
| 63 | Read more about Slidev in [Why Slidev?](https://sli.dev/guide/why) |
| 64 | |
| 65 | <!-- |
| 66 | You can have `style` tags in markdown to override the style for the current page. |
| 67 | Learn more: https://sli.dev/guide/syntax#embedded-styles |
| 68 | --> |
| 69 | |
| 70 | <style> |
| 71 | h1 { |
| 72 | background-color: #2B90B6; |
| 73 | background-image: linear-gradient(45deg, #4EC5D4 10%, #146b8c 20%); |
| 74 | background-size: 100%; |
| 75 | -webkit-background-clip: text; |
| 76 | -moz-background-clip: text; |
| 77 | -webkit-text-fill-color: transparent; |
| 78 | -moz-text-fill-color: transparent; |
| 79 | } |
| 80 | </style> |
| 81 | |
| 82 | <!-- |
| 83 | Here is another comment. |
| 84 | --> |
| 85 | |
| 86 | --- |
| 87 | layout: default |
| 88 | --- |
| 89 | |
| 90 | # Table of contents |
| 91 | |
| 92 | ```html |
| 93 | <Toc minDepth="1" maxDepth="1"></Toc> |
| 94 | ``` |
| 95 | |
| 96 | <Toc maxDepth="1"></Toc> |
| 97 | |
| 98 | --- |
| 99 | transition: slide-up |
| 100 | level: 2 |
| 101 | --- |
| 102 | |
| 103 | # Navigation |
| 104 | |
| 105 | Hover on the bottom-left corner to see the navigation's control panel, [learn more](https://sli.dev/guide/navigation.html) |
| 106 | |
| 107 | ## Keyboard Shortcuts |
| 108 | |
| 109 | | | | |
| 110 | | --- | --- | |
| 111 | | <kbd>right</kbd> / <kbd>space</kbd>| next animation or slide | |
| 112 | | <kbd>left</kbd> / <kbd>shift</kbd><kbd>space</kbd> | previous animation or slide | |
| 113 | | <kbd>up</kbd> | previous slide | |
| 114 | | <kbd>down</kbd> | next slide | |
| 115 | |
| 116 | <!-- https://sli.dev/guide/animations.html#click-animation --> |
| 117 | <img |
| 118 | v-click |
| 119 | class="absolute -bottom-9 -left-7 w-80 opacity-50" |
| 120 | src="https://sli.dev/assets/arrow-bottom-left.svg" |
| 121 | alt="" |
| 122 | /> |
| 123 | <p v-after class="absolute bottom-23 left-45 opacity-30 transform -rotate-10">Here!</p> |
| 124 | |
| 125 | --- |
| 126 | layout: image-right |
| 127 | image: https://cover.sli.dev |
| 128 | --- |
| 129 | |
| 130 | # Code |
| 131 | |
| 132 | Use code snippets and get automatic highlighting, and even types hover![^1] |
| 133 | |
| 134 | ```ts {all|5|7|7-8|10|all} twoslash |
| 135 | // TwoSlash enables TypeScript hover information |
| 136 | // and errors in markdown code blocks |
| 137 | // More at https://shiki.style/packages/twoslash |
| 138 | |
| 139 | import { computed, ref } from 'vue' |
| 140 | |
| 141 | const count = ref(0) |
| 142 | const doubled = computed(() => count.value * 2) |
| 143 | |
| 144 | doubled.value = 2 |
| 145 | ``` |
| 146 | |
| 147 | <arrow v-click="[4, 5]" x1="350" y1="310" x2="195" y2="334" color="#953" width="2" arrowSize="1" /> |
| 148 | |
| 149 | <!-- This allow you to embed external code blocks --> |
| 150 | <!-- <<< @/snippets/external.ts#snippet --> |
| 151 | |
| 152 | <!-- Footer --> |
| 153 | [^1]: [Learn More](https://sli.dev/guide/syntax.html#line-highlighting) |
| 154 | |
| 155 | <!-- Inline style --> |
| 156 | <style> |
| 157 | .footnotes-sep { |
| 158 | @apply mt-5 opacity-10; |
| 159 | } |
| 160 | .footnotes { |
| 161 | @apply text-sm opacity-75; |
| 162 | } |
| 163 | .footnote-backref { |
| 164 | display: none; |
| 165 | } |
| 166 | </style> |
| 167 | |
| 168 | --- |
| 169 | |
| 170 | # Components |
| 171 | |
| 172 | <div grid="~ cols-2 gap-4"> |
| 173 | <div> |
| 174 | |
| 175 | You can use Vue components directly inside your slides. |
| 176 | |
| 177 | We have provided a few built-in components like `<Tweet/>` and `<Youtube/>` that you can use directly. Adding your own custom components is also super easy. |
| 178 | |
| 179 | ```html |
| 180 | <Counter :count="10" /> |
| 181 | ``` |
| 182 | |
| 183 | <!-- ./components/Counter.vue --> |
| 184 | <Counter :count="10" m="t-4" /> |
| 185 | |
| 186 | Check out [the guides](https://sli.dev/builtin/components.html) for more. |
| 187 | |
| 188 | </div> |
| 189 | <div> |
| 190 | |
| 191 | ```html |
| 192 | <Tweet id="1390115482657726468" /> |
| 193 | ``` |
| 194 | |
| 195 | <Tweet id="1390115482657726468" scale="0.65" /> |
| 196 | |
| 197 | </div> |
| 198 | </div> |
| 199 | |
| 200 | <!-- |
| 201 | Presenter notes with **bold**, *italic*, and ~~strike~~ text. |
| 202 | |
| 203 | Also, HTML elements are valid: |
| 204 | <div class="flex w-full"> |
| 205 | <span style="flex-grow: 1;">Left content</span> |
| 206 | <span>Right content</span> |
| 207 | </div> |
| 208 | --> |
| 209 | |
| 210 | --- |
| 211 | class: px-20 |
| 212 | --- |
| 213 | |
| 214 | # Themes |
| 215 | |
| 216 | Slidev comes with powerful theming support. Themes can provide styles, layouts, components, or even configurations for tools. Switch between themes on a per-slide basis with just **one change** in your frontmatter: |
| 217 | |
| 218 | <div grid="~ cols-2 gap-2" m="t-2"> |
| 219 | |
| 220 | ```yaml |
| 221 | --- |
| 222 | theme: default |
| 223 | --- |
| 224 | ``` |
| 225 | |
| 226 | ```yaml |
| 227 | --- |
| 228 | theme: seriph |
| 229 | --- |
| 230 | ``` |
| 231 | |
| 232 | <img border="rounded" src="https://github.com/slidevjs/themes/blob/main/screenshots/theme-default/01.png?raw=true" alt=""> |
| 233 | |
| 234 | <img border="rounded" src="https://github.com/slidevjs/themes/blob/main/screenshots/theme-seriph/01.png?raw=true" alt=""> |
| 235 | |
| 236 | </div> |
| 237 | |
| 238 | Read more about [How to use a theme](https://sli.dev/guide/theme-addon#use-theme) and |
| 239 | check out the [Awesome Themes Gallery](https://sli.dev/resources/theme-gallery). |
| 240 | |
| 241 | --- |
| 242 | preload: false |
| 243 | --- |
| 244 | |
| 245 | # Animations |
| 246 | |
| 247 | Animations are powered by [@vueuse/motion](https://motion.vueuse.org/). |
| 248 | |
| 249 | ```html |
| 250 | <div |
| 251 | v-motion |
| 252 | :initial="{ x: -80 }" |
| 253 | :enter="{ x: 0 }"> |
| 254 | Slidev |
| 255 | </div> |
| 256 | ``` |
| 257 | |
| 258 | <div class="w-60 relative mt-6"> |
| 259 | <div class="relative w-40 h-40"> |
| 260 | <img |
| 261 | v-motion |
| 262 | :initial="{ x: 800, y: -100, scale: 1.5, rotate: -50 }" |
| 263 | :enter="final" |
| 264 | class="absolute top-0 left-0 right-0 bottom-0" |
| 265 | src="https://sli.dev/logo-square.png" |
| 266 | alt="" |
| 267 | /> |
| 268 | <img |
| 269 | v-motion |
| 270 | :initial="{ y: 500, x: -100, scale: 2 }" |
| 271 | :enter="final" |
| 272 | class="absolute top-0 left-0 right-0 bottom-0" |
| 273 | src="https://sli.dev/logo-circle.png" |
| 274 | alt="" |
| 275 | /> |
| 276 | <img |
| 277 | v-motion |
| 278 | :initial="{ x: 600, y: 400, scale: 2, rotate: 100 }" |
| 279 | :enter="final" |
| 280 | class="absolute top-0 left-0 right-0 bottom-0" |
| 281 | src="https://sli.dev/logo-triangle.png" |
| 282 | alt="" |
| 283 | /> |
| 284 | </div> |
| 285 | |
| 286 | <div |
| 287 | class="text-5xl absolute top-14 left-40 text-[#2B90B6] -z-1" |
| 288 | v-motion |
| 289 | :initial="{ x: -80, opacity: 0}" |
| 290 | :enter="{ x: 0, opacity: 1, transition: { delay: 2000, duration: 1000 } }"> |
| 291 | Slidev |
| 292 | </div> |
| 293 | </div> |
| 294 | |
| 295 | <!-- vue script setup scripts can be directly used in markdown, and will only affect the current page --> |
| 296 | <script setup lang="ts"> |
| 297 | const final = { |
| 298 | x: 0, |
| 299 | y: 0, |
| 300 | rotate: 0, |
| 301 | scale: 1, |
| 302 | transition: { |
| 303 | type: 'spring', |
| 304 | damping: 10, |
| 305 | stiffness: 20, |
| 306 | mass: 2 |
| 307 | } |
| 308 | } |
| 309 | </script> |
| 310 | |
| 311 | <div |
| 312 | v-motion |
| 313 | :initial="{ x:35, y: 40, opacity: 0}" |
| 314 | :enter="{ y: 0, opacity: 1, transition: { delay: 3500 } }"> |
| 315 | |
| 316 | [Learn More](https://sli.dev/guide/animations.html#motion) |
| 317 | |
| 318 | </div> |
| 319 | |
| 320 | --- |
| 321 | |
| 322 | # LaTeX |
| 323 | |
| 324 | LaTeX is supported out-of-box powered by [KaTeX](https://katex.org/). |
| 325 | |
| 326 | <br> |
| 327 | |
| 328 | Inline $\sqrt{3x-1}+(1+x)^2$ |
| 329 | |
| 330 | Block |
| 331 | $$ {1|3|all} |
| 332 | \begin{array}{c} |
| 333 | |
| 334 | \nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & |
| 335 | = \frac{4\pi}{c}\vec{\mathbf{j}} \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\ |
| 336 | |
| 337 | \nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\ |
| 338 | |
| 339 | \nabla \cdot \vec{\mathbf{B}} & = 0 |
| 340 | |
| 341 | \end{array} |
| 342 | $$ |
| 343 | |
| 344 | <br> |
| 345 | |
| 346 | [Learn more](https://sli.dev/guide/syntax#latex) |
| 347 | |
| 348 | --- |
| 349 | |
| 350 | # Diagrams |
| 351 | |
| 352 | You can create diagrams / graphs from textual descriptions, directly in your Markdown. |
| 353 | |
| 354 | <div class="grid grid-cols-4 gap-5 pt-4 -mb-6"> |
| 355 | |
| 356 | ```mermaid {scale: 0.5, alt: 'A simple sequence diagram'} |
| 357 | sequenceDiagram |
| 358 | Alice->John: Hello John, how are you? |
| 359 | Note over Alice,John: A typical interaction |
| 360 | ``` |
| 361 | |
| 362 | ```mermaid {theme: 'neutral', scale: 0.8} |
| 363 | graph TD |
| 364 | B[Text] --> C{Decision} |
| 365 | C -->|One| D[Result 1] |
| 366 | C -->|Two| E[Result 2] |
| 367 | ``` |
| 368 | |
| 369 | ```mermaid |
| 370 | mindmap |
| 371 | root((mindmap)) |
| 372 | Origins |
| 373 | Long history |
| 374 | ::icon(fa fa-book) |
| 375 | Popularisation |
| 376 | British popular psychology author Tony Buzan |
| 377 | Research |
| 378 | On effectivness<br/>and features |
| 379 | On Automatic creation |
| 380 | Uses |
| 381 | Creative techniques |
| 382 | Strategic planning |
| 383 | Argument mapping |
| 384 | Tools |
| 385 | Pen and paper |
| 386 | Mermaid |
| 387 | ``` |
| 388 | |
| 389 | ```plantuml {scale: 0.7} |
| 390 | @startuml |
| 391 | |
| 392 | package "Some Group" { |
| 393 | HTTP - [First Component] |
| 394 | [Another Component] |
| 395 | } |
| 396 | |
| 397 | node "Other Groups" { |
| 398 | FTP - [Second Component] |
| 399 | [First Component] --> FTP |
| 400 | } |
| 401 | |
| 402 | cloud { |
| 403 | [Example 1] |
| 404 | } |
| 405 | |
| 406 | database "MySql" { |
| 407 | folder "This is my folder" { |
| 408 | [Folder 3] |
| 409 | } |
| 410 | frame "Foo" { |
| 411 | [Frame 4] |
| 412 | } |
| 413 | } |
| 414 | |
| 415 | [Another Component] --> [Example 1] |
| 416 | [Example 1] --> [Folder 3] |
| 417 | [Folder 3] --> [Frame 4] |
| 418 | |
| 419 | @enduml |
| 420 | ``` |
| 421 | |
| 422 | </div> |
| 423 | |
| 424 | [Learn More](https://sli.dev/guide/syntax.html#diagrams) |
| 425 | |
| 426 | --- |
| 427 | layout: center |
| 428 | class: text-center |
| 429 | --- |
| 430 | |
| 431 | # Learn More |
| 432 | |
| 433 | [Documentation](https://sli.dev) · [GitHub](https://github.com/slidevjs/slidev) · [Showcases](https://sli.dev/showcases.html) |
| 434 |