create-slidev 0.48.0-beta.21 → 0.48.0-beta.23

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "create-slidev",
   "type": "module",
-  "version": "0.48.0-beta.21",
+  "version": "0.48.0-beta.23",
   "description": "Create starter template for Slidev",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",

package/template/package.json

@@ -8,7 +8,7 @@
     "export": "slidev export"
   },
   "dependencies": {
-    "@slidev/cli": "^0.48.0-beta.21",
+    "@slidev/cli": "^0.48.0-beta.23",
     "@slidev/theme-default": "latest",
     "@slidev/theme-seriph": "latest",
     "vue": "^3.4.21"

package/template/slides.md

@@ -1,23 +1,27 @@
 ---
+# try also 'default' to start simple
 theme: seriph
-background: https://source.unsplash.com/collection/94734566/1920x1080
-class: text-center
-highlighter: shiki
-lineNumbers: false
+# random image from a curated Unsplash collection by Anthony
+# like them? see https://unsplash.com/collections/94734566/slidev
+background: https://cover.sli.dev
+# some information about your slides, markdown enabled
+title: Welcome to Slidev
 info: |
   ## Slidev Starter Template
   Presentation slides for developers.
 
   Learn more at [Sli.dev](https://sli.dev)
+# apply any unocss classes to the current slide
+class: text-center
+# https://sli.dev/custom/highlighters.html
+highlighter: shiki
+# https://sli.dev/guide/drawing
 drawings:
   persist: false
-defaults:
-  foo: true
+# slide transition: https://sli.dev/guide/animations#slide-transitions
 transition: slide-left
-title: Welcome to Slidev
+# enable MDC Syntax: https://sli.dev/guide/syntax#mdc-syntax
 mdc: true
-monaco: true
-monacoTypesSource: local # or cdn or none
 ---
 
 # Welcome to Slidev
@@ -127,7 +131,7 @@ Hover on the bottom-left corner to see the navigation's controls panel, [learn m
 
 ---
 layout: image-right
-image: https://source.unsplash.com/collection/94734566/1920x1080
+image: https://cover.sli.dev
 ---
 
 # Code
@@ -191,7 +195,8 @@ Powered by [shiki-magic-move](https://shiki-magic-move.netlify.app/), Slidev sup
 Add multiple code blocks and wrap them with <code>````md magic-move</code> (four backticks) to enable the magic move. For example:
 
 ````md magic-move
-```ts
+```ts {*|2|*}
+// step 1
 const author = reactive({
   name: 'John Doe',
   books: [
@@ -202,7 +207,8 @@ const author = reactive({
 })
 ```
 
-```ts
+```ts {*|1-2|3-4|3-4,8}
+// step 2
 export default {
   data() {
     return {
@@ -220,6 +226,7 @@ export default {
 ```
 
 ```ts
+// step 3
 export default {
   data: () => ({
     author: {
@@ -233,6 +240,22 @@ export default {
   })
 }
 ```
+
+Non-code blocks are ignored.
+
+```vue
+<!-- step 4 -->
+<script setup>
+const author = {
+  name: 'John Doe',
+  books: [
+    'Vue 2 - Advanced Guide',
+    'Vue 3 - Basic Guide',
+    'Vue 4 - The Mystery'
+  ]
+}
+</script>
+```
 ````
 
 ---
@@ -539,6 +562,10 @@ hide: false
 
 # Monaco Editor
 
+Slidev provides built-in Moanco Editor support.
+
+Add `{monaco}` to the code block to turn it into an editor:
+
 ```ts {monaco}
 import { ref } from 'vue'
 import hello from './external'
@@ -547,6 +574,18 @@ const code = ref('const a = 1')
 hello()
 ```
 
+Use `{monaco-run}` to create an editor that can execute the code directly in the slide:
+
+```ts {monaco-run}
+function fibonacci(n: number): number {
+  return n <= 1
+    ? n
+    : fibonacci(n - 1) + fibonacci(n - 2) // you know, this is NOT the best way to do it :P
+}
+
+console.log(Array.from({ length: 10 }, (_, i) => fibonacci(i + 1)))
+```
+
 ---
 layout: center
 class: text-center