| 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 | # some information about your slides (markdown enabled) |
| 8 | title: Welcome to Slidev |
| 9 | info: | |
| 10 | ## Slidev Starter Template |
| 11 | Presentation slides for developers. |
| 12 | |
| 13 | Learn more at [Sli.dev](https://sli.dev) |
| 14 | # apply UnoCSS classes to the current slide |
| 15 | class: text-center |
| 16 | # https://sli.dev/features/drawing |
| 17 | drawings: |
| 18 | persist: false |
| 19 | # slide transition: https://sli.dev/guide/animations.html#slide-transitions |
| 20 | transition: slide-left |
| 21 | # enable Comark Syntax: https://comark.dev/syntax/markdown |
| 22 | comark: true |
| 23 | # duration of the presentation |
| 24 | duration: 35min |
| 25 | --- |
| 26 | |
| 27 | # Welcome to Slidev |
| 28 | |
| 29 | Presentation slides for developers |
| 30 | |
| 31 | <div @click="$slidev.nav.next" class="mt-12 py-1" hover:bg="white op-10"> |
| 32 | Press Space for next page <carbon:arrow-right /> |
| 33 | </div> |
| 34 | |
| 35 | <div class="abs-br m-6 text-xl"> |
| 36 | <button @click="$slidev.nav.openInEditor()" title="Open in Editor" class="slidev-icon-btn"> |
| 37 | <carbon:edit /> |
| 38 | </button> |
| 39 | <a href="https://github.com/slidevjs/slidev" target="_blank" class="slidev-icon-btn"> |
| 40 | <carbon:logo-github /> |
| 41 | </a> |
| 42 | </div> |
| 43 | |
| 44 | <!-- |
| 45 | 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) |
| 46 | --> |
| 47 | |
| 48 | --- |
| 49 | transition: fade-out |
| 50 | --- |
| 51 | |
| 52 | # What is Slidev? |
| 53 | |
| 54 | Slidev is a slides maker and presenter designed for developers, consist of the following features |
| 55 | |
| 56 | - 📝 **Text-based** - focus on the content with Markdown, and then style them later |
| 57 | - 🎨 **Themable** - themes can be shared and re-used as npm packages |
| 58 | - 🧑💻 **Developer Friendly** - code highlighting, live coding with autocompletion |
| 59 | - 🤹 **Interactive** - embed Vue components to enhance your expressions |
| 60 | - 🎥 **Recording** - built-in recording and camera view |
| 61 | - 📤 **Portable** - export to PDF, PPTX, PNGs, or even a hostable SPA |
| 62 | - 🛠 **Hackable** - virtually anything that's possible on a webpage is possible in Slidev |
| 63 | <br> |
| 64 | <br> |
| 65 | |
| 66 | Read more about [Why Slidev?](https://sli.dev/guide/why) |
| 67 | |
| 68 | <!-- |
| 69 | You can have `style` tag in markdown to override the style for the current page. |
| 70 | Learn more: https://sli.dev/features/slide-scope-style |
| 71 | --> |
| 72 | |
| 73 | <style> |
| 74 | h1 { |
| 75 | background-color: #2B90B6; |
| 76 | background-image: linear-gradient(45deg, #4EC5D4 10%, #146b8c 20%); |
| 77 | background-size: 100%; |
| 78 | -webkit-background-clip: text; |
| 79 | -moz-background-clip: text; |
| 80 | -webkit-text-fill-color: transparent; |
| 81 | -moz-text-fill-color: transparent; |
| 82 | } |
| 83 | </style> |
| 84 | |
| 85 | <!-- |
| 86 | Here is another comment. |
| 87 | --> |
| 88 | |
| 89 | --- |
| 90 | transition: slide-up |
| 91 | level: 2 |
| 92 | --- |
| 93 | |
| 94 | # Navigation |
| 95 | |
| 96 | Hover on the bottom-left corner to see the navigation's controls panel, [learn more](https://sli.dev/guide/ui#navigation-bar) |
| 97 | |
| 98 | ## Keyboard Shortcuts |
| 99 | |
| 100 | | | | |
| 101 | | --------------------------------------------------- | --------------------------- | |
| 102 | | <kbd>right</kbd> / <kbd>space</kbd> | next animation or slide | |
| 103 | | <kbd>left</kbd> / <kbd>shift</kbd><kbd>space</kbd> | previous animation or slide | |
| 104 | | <kbd>up</kbd> | previous slide | |
| 105 | | <kbd>down</kbd> | next slide | |
| 106 | |
| 107 | <!-- https://sli.dev/guide/animations.html#click-animation --> |
| 108 | <img |
| 109 | v-click |
| 110 | class="absolute -bottom-9 -left-7 w-80 opacity-50" |
| 111 | src="https://sli.dev/assets/arrow-bottom-left.svg" |
| 112 | alt="" |
| 113 | /> |
| 114 | <p v-after class="absolute bottom-23 left-45 opacity-30 transform -rotate-10">Here!</p> |
| 115 | |
| 116 | --- |
| 117 | layout: two-cols |
| 118 | layoutClass: gap-16 |
| 119 | --- |
| 120 | |
| 121 | # Table of contents |
| 122 | |
| 123 | You can use the `Toc` component to generate a table of contents for your slides: |
| 124 | |
| 125 | ```html |
| 126 | <Toc minDepth="1" maxDepth="1" /> |
| 127 | ``` |
| 128 | |
| 129 | The title will be inferred from your slide content, or you can override it with `title` and `level` in your frontmatter. |
| 130 | |
| 131 | ::right:: |
| 132 | |
| 133 | <Toc text-sm minDepth="1" maxDepth="2" /> |
| 134 | |
| 135 | --- |
| 136 | layout: image-right |
| 137 | image: https://cover.sli.dev |
| 138 | --- |
| 139 | |
| 140 | # Code |
| 141 | |
| 142 | Use code snippets and get the highlighting directly, and even types hover! |
| 143 | |
| 144 | ```ts [filename-example.ts] {all|4|6|6-7|9|all} twoslash |
| 145 | // TwoSlash enables TypeScript hover information |
| 146 | // and errors in markdown code blocks |
| 147 | // More at https://shiki.style/packages/twoslash |
| 148 | import { computed, ref } from 'vue' |
| 149 | |
| 150 | const count = ref(0) |
| 151 | const doubled = computed(() => count.value * 2) |
| 152 | |
| 153 | doubled.value = 2 |
| 154 | ``` |
| 155 | |
| 156 | <arrow v-click="[4, 5]" x1="350" y1="310" x2="195" y2="342" color="#953" width="2" arrowSize="1" /> |
| 157 | |
| 158 | <!-- This allow you to embed external code blocks --> |
| 159 | <<< @/snippets/external.ts#snippet |
| 160 | |
| 161 | <!-- Footer --> |
| 162 | |
| 163 | [Learn more](https://sli.dev/features/line-highlighting) |
| 164 | |
| 165 | <!-- Inline style --> |
| 166 | <style> |
| 167 | .footnotes-sep { |
| 168 | @apply mt-5 opacity-10; |
| 169 | } |
| 170 | .footnotes { |
| 171 | @apply text-sm opacity-75; |
| 172 | } |
| 173 | .footnote-backref { |
| 174 | display: none; |
| 175 | } |
| 176 | </style> |
| 177 | |
| 178 | <!-- |
| 179 | Notes can also sync with clicks |
| 180 | |
| 181 | [click] This will be highlighted after the first click |
| 182 | |
| 183 | [click] Highlighted with `count = ref(0)` |
| 184 | |
| 185 | [click:3] Last click (skip two clicks) |
| 186 | --> |
| 187 | |
| 188 | --- |
| 189 | level: 2 |
| 190 | --- |
| 191 | |
| 192 | # Shiki Magic Move |
| 193 | |
| 194 | Powered by [shiki-magic-move](https://shiki-magic-move.netlify.app/), Slidev supports animations across multiple code snippets. |
| 195 | |
| 196 | Add multiple code blocks and wrap them with <code>````md magic-move</code> (four backticks) to enable the magic move. For example: |
| 197 | |
| 198 | ````md magic-move {lines: true} |
| 199 | ```ts {*|2|*} |
| 200 | // step 1 |
| 201 | const author = reactive({ |
| 202 | name: 'John Doe', |
| 203 | books: [ |
| 204 | 'Vue 2 - Advanced Guide', |
| 205 | 'Vue 3 - Basic Guide', |
| 206 | 'Vue 4 - The Mystery' |
| 207 | ] |
| 208 | }) |
| 209 | ``` |
| 210 | |
| 211 | ```ts {*|1-2|3-4|3-4,8} |
| 212 | // step 2 |
| 213 | export default { |
| 214 | data() { |
| 215 | return { |
| 216 | author: { |
| 217 | name: 'John Doe', |
| 218 | books: [ |
| 219 | 'Vue 2 - Advanced Guide', |
| 220 | 'Vue 3 - Basic Guide', |
| 221 | 'Vue 4 - The Mystery' |
| 222 | ] |
| 223 | } |
| 224 | } |
| 225 | } |
| 226 | } |
| 227 | ``` |
| 228 | |
| 229 | ```ts |
| 230 | // step 3 |
| 231 | export default { |
| 232 | data: () => ({ |
| 233 | author: { |
| 234 | name: 'John Doe', |
| 235 | books: [ |
| 236 | 'Vue 2 - Advanced Guide', |
| 237 | 'Vue 3 - Basic Guide', |
| 238 | 'Vue 4 - The Mystery' |
| 239 | ] |
| 240 | } |
| 241 | }) |
| 242 | } |
| 243 | ``` |
| 244 | |
| 245 | Non-code blocks are ignored. |
| 246 | |
| 247 | ```vue |
| 248 | <!-- step 4 --> |
| 249 | <script setup> |
| 250 | const author = { |
| 251 | name: 'John Doe', |
| 252 | books: [ |
| 253 | 'Vue 2 - Advanced Guide', |
| 254 | 'Vue 3 - Basic Guide', |
| 255 | 'Vue 4 - The Mystery' |
| 256 | ] |
| 257 | } |
| 258 | </script> |
| 259 | ``` |
| 260 | ```` |
| 261 | |
| 262 | --- |
| 263 | |
| 264 | # Components |
| 265 | |
| 266 | <div grid="~ cols-2 gap-4"> |
| 267 | <div> |
| 268 | |
| 269 | You can use Vue components directly inside your slides. |
| 270 | |
| 271 | We have provided a few built-in components like `<Tweet/>`, `<BlueSky/>`, and `<Youtube/>` that you can use directly. And adding your custom components is also super easy. |
| 272 | |
| 273 | ```html |
| 274 | <Counter :count="10" /> |
| 275 | ``` |
| 276 | |
| 277 | <!-- ./components/Counter.vue --> |
| 278 | <Counter :count="10" m="t-4" /> |
| 279 | |
| 280 | Check out [the guides](https://sli.dev/builtin/components.html) for more. |
| 281 | |
| 282 | </div> |
| 283 | <div> |
| 284 | |
| 285 | ```html |
| 286 | <Tweet id="1390115482657726468" /> |
| 287 | ``` |
| 288 | |
| 289 | <Tweet id="1390115482657726468" scale="0.65" /> |
| 290 | |
| 291 | </div> |
| 292 | </div> |
| 293 | |
| 294 | <!-- |
| 295 | Presenter note with **bold**, *italic*, and ~~striked~~ text. |
| 296 | |
| 297 | Also, HTML elements are valid: |
| 298 | <div class="flex w-full"> |
| 299 | <span style="flex-grow: 1;">Left content</span> |
| 300 | <span>Right content</span> |
| 301 | </div> |
| 302 | --> |
| 303 | |
| 304 | --- |
| 305 | class: px-20 |
| 306 | --- |
| 307 | |
| 308 | # Themes |
| 309 | |
| 310 | 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: |
| 311 | |
| 312 | <div grid="~ cols-2 gap-2" m="t-2"> |
| 313 | |
| 314 | ```yaml |
| 315 | --- |
| 316 | theme: default |
| 317 | --- |
| 318 | ``` |
| 319 | |
| 320 | ```yaml |
| 321 | --- |
| 322 | theme: seriph |
| 323 | --- |
| 324 | ``` |
| 325 | |
| 326 | <img border="rounded" src="https://github.com/slidevjs/themes/blob/main/screenshots/theme-default/01.png?raw=true" alt=""> |
| 327 | |
| 328 | <img border="rounded" src="https://github.com/slidevjs/themes/blob/main/screenshots/theme-seriph/01.png?raw=true" alt=""> |
| 329 | |
| 330 | </div> |
| 331 | |
| 332 | Read more about [How to use a theme](https://sli.dev/guide/theme-addon#use-theme) and |
| 333 | check out the [Awesome Themes Gallery](https://sli.dev/resources/theme-gallery). |
| 334 | |
| 335 | --- |
| 336 | |
| 337 | # Clicks Animations |
| 338 | |
| 339 | You can add `v-click` to elements to add a click animation. |
| 340 | |
| 341 | <div v-click> |
| 342 | |
| 343 | This shows up when you press <kbd>space</kbd> or <kbd>right</kbd>, or click outside the slide on the right. |
| 344 | |
| 345 | ```html |
| 346 | <div v-click>This shows up when you trigger a click animation.</div> |
| 347 | ``` |
| 348 | |
| 349 | </div> |
| 350 | |
| 351 | <p v-click> |
| 352 | You can also add modifiers to change the animation: |
| 353 | </p> |
| 354 | |
| 355 | <div class="grid gap-3 mt-4 text-sm" style="grid-template-columns: repeat(3, 1fr) 1.5fr 1fr"> |
| 356 | <div v-after.up class="p-3 rounded border border-primary/20 bg-primary/10"> |
| 357 | <div class="font-mono text-xs opacity-60 mb-1">v-click.up</div> |
| 358 | <div>Slide from bottom</div> |
| 359 | </div> |
| 360 | <div v-click.fade-in class="p-3 rounded border border-primary/30 bg-primary/15"> |
| 361 | <div class="font-mono text-xs opacity-60 mb-1">v-click.fade-in</div> |
| 362 | <div>Fade in</div> |
| 363 | </div> |
| 364 | <div v-click.fade class="p-3 rounded border border-primary/40 bg-primary/20"> |
| 365 | <div class="font-mono text-xs opacity-60 mb-1">v-click.fade</div> |
| 366 | <div>Dim (0.5 opacity)</div> |
| 367 | </div> |
| 368 | <div v-click.fade.right.scale class="p-3 rounded border border-primary/50 bg-primary/25"> |
| 369 | <div class="font-mono text-xs opacity-60 mb-1">v-click.fade.right.scale</div> |
| 370 | <div>Composed</div> |
| 371 | </div> |
| 372 | <div v-click.none class="p-3 rounded border border-primary/60 bg-primary/30"> |
| 373 | <div class="font-mono text-xs opacity-60 mb-1">v-click.none</div> |
| 374 | <div>No transition</div> |
| 375 | </div> |
| 376 | </div> |
| 377 | |
| 378 | <v-click> |
| 379 | |
| 380 | The <span v-mark.red="7"><code>v-mark</code> directive</span> |
| 381 | also allows you to add |
| 382 | <span v-mark.circle.orange="8">inline marks</span> |
| 383 | , powered by [Rough Notation](https://roughnotation.com/): |
| 384 | |
| 385 | ```html |
| 386 | <span v-mark.underline.orange>inline markers</span> |
| 387 | ``` |
| 388 | |
| 389 | </v-click> |
| 390 | |
| 391 | <div v-click mt-12> |
| 392 | |
| 393 | [Learn more](https://sli.dev/guide/animations#click-animation) |
| 394 | |
| 395 | </div> |
| 396 | |
| 397 | --- |
| 398 | |
| 399 | # Motions |
| 400 | |
| 401 | Motion animations are powered by [@vueuse/motion](https://motion.vueuse.org/), triggered by `v-motion` directive. |
| 402 | |
| 403 | ```html |
| 404 | <div |
| 405 | v-motion |
| 406 | :initial="{ x: -80 }" |
| 407 | :enter="{ x: 0 }" |
| 408 | :click-3="{ x: 80 }" |
| 409 | :leave="{ x: 1000 }" |
| 410 | > |
| 411 | Slidev |
| 412 | </div> |
| 413 | ``` |
| 414 | |
| 415 | <div class="w-60 relative"> |
| 416 | <div class="relative w-40 h-40"> |
| 417 | <img |
| 418 | v-motion |
| 419 | :initial="{ x: 800, y: -100, scale: 1.5, rotate: -50 }" |
| 420 | :enter="final" |
| 421 | class="absolute inset-0" |
| 422 | src="https://sli.dev/logo-square.png" |
| 423 | alt="" |
| 424 | /> |
| 425 | <img |
| 426 | v-motion |
| 427 | :initial="{ y: 500, x: -100, scale: 2 }" |
| 428 | :enter="final" |
| 429 | class="absolute inset-0" |
| 430 | src="https://sli.dev/logo-circle.png" |
| 431 | alt="" |
| 432 | /> |
| 433 | <img |
| 434 | v-motion |
| 435 | :initial="{ x: 600, y: 400, scale: 2, rotate: 100 }" |
| 436 | :enter="final" |
| 437 | class="absolute inset-0" |
| 438 | src="https://sli.dev/logo-triangle.png" |
| 439 | alt="" |
| 440 | /> |
| 441 | </div> |
| 442 | |
| 443 | <div |
| 444 | class="text-5xl absolute top-14 left-40 text-[#2B90B6] -z-1" |
| 445 | v-motion |
| 446 | :initial="{ x: -80, opacity: 0}" |
| 447 | :enter="{ x: 0, opacity: 1, transition: { delay: 2000, duration: 1000 } }"> |
| 448 | Slidev |
| 449 | </div> |
| 450 | </div> |
| 451 | |
| 452 | <!-- vue script setup scripts can be directly used in markdown, and will only affects current page --> |
| 453 | <script setup lang="ts"> |
| 454 | const final = { |
| 455 | x: 0, |
| 456 | y: 0, |
| 457 | rotate: 0, |
| 458 | scale: 1, |
| 459 | transition: { |
| 460 | type: 'spring', |
| 461 | damping: 10, |
| 462 | stiffness: 20, |
| 463 | mass: 2 |
| 464 | } |
| 465 | } |
| 466 | </script> |
| 467 | |
| 468 | <div |
| 469 | v-motion |
| 470 | :initial="{ x:35, y: 30, opacity: 0}" |
| 471 | :enter="{ y: 0, opacity: 1, transition: { delay: 3500 } }"> |
| 472 | |
| 473 | [Learn more](https://sli.dev/guide/animations.html#motion) |
| 474 | |
| 475 | </div> |
| 476 | |
| 477 | --- |
| 478 | |
| 479 | # $\LaTeX$ |
| 480 | |
| 481 | $\LaTeX$ is supported out-of-box. Powered by [$\KaTeX$](https://katex.org/). |
| 482 | |
| 483 | <div h-3 /> |
| 484 | |
| 485 | Inline $\sqrt{3x-1}+(1+x)^2$ |
| 486 | |
| 487 | Block |
| 488 | $$ {1|3|all} |
| 489 | \begin{aligned} |
| 490 | \nabla \cdot \vec{E} &= \frac{\rho}{\varepsilon_0} \\ |
| 491 | \nabla \cdot \vec{B} &= 0 \\ |
| 492 | \nabla \times \vec{E} &= -\frac{\partial\vec{B}}{\partial t} \\ |
| 493 | \nabla \times \vec{B} &= \mu_0\vec{J} + \mu_0\varepsilon_0\frac{\partial\vec{E}}{\partial t} |
| 494 | \end{aligned} |
| 495 | $$ |
| 496 | |
| 497 | [Learn more](https://sli.dev/features/latex) |
| 498 | |
| 499 | --- |
| 500 | |
| 501 | # Diagrams |
| 502 | |
| 503 | You can create diagrams / graphs from textual descriptions, directly in your Markdown. |
| 504 | |
| 505 | <div class="grid grid-cols-4 gap-5 pt-4 -mb-6"> |
| 506 | |
| 507 | ```mermaid {scale: 0.5, alt: 'A simple sequence diagram'} |
| 508 | sequenceDiagram |
| 509 | Alice->John: Hello John, how are you? |
| 510 | Note over Alice,John: A typical interaction |
| 511 | ``` |
| 512 | |
| 513 | ```mermaid {theme: 'neutral', scale: 0.8} |
| 514 | graph TD |
| 515 | B[Text] --> C{Decision} |
| 516 | C -->|One| D[Result 1] |
| 517 | C -->|Two| E[Result 2] |
| 518 | ``` |
| 519 | |
| 520 | ```mermaid |
| 521 | mindmap |
| 522 | root((mindmap)) |
| 523 | Origins |
| 524 | Long history |
| 525 | ::icon(fa fa-book) |
| 526 | Popularisation |
| 527 | British popular psychology author Tony Buzan |
| 528 | Research |
| 529 | On effectiveness<br/>and features |
| 530 | On Automatic creation |
| 531 | Uses |
| 532 | Creative techniques |
| 533 | Strategic planning |
| 534 | Argument mapping |
| 535 | Tools |
| 536 | Pen and paper |
| 537 | Mermaid |
| 538 | ``` |
| 539 | |
| 540 | ```plantuml {scale: 0.7} |
| 541 | @startuml |
| 542 | |
| 543 | package "Some Group" { |
| 544 | HTTP - [First Component] |
| 545 | [Another Component] |
| 546 | } |
| 547 | |
| 548 | node "Other Groups" { |
| 549 | FTP - [Second Component] |
| 550 | [First Component] --> FTP |
| 551 | } |
| 552 | |
| 553 | cloud { |
| 554 | [Example 1] |
| 555 | } |
| 556 | |
| 557 | database "MySql" { |
| 558 | folder "This is my folder" { |
| 559 | [Folder 3] |
| 560 | } |
| 561 | frame "Foo" { |
| 562 | [Frame 4] |
| 563 | } |
| 564 | } |
| 565 | |
| 566 | [Another Component] --> [Example 1] |
| 567 | [Example 1] --> [Folder 3] |
| 568 | [Folder 3] --> [Frame 4] |
| 569 | |
| 570 | @enduml |
| 571 | ``` |
| 572 | |
| 573 | </div> |
| 574 | |
| 575 | Learn more: [Mermaid Diagrams](https://sli.dev/features/mermaid) and [PlantUML Diagrams](https://sli.dev/features/plantuml) |
| 576 | |
| 577 | --- |
| 578 | foo: bar |
| 579 | dragPos: |
| 580 | square: 691,32,167,_,-16 |
| 581 | --- |
| 582 | |
| 583 | # Draggable Elements |
| 584 | |
| 585 | Double-click on the draggable elements to edit their positions. |
| 586 | |
| 587 | <br> |
| 588 | |
| 589 | ###### Directive Usage |
| 590 | |
| 591 | ```md |
| 592 | <img v-drag="'square'" src="https://sli.dev/logo.png"> |
| 593 | ``` |
| 594 | |
| 595 | <br> |
| 596 | |
| 597 | ###### Component Usage |
| 598 | |
| 599 | ```md |
| 600 | <v-drag text-3xl> |
| 601 | <div class="i-carbon:arrow-up" /> |
| 602 | Use the `v-drag` component to have a draggable container! |
| 603 | </v-drag> |
| 604 | ``` |
| 605 | |
| 606 | <v-drag pos="663,206,261,_,-15"> |
| 607 | <div text-center text-3xl border border-main rounded> |
| 608 | Double-click me! |
| 609 | </div> |
| 610 | </v-drag> |
| 611 | |
| 612 | <img v-drag="'square'" src="https://sli.dev/logo.png"> |
| 613 | |
| 614 | ###### Draggable Arrow |
| 615 | |
| 616 | ```md |
| 617 | <v-drag-arrow two-way /> |
| 618 | ``` |
| 619 | |
| 620 | <v-drag-arrow pos="67,452,253,46" two-way op70 /> |
| 621 | |
| 622 | --- |
| 623 | src: ./pages/imported-slides.md |
| 624 | hide: false |
| 625 | --- |
| 626 | |
| 627 | --- |
| 628 | |
| 629 | # Monaco Editor |
| 630 | |
| 631 | Slidev provides built-in Monaco Editor support. |
| 632 | |
| 633 | Add `{monaco}` to the code block to turn it into an editor: |
| 634 | |
| 635 | ```ts {monaco} |
| 636 | import { ref } from 'vue' |
| 637 | import { emptyArray } from './external' |
| 638 | |
| 639 | const arr = ref(emptyArray(10)) |
| 640 | ``` |
| 641 | |
| 642 | Use `{monaco-run}` to create an editor that can execute the code directly in the slide: |
| 643 | |
| 644 | ```ts {monaco-run} |
| 645 | import { version } from 'vue' |
| 646 | import { emptyArray, sayHello } from './external' |
| 647 | |
| 648 | sayHello() |
| 649 | console.log(`vue ${version}`) |
| 650 | console.log(emptyArray<number>(10).reduce(fib => [...fib, fib.at(-1)! + fib.at(-2)!], [1, 1])) |
| 651 | ``` |
| 652 | |
| 653 | --- |
| 654 | layout: center |
| 655 | class: text-center |
| 656 | --- |
| 657 | |
| 658 | # Learn More |
| 659 | |
| 660 | [Documentation](https://sli.dev) · [GitHub](https://github.com/slidevjs/slidev) · [Showcases](https://sli.dev/resources/showcases) |
| 661 | |
| 662 | <PoweredBySlidev mt-10 /> |
| 663 |