@slidev/docs 51.7.1 → 51.8.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/features/code-groups.md +155 -0
  2. package/guide/syntax.md +1 -0
  3. package/package.json +13 -13
package/features/code-groups.md ADDED
@@ -0,0 +1,155 @@
1
+ ---
2
+ depends:
3
+ - guide/syntax#code-block
4
+ tags: [codeblock]
5
+ description: |
6
+ Group multiple code blocks and automatically match icon by the title name.
7
+ ---
8
+
9
+ # Code Groups
10
+
11
+ > [!NOTE]
12
+ > This feature requires [MDC Syntax](/features/mdc#mdc-syntax). Enable `mdc: true` to use it.
13
+
14
+ You can group multiple code blocks like this:
15
+
16
+ ````md
17
+ ::code-group
18
+
19
+ ```sh [npm]
20
+ npm i @slidev/cli
21
+ ```
22
+
23
+ ```sh [yarn]
24
+ yarn add @slidev/cli
25
+ ```
26
+
27
+ ```sh [pnpm]
28
+ pnpm add @slidev/cli
29
+ ```
30
+
31
+ ::
32
+ ````
33
+
34
+ ## Title Icon Matching
35
+
36
+ `code groups`, `code block` and [`Shiki Magic Move`](/features/shiki-magic-move) also supports the automatically icon matching by the title name.
37
+
38
+ ![code-groups-demo](/assets/code-groups-demo.png)
39
+
40
+ ::: info
41
+
42
+ 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).
43
+
44
+ :::
45
+
46
+ ::: details All built-in icons
47
+
48
+ ```js
49
+ const builtinIcons = {
50
+ // package managers
51
+ 'pnpm': 'i-vscode-icons:file-type-light-pnpm',
52
+ 'npm': 'i-vscode-icons:file-type-npm',
53
+ 'yarn': 'i-vscode-icons:file-type-yarn',
54
+ 'bun': 'i-vscode-icons:file-type-bun',
55
+ 'deno': 'i-vscode-icons:file-type-deno',
56
+ // frameworks
57
+ 'vue': 'i-vscode-icons:file-type-vue',
58
+ 'svelte': 'i-vscode-icons:file-type-svelte',
59
+ 'angular': 'i-vscode-icons:file-type-angular',
60
+ 'react': 'i-vscode-icons:file-type-reactjs',
61
+ 'next': 'i-vscode-icons:file-type-light-next',
62
+ 'nuxt': 'i-vscode-icons:file-type-nuxt',
63
+ 'solid': 'logos:solidjs-icon',
64
+ 'astro': 'i-vscode-icons:file-type-light-astro',
65
+ // bundlers
66
+ 'rollup': 'i-vscode-icons:file-type-rollup',
67
+ 'webpack': 'i-vscode-icons:file-type-webpack',
68
+ 'vite': 'i-vscode-icons:file-type-vite',
69
+ 'esbuild': 'i-vscode-icons:file-type-esbuild',
70
+ // configuration files
71
+ 'package.json': 'i-vscode-icons:file-type-node',
72
+ 'tsconfig.json': 'i-vscode-icons:file-type-tsconfig',
73
+ '.npmrc': 'i-vscode-icons:file-type-npm',
74
+ '.editorconfig': 'i-vscode-icons:file-type-editorconfig',
75
+ '.eslintrc': 'i-vscode-icons:file-type-eslint',
76
+ '.eslintignore': 'i-vscode-icons:file-type-eslint',
77
+ 'eslint.config': 'i-vscode-icons:file-type-eslint',
78
+ '.gitignore': 'i-vscode-icons:file-type-git',
79
+ '.gitattributes': 'i-vscode-icons:file-type-git',
80
+ '.env': 'i-vscode-icons:file-type-dotenv',
81
+ '.env.example': 'i-vscode-icons:file-type-dotenv',
82
+ '.vscode': 'i-vscode-icons:file-type-vscode',
83
+ 'tailwind.config': 'vscode-icons:file-type-tailwind',
84
+ 'uno.config': 'i-vscode-icons:file-type-unocss',
85
+ 'unocss.config': 'i-vscode-icons:file-type-unocss',
86
+ '.oxlintrc': 'i-vscode-icons:file-type-oxlint',
87
+ 'vue.config': 'i-vscode-icons:file-type-vueconfig',
88
+ // filename extensions
89
+ '.mts': 'i-vscode-icons:file-type-typescript',
90
+ '.cts': 'i-vscode-icons:file-type-typescript',
91
+ '.ts': 'i-vscode-icons:file-type-typescript',
92
+ '.tsx': 'i-vscode-icons:file-type-typescript',
93
+ '.mjs': 'i-vscode-icons:file-type-js',
94
+ '.cjs': 'i-vscode-icons:file-type-js',
95
+ '.json': 'i-vscode-icons:file-type-json',
96
+ '.js': 'i-vscode-icons:file-type-js',
97
+ '.jsx': 'i-vscode-icons:file-type-js',
98
+ '.md': 'i-vscode-icons:file-type-markdown',
99
+ '.py': 'i-vscode-icons:file-type-python',
100
+ '.ico': 'i-vscode-icons:file-type-favicon',
101
+ '.html': 'i-vscode-icons:file-type-html',
102
+ '.css': 'i-vscode-icons:file-type-css',
103
+ '.scss': 'i-vscode-icons:file-type-scss',
104
+ '.yml': 'i-vscode-icons:file-type-light-yaml',
105
+ '.yaml': 'i-vscode-icons:file-type-light-yaml',
106
+ '.php': 'i-vscode-icons:file-type-php',
107
+ }
108
+ ```
109
+
110
+ :::
111
+
112
+ ## Custom Icons
113
+
114
+ You can use any name from the [iconify](https://icones.js.org) collection by using the `~icon~` syntax, for example:
115
+
116
+ ````md
117
+ ```js [npm ~i-uil:github~]
118
+ console.log('Hello, GitHub!')
119
+ ```
120
+ ````
121
+
122
+ To make it work, you need to:
123
+
124
+ 1. Install the icon's collection.
125
+
126
+ :::code-group
127
+
128
+ ```sh [npm]
129
+ npm add @iconify-json/uil
130
+ ```
131
+
132
+ ```sh [yarn]
133
+ yarn add @iconify-json/uil
134
+ ```
135
+
136
+ ```sh [pnpm]
137
+ pnpm add @iconify-json/uil
138
+ ```
139
+
140
+ ```sh [bun]
141
+ bun add @iconify-json/uil
142
+ ```
143
+
144
+ :::
145
+
146
+ 2. Add the icon to the `uno.config.ts` file.
147
+
148
+ ```ts [uno.config.ts] {3-5}
149
+ import { defineConfig } from 'unocss'
150
+ export default defineConfig({
151
+ safelist: [
152
+ 'i-uil:github',
153
+ ],
154
+ })
155
+ ```
package/guide/syntax.md CHANGED
@@ -148,6 +148,7 @@ More about code blocks:
148
148
  <LinkCard link="features/shiki-magic-move" />
149
149
  <LinkCard link="features/twoslash" />
150
150
  <LinkCard link="features/import-snippet" />
151
+ <LinkCard link="features/code-groups" />
151
152
 
152
153
  ## LaTeX Blocks {#latex-block}
153
154
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@slidev/docs",
3
3
  "type": "module",
4
- "version": "51.7.1",
4
+ "version": "51.8.1",
5
5
  "license": "MIT",
6
6
  "funding": "https://github.com/sponsors/antfu",
7
7
  "homepage": "https://sli.dev",
@@ -17,28 +17,28 @@
17
17
  ],
18
18
  "devDependencies": {
19
19
  "@antfu/utils": "^9.2.0",
20
- "@iconify/json": "^2.2.339",
20
+ "@iconify/json": "^2.2.344",
21
21
  "@shikijs/vitepress-twoslash": "^3.4.2",
22
- "@types/node": "^22.15.18",
23
- "@unocss/reset": "^66.1.2",
24
- "@vueuse/core": "^13.2.0",
22
+ "@types/node": "^22.15.29",
23
+ "@unocss/reset": "^66.1.3",
24
+ "@vueuse/core": "^13.3.0",
25
25
  "fast-glob": "^3.3.3",
26
26
  "gray-matter": "^4.0.3",
27
27
  "markdown-it": "^14.1.0",
28
28
  "shiki": "^3.4.2",
29
29
  "typeit": "8.1.0",
30
30
  "typescript": "^5.8.3",
31
- "unocss": "^66.1.2",
31
+ "unocss": "^66.1.3",
32
32
  "unplugin-icons": "^22.1.0",
33
- "unplugin-vue-components": "^28.5.0",
34
- "vite-plugin-inspect": "^11.0.1",
33
+ "unplugin-vue-components": "^28.7.0",
34
+ "vite-plugin-inspect": "^11.1.0",
35
35
  "vitepress": "^2.0.0-alpha.5",
36
36
  "vitepress-plugin-group-icons": "^1.5.5",
37
- "vitepress-plugin-llms": "^1.2.0",
38
- "vue": "^3.5.14",
39
- "@slidev/client": "51.7.1",
40
- "@slidev/types": "51.7.1",
41
- "@slidev/parser": "51.7.1"
37
+ "vitepress-plugin-llms": "^1.3.4",
38
+ "vue": "^3.5.16",
39
+ "@slidev/client": "51.8.1",
40
+ "@slidev/types": "51.8.1",
41
+ "@slidev/parser": "51.8.1"
42
42
  },
43
43
  "scripts": {
44
44
  "dev": "vitepress",