@slidev/docs 51.8.0 → 51.8.2

package/features/code-groups.md

@@ -33,11 +33,17 @@ pnpm add @slidev/cli
 
 ## Title Icon Matching
 
-`code groups` and `code block` also supports the automatically icon matching by the title name:
+`code groups`, `code block` and [`Shiki Magic Move`](/features/shiki-magic-move) also supports the automatically icon matching by the title name.
 
 ![code-groups-demo](/assets/code-groups-demo.png)
 
-::: details All builtin icons
+::: info
+
+By default, we provide some built-in icons, you can use them by install [@iconify-json/vscode-icons](https://www.npmjs.com/package/@iconify-json/vscode-icons).
+
+:::
+
+::: details All built-in icons
 
 ```js
 const builtinIcons = {
@@ -103,26 +109,47 @@ const builtinIcons = {
 
 :::
 
-## Custom Icon
+## Custom Icons
+
+You can use any name from the [iconify](https://icones.js.org) collection by using the `~icon~` syntax, for example:
+
+````md
+```js [npm ~i-uil:github~]
+console.log('Hello, GitHub!')
+```
+````
+
+To make it work, you need to:
+
+1. Install the icon's collection.
+
+:::code-group
 
-You can also specify the icon manually by the following steps:
+```sh [npm]
+npm add @iconify-json/uil
+```
 
-1. Add the icon to the `uno.config.ts` file:
+```sh [yarn]
+yarn add @iconify-json/uil
+```
+
+```sh [pnpm]
+pnpm add @iconify-json/uil
+```
+
+```sh [bun]
+bun add @iconify-json/uil
+```
+
+:::
+
+2. Add the icon to the `uno.config.ts` file.
 
 ```ts [uno.config.ts] {3-5}
 import { defineConfig } from 'unocss'
-
 export default defineConfig({
   safelist: [
-    'i-vscode-icons:file-type-coverage',
+    'i-uil:github',
   ],
 })
 ```
-
-2. Use the icon in the code block with the `~icon~` syntax:
-
-````md
-```sh [npm ~i-vscode-icons:file-type-coverage~]
-npm i @slidev/cli
-```
-````

package/features/icons.md

@@ -39,6 +39,10 @@ yarn add @iconify-json/[the-collection-you-want]
 bun add @iconify-json/[the-collection-you-want]
 ```
 
+```bash [deno]
+deno add jsr:@iconify-json/[the-collection-you-want]
+```
+
 :::
 
 We use [Iconify](https://iconify.design) as our data source of icons. You need to install the corresponding icon-set in `dependencies` by following the `@iconify-json/*` pattern. For example, `@iconify-json/mdi` for [Material Design Icons](https://materialdesignicons.com/), `@iconify-json/tabler` for [Tabler](https://tabler-icons.io/). You can refer to [Icônes](https://icones.js.org/) or [Iconify](https://icon-sets.iconify.design/) for all the collections available.

package/features/prettier-plugin.md

@@ -32,6 +32,10 @@ yarn add -D prettier prettier-plugin-slidev
 bun add -D prettier prettier-plugin-slidev
 ```
 
+```bash [deno]
+deno add -D npm:prettier npm:prettier-plugin-slidev
+```
+
 :::
 
 ## 2. Activate the plugin

package/features/remote-access.md

@@ -34,6 +34,11 @@ bun dev --remote
 # i.e. slidev --remote
 ```
 
+```bash [deno]
+deno run dev --remote
+# i.e. slidev --remote
+```
+
 :::
 
 ## Password Protection
@@ -66,4 +71,9 @@ bun dev --remote --tunnel
 # i.e. slidev --remote --tunnel
 ```
 
+```bash [deno]
+deno run dev --remote --tunnel
+# i.e. slidev --remote --tunnel
+```
+
 :::

package/guide/exporting.md

@@ -42,6 +42,10 @@ $ yarn add -D playwright-chromium
 $ bun add -D playwright-chromium
 ```
 
+```bash [deno]
+$ deno add -D npm:playwright-chromium
+```
+
 :::
 
 ## Formats

package/guide/index.md

@@ -69,6 +69,10 @@ yarn create slidev
 bun create slidev
 ```
 
+```bash [deno]
+deno init --npm slidev
+```
+
 :::
 
 Follow the prompts to start your slides project. The slides content is in `slides.md`, which initially includes demos of most the Slidev features. For more information about the Markdown syntax, please check <LinkInline link="guide/syntax" />.
@@ -95,6 +99,10 @@ yarn global add @slidev/cli
 bun i -g @slidev/cli
 ```
 
+```bash [deno]
+deno i -g npm:@slidev/cli --name slidev
+```
+
 :::
 
 Then, you can create and start a single file slides via:

package/guide/layout.md

@@ -1,6 +1,6 @@
 # Slide Layout
 
-Layouts in Slidev are used to define the structure for each slides. They are Vue components that wrap the content of the slides.
+Layouts in Slidev are used to define the structure for each slide. They are Vue components that wrap the content of the slides.
 
 ## Using Layouts {#use}
 

package/guide/write-theme.md

@@ -24,6 +24,10 @@ $ yarn create slidev-theme
 $ bun create slidev-theme
 ```
 
+```bash [deno]
+$ deno init --npm slidev-theme
+```
+
 :::
 
 Then you can modify and play with it. You can also refer to the [official themes](../resources/theme-gallery#official-themes) as examples.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@slidev/docs",
   "type": "module",
-  "version": "51.8.0",
+  "version": "51.8.2",
   "license": "MIT",
   "funding": "https://github.com/sponsors/antfu",
   "homepage": "https://sli.dev",
@@ -17,28 +17,28 @@
   ],
   "devDependencies": {
     "@antfu/utils": "^9.2.0",
-    "@iconify/json": "^2.2.341",
-    "@shikijs/vitepress-twoslash": "^3.4.2",
-    "@types/node": "^22.15.21",
-    "@unocss/reset": "^66.1.2",
-    "@vueuse/core": "^13.2.0",
+    "@iconify/json": "^2.2.348",
+    "@shikijs/vitepress-twoslash": "^3.6.0",
+    "@types/node": "^22.15.31",
+    "@unocss/reset": "^66.2.0",
+    "@vueuse/core": "^13.3.0",
     "fast-glob": "^3.3.3",
     "gray-matter": "^4.0.3",
     "markdown-it": "^14.1.0",
-    "shiki": "^3.4.2",
+    "shiki": "^3.6.0",
     "typeit": "8.1.0",
     "typescript": "^5.8.3",
-    "unocss": "^66.1.2",
+    "unocss": "^66.2.0",
     "unplugin-icons": "^22.1.0",
-    "unplugin-vue-components": "^28.5.0",
+    "unplugin-vue-components": "^28.7.0",
     "vite-plugin-inspect": "^11.1.0",
-    "vitepress": "^2.0.0-alpha.5",
-    "vitepress-plugin-group-icons": "^1.5.5",
-    "vitepress-plugin-llms": "^1.3.3",
-    "vue": "^3.5.14",
-    "@slidev/parser": "51.8.0",
-    "@slidev/client": "51.8.0",
-    "@slidev/types": "51.8.0"
+    "vitepress": "^2.0.0-alpha.6",
+    "vitepress-plugin-group-icons": "^1.6.0",
+    "vitepress-plugin-llms": "^1.5.0",
+    "vue": "^3.5.16",
+    "@slidev/parser": "51.8.2",
+    "@slidev/client": "51.8.2",
+    "@slidev/types": "51.8.2"
   },
   "scripts": {
     "dev": "vitepress",