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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "create-slidev",
   "type": "module",
-  "version": "0.48.0-beta.22",
+  "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.22",
+    "@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
@@ -558,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'
@@ -566,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