[site]Add code group and update some document.

README.md

@@ -61,7 +61,7 @@ Mobile web component library based on [Svelte](https://svelte.dev) and [Tailwind
 
 If you have a project configured with Svelte and Tailwind, install directly.
 
-```bash
+```sh
 pnpm i stdf -D
 # or
 npm i stdf -D
@@ -84,7 +84,7 @@ import { Button } from 'stdf';
 
 You can try using [create-stdf](https://www.npmjs.com/package/create-stdf) to quickly create a project.
 
-```bash
+```sh
 pnpm create stdf
 # or
 npm create stdf@latest

README_CN.md

@@ -63,7 +63,7 @@
 
 已有配置好 Svelte 与 Tailwind 的工程，直接安装。
 
-```bash
+```sh
 pnpm i stdf -D
 # or
 npm i stdf -D
@@ -86,7 +86,7 @@ import { Button } from 'stdf';
 
 可以尝试使用 [create-stdf](https://www.npmjs.com/package/create-stdf) 快速创建工程。
 
-```bash
+```sh
 pnpm create stdf
 # or
 npm create stdf@latest

demo/README.md

@@ -10,7 +10,7 @@ It is built with [SvelteKit](https://kit.svelte.dev) + [Tailwind CSS](https://ta
 
 Install the dependencies...
 
-```bash
+```sh
 pnpm i
 # or
 npm i
@@ -20,7 +20,7 @@ bun i
 
 Start the development server...
 
-```bash
+```sh
 pnpm dev
 # or
 npm run dev

doc/guide/contribution.md

@@ -29,41 +29,91 @@
 
 > 由于 Demo 依赖的 rollup-plugin-stdf-icon 包是本地构建的，所以请先构建一下这个包。
 
-```bash
+<!-- :::code-groups -->
+<!-- pnpm -->
+```sh
 ## 1. 克隆 STDF 仓库并进入
 git clone git@github.com:any-tdf/stdf.git
 cd stdf
 
 ## 2. 构建 rollup-plugin-stdf-icon 包
 cd packages/rollup-plugin-stdf-icon
+## 安装依赖
+pnpm i
+## 构建包
+pnpm build
 
+## 3. 使用 Demo 工程调试 STDF
+cd demo
 ## 安装依赖
 pnpm i
-## or
-npm i
-## or
-bun i
+## 启动 Demo
+pnpm dev
+```
+<!-- :: -->
+<!-- npm -->
+```sh
+## 1. 克隆 STDF 仓库并进入
+git clone git@github.com:any-tdf/stdf.git
+cd stdf
 
+## 2. 构建 rollup-plugin-stdf-icon 包
+cd packages/rollup-plugin-stdf-icon
+## 安装依赖
+npm i
 ## 构建包
 npm run build
-## or
-bun run build
 
 ## 3. 使用 Demo 工程调试 STDF
 cd demo
-
 ## 安装依赖
-pnpm i
-## or
 npm i
-## or
+## 启动 Demo
+npm run dev
+```
+<!-- :: -->
+<!-- bun -->
+```sh
+## 1. 克隆 STDF 仓库并进入
+git clone git@github.com:any-tdf/stdf.git
+cd stdf
+
+## 2. 构建 rollup-plugin-stdf-icon 包
+cd packages/rollup-plugin-stdf-icon
+## 安装依赖
 bun i
+## 构建包
+bun build
 
+## 3. 使用 Demo 工程调试 STDF
+cd demo
+## 安装依赖
+bun i
 ## 启动 Demo
-npm run dev
-## or
 bun dev
 ```
+<!-- :: -->
+<!-- yarn -->
+```sh
+## 1. 克隆 STDF 仓库并进入
+git clone git@github.com:any-tdf/stdf.git
+cd stdf
+
+## 2. 构建 rollup-plugin-stdf-icon 包
+cd packages/rollup-plugin-stdf-icon
+## 安装依赖
+yarn
+## 构建包
+yarn build
+
+## 3. 使用 Demo 工程调试 STDF
+cd demo
+## 安装依赖
+yarn
+## 启动 Demo
+yarn dev
+```
+<!-- ::: -->
 
 启动成功之后，可在浏览器中打开 `http://localhost:8888` 查看效果，请将浏览器的开发者工具切换为移动端模式。
 

doc/guide/contribution_en.md

@@ -27,41 +27,91 @@ Recommended installations:
 
 > Because the rollup-plugin-stdf-icon packages that the demo depends on are locally built, please build this packages first.
 
-```bash
+<!-- :::code-groups -->
+<!-- pnpm -->
+```sh
 ## 1. Clone the STDF repository and enter
 git clone git@github.com:any-tdf/stdf.git
 cd stdf
 
 ## 2. Build the rollup-plugin-stdf-icon package
 cd packages/rollup-plugin-stdf-icon
+## Install dependencies
+pnpm i
+## Build package
+pnpm build
 
+## 3. Use the Demo project to debug STDF
+cd demo
 ## Install dependencies
 pnpm i
-## or
-npm i
-## or
-bun i
+## Start Demo
+pnpm dev
+```
+<!-- :: -->
+<!-- npm -->
+```sh
+## 1. Clone the STDF repository and enter
+git clone git@github.com:any-tdf/stdf.git
+cd stdf
 
+## 2. Build the rollup-plugin-stdf-icon package
+cd packages/rollup-plugin-stdf-icon
+## Install dependencies
+npm i
 ## Build package
 npm run build
-## or
-bun run build
 
 ## 3. Use the Demo project to debug STDF
 cd demo
-
 ## Install dependencies
-pnpm i
-## or
 npm i
-## or
+## Start Demo
+npm run dev
+```
+<!-- :: -->
+<!-- bun -->
+```sh
+## 1. Clone the STDF repository and enter
+git clone git@github.com:any-tdf/stdf.git
+cd stdf
+
+## 2. Build the rollup-plugin-stdf-icon package
+cd packages/rollup-plugin-stdf-icon
+## Install dependencies
 bun i
+## Build package
+bun build
 
+## 3. Use the Demo project to debug STDF
+cd demo
+## Install dependencies
+bun i
+## Start Demo
+bun dev
+```
+<!-- :: -->
+<!-- yarn -->
+```sh
+## 1. Clone the STDF repository and enter
+git clone git@github.com:any-tdf/stdf.git
+cd stdf
+
+## 2. Build the rollup-plugin-stdf-icon package
+cd packages/rollup-plugin-stdf-icon
+## Install dependencies
+yarn
+## Build package
+yarn build
+
+## 3. Use the Demo project to debug STDF
+cd demo
+## Install dependencies
+yarn
 ## Start Demo
-npm run dev_en
-## or
-bun dev_en
+yarn dev
 ```
+<!-- ::: -->
 
 After the startup is successful, you can open `http://localhost:8888` in the browser to view the effect. Please switch the developer tools of the browser to the mobile mode.
 

doc/guide/quickStart.md

@@ -6,13 +6,27 @@
 
 已有配置好 Svelte 与 Tailwind 的工程，直接安装。
 
-```bash
+<!-- :::code-groups -->
+<!-- pnpm -->
+```sh
 pnpm i stdf -D
-# or
+```
+<!-- :: -->
+<!-- npm -->
+```sh
 npm i stdf -D
-# or
-bun i stdf -D
 ```
+<!-- :: -->
+<!-- bun -->
+```sh
+bun add stdf -D
+```
+<!-- :: -->
+<!-- yarn -->
+```sh
+yarn add stdf -D
+```
+<!-- ::: -->
 
 ### 在 Svelte 中使用
 
@@ -31,25 +45,57 @@ bun i stdf -D
 
 可以尝试使用 [create-stdf](https://www.npmjs.com/package/create-stdf) 快速创建工程。
 
-```bash
+<!-- :::code-groups -->
+<!-- pnpm -->
+```sh
 pnpm create stdf
-# or
+```
+<!-- :: -->
+<!-- npm -->
+```sh
 npm create stdf@latest
-# or
+# 或
 npm init stdf@latest
-# or
+# 或
 npx create-stdf@latest
-# or
+```
+<!-- :: -->
+<!-- bun -->
+```sh
 bun create stdf
 ```
+<!-- :: -->
+<!-- yarn -->
+```sh
+yarn create stdf
+```
+<!-- ::: -->
 
 ### 自行搭建工程
 
 此处用 Vite 示例创建工程，参考 [Vite 文档](https://cn.vitejs.dev/guide/#scaffolding-your-first-vite-project)。
 
+<!-- :::code-groups -->
+<!-- pnpm -->
+```sh
+pnpm create vite
+```
+<!-- :: -->
+<!-- npm -->
 ```sh
 npm create vite@latest
 ```
+<!-- :: -->
+<!-- bun -->
+```sh
+bun create vite
+```
+<!-- :: -->
+<!-- yarn -->
+```sh
+yarn create vite
+```
+<!-- ::: -->
 
 按照提示操作创建工程。
 

doc/guide/quickStart_en.md

@@ -6,13 +6,27 @@
 
 Svelte and Tailwind have been configured for direct installation.
 
-```bash
+<!-- :::code-groups -->
+<!-- pnpm -->
+```sh
 pnpm i stdf -D
-# or
+```
+<!-- :: -->
+<!-- npm -->
+```sh
 npm i stdf -D
-# or
-bun i stdf -D
 ```
+<!-- :: -->
+<!-- bun -->
+```sh
+bun add stdf -D
+```
+<!-- :: -->
+<!-- yarn -->
+```sh
+yarn add stdf -D
+```
+<!-- ::: -->
 
 ### Used in Svelte
 
@@ -31,25 +45,57 @@ bun i stdf -D
 
 You can try using [create-stdf](https://www.npmjs.com/package/create-stdf) to quickly create a project.
 
-```bash
+<!-- :::code-groups -->
+<!-- pnpm -->
+```sh
 pnpm create stdf
-# or
+```
+<!-- :: -->
+<!-- npm -->
+```sh
 npm create stdf@latest
 # or
 npm init stdf@latest
 # or
 npx create-stdf@latest
-# or
+```
+<!-- :: -->
+<!-- bun -->
+```sh
 bun create stdf
 ```
+<!-- :: -->
+<!-- yarn -->
+```sh
+yarn create stdf
+```
+<!-- ::: -->
 
 ### Build your own project
 
 Use the Vite example to create the project here. See [Vite documentation](https://vitejs.dev/guide/#scaffolding-your-first-vite-project).
 
+<!-- :::code-groups -->
+<!-- pnpm -->
+```sh
+pnpm create vite
+```
+<!-- :: -->
+<!-- npm -->
 ```sh
 npm create vite@latest
 ```
+<!-- :: -->
+<!-- bun -->
+```sh
+bun create vite
+```
+<!-- :: -->
+<!-- yarn -->
+```sh
+yarn create vite
+```
+<!-- ::: -->
 
 Follow the prompts to create a project.
 

packages/create-stdf/README.md

@@ -4,61 +4,89 @@
 
 A CLI for creating new [STDF](https://stdf.design) projects. Just run...
 
-With PNPM:
-
-```bash
+<!-- :::code-groups -->
+<!-- pnpm -->
+```sh
 pnpm create stdf
 ```
-
-With NPM:
-
-```bash
+<!-- :: -->
+<!-- npm -->
+```sh
 npm create stdf@latest
 # or
 npm init stdf@latest
 # or
 npx create-stdf@latest
 ```
-
-With BUN:
-
-```bash
+<!-- :: -->
+<!-- bun -->
+```sh
 bun create stdf
 ```
+<!-- :: -->
+<!-- yarn -->
+```sh
+yarn create stdf
+```
+<!-- ::: -->
 
 ...and follow the prompts.
 
 You can also directly specify the project name and the template you want to use via additional command line options. For example, to create a new project named `my-app` using the **SvelteKit + Tailwind + STDF** template, run:
 
-```bash
-# pnpm
+<!-- :::code-groups -->
+<!-- pnpm -->
+```sh
 pnpm create stdf my-app
-
-# npm
+```
+<!-- :: -->
+<!-- npm -->
+```sh
 npm create stdf@latest my-app
-
-# bun
+```
+<!-- :: -->
+<!-- bun -->
+```sh
 bun create stdf my-app
 ```
+<!-- :: -->
+<!-- yarn -->
+```sh
+yarn create stdf my-app
+```
+<!-- ::: -->
 
 If you want to use the **Vite + UnoCSS + Svelte + STDF** template, run:
 
-```bash
-# pnpm
+<!-- :::code-groups -->
+<!-- pnpm -->
+```sh
 pnpm create stdf my-app --template vu
 # or
 pnpm create stdf my-app -t vu
-
-# npm
+```
+<!-- :: -->
+<!-- npm -->
+```sh
 npm create stdf@latest my-app --template vu
 # or
 npm create stdf@latest my-app -t vu
-
-# bun
+```
+<!-- :: -->
+<!-- bun -->
+```sh
 bun create stdf my-app -template vu
 # or
 bun create stdf my-app -t vu
 ```
+<!-- :: -->
+<!-- yarn -->
+```sh
+yarn create stdf my-app --template vu
+# or
+yarn create stdf my-app -t vu
+```
+<!-- ::: -->
 
 Template presets include:
 
@@ -98,9 +126,27 @@ Template presets include:
 
 For example:
 
-```bash
+<!-- :::code-groups -->
+<!-- pnpm -->
+```sh
 pnpm create stdf my-app -l zh_CN
 ```
+<!-- :: -->
+<!-- npm -->
+```sh
+npm create stdf@latest my-app -l zh_CN
+```
+<!-- :: -->
+<!-- bun -->
+```sh
+bun create stdf my-app -l zh_CN
+```
+<!-- :: -->
+<!-- yarn -->
+```sh
+yarn create stdf my-app -l zh_CN
+```
+<!-- ::: -->
 
 # License
 

packages/create-stdf/README_CN.md

@@ -4,61 +4,89 @@
 
 一个用于创建新的 [STDF](https://stdf.design) 项目的命令行工具。只需运行以下命令...
 
-使用 PNPM：
-
-```bash
+<!-- :::code-groups -->
+<!-- pnpm -->
+```sh
 pnpm create stdf
 ```
-
-使用 NPM：
-
-```bash
+<!-- :: -->
+<!-- npm -->
+```sh
 npm create stdf@latest
-# 或者
+# 或
 npm init stdf@latest
-# 或者
+# 或
 npx create-stdf@latest
 ```
-
-使用 BUN：
-
-```bash
+<!-- :: -->
+<!-- bun -->
+```sh
 bun create stdf
 ```
+<!-- :: -->
+<!-- yarn -->
+```sh
+yarn create stdf
+```
+<!-- ::: -->
 
 ...然后按照提示进行操作。
 
 你也可以通过额外的命令行选项直接指定项目名称和要使用的模板。例如，如果要使用 **SvelteKit + Tailwind + STDF** 模板创建一个名为 `my-app` 的新项目，请运行：
 
-```bash
-# pnpm
+<!-- :::code-groups -->
+<!-- pnpm -->
+```sh
 pnpm create stdf my-app
-
-# npm
+```
+<!-- :: -->
+<!-- npm -->
+```sh
 npm create stdf@latest my-app
-
-# bun
+```
+<!-- :: -->
+<!-- bun -->
+```sh
 bun create stdf my-app
 ```
+<!-- :: -->
+<!-- yarn -->
+```sh
+yarn create stdf my-app
+```
+<!-- ::: -->
 
 如果要使用 **Vite + UnoCSS + Svelte + STDF** 模板，请运行：
 
-```bash
-# pnpm
+<!-- :::code-groups -->
+<!-- pnpm -->
+```sh
 pnpm create stdf my-app --template vu
-# 或者
+# 或
 pnpm create stdf my-app -t vu
-
-# npm
+```
+<!-- :: -->
+<!-- npm -->
+```sh
 npm create stdf@latest my-app --template vu
-# 或者
+# 或
 npm create stdf@latest my-app -t vu
-
-# bun
+```
+<!-- :: -->
+<!-- bun -->
+```sh
 bun create stdf my-app -template vu
-# 或者
+# 或
 bun create stdf my-app -t vu
 ```
+<!-- :: -->
+<!-- yarn -->
+```sh
+yarn create stdf my-app --template vu
+# 或
+yarn create stdf my-app -t vu
+```
+<!-- ::: -->
 
 模板预设包括：
 
@@ -98,9 +126,27 @@ bun create stdf my-app -t vu
 
 例如：
 
-```bash
+<!-- :::code-groups -->
+<!-- pnpm -->
+```sh
 pnpm create stdf my-app -l zh_CN
 ```
+<!-- :: -->
+<!-- npm -->
+```sh
+npm create stdf@latest my-app -l zh_CN
+```
+<!-- :: -->
+<!-- bun -->
+```sh
+bun create stdf my-app -l zh_CN
+```
+<!-- :: -->
+<!-- yarn -->
+```sh
+yarn create stdf my-app -l zh_CN
+```
+<!-- ::: -->
 
 # 许可证
 

packages/rollup-plugin-stdf-icon/README.md

@@ -8,23 +8,27 @@ For more information about the STDF Icon component, please refer to the [Icon Gu
 
 # Installation
 
-Using PNPM:
-
-```bash
+<!-- :::code-groups -->
+<!-- pnpm -->
+```sh
 pnpm i rollup-plugin-stdf-icon -D
 ```
-
-Using NPM:
-
-```bash
+<!-- :: -->
+<!-- npm -->
+```sh
 npm i rollup-plugin-stdf-icon -D
 ```
-
-With BUN:
-
-```bash
-bun i rollup-plugin-stdf-icon -D
+<!-- :: -->
+<!-- bun -->
+```sh
+bun add rollup-plugin-stdf-icon -D
+```
+<!-- :: -->
+<!-- yarn -->
+```sh
+yarn add rollup-plugin-stdf-icon -D
 ```
+<!-- ::: -->
 
 # Usage
 

packages/rollup-plugin-stdf-icon/README_CN.md

@@ -8,23 +8,27 @@
 
 # 安装
 
-使用 PNPM：
-
-```bash
+<!-- :::code-groups -->
+<!-- pnpm -->
+```sh
 pnpm i rollup-plugin-stdf-icon -D
 ```
-
-使用 NPM：
-
-```bash
+<!-- :: -->
+<!-- npm -->
+```sh
 npm i rollup-plugin-stdf-icon -D
 ```
-
-使用 BUN：
-
-```bash
-bun i rollup-plugin-stdf-icon -D
+<!-- :: -->
+<!-- bun -->
+```sh
+bun add rollup-plugin-stdf-icon -D
+```
+<!-- :: -->
+<!-- yarn -->
+```sh
+yarn add rollup-plugin-stdf-icon -D
 ```
+<!-- ::: -->
 
 # 使用
 

site/src/pages/guide/Contribution.svelte

@@ -1,12 +1,14 @@
 <script>
-	import { mdTextToHljs } from '../../utils/index';
+	import { mdTextToHljs, groupIconMdPlugin } from '../../utils/index';
 	import { isWideScreenStore } from '../../store';
 
+	// @ts-ignore
 	import text from '../../../../doc/guide/contribution.md';
+	// @ts-ignore
 	import text_en from '../../../../doc/guide/contribution_en.md';
 
 	const isZh = localStorage.getItem('lang') === 'zh_CN';
-	const hljsText = mdTextToHljs((isZh ? text : text_en).replace(/<a href="/g, '<a target="_blank" href="'));
+	const hljsText = groupIconMdPlugin(mdTextToHljs(isZh ? text : text_en).replace(/<a href="/g, '<a target="_blank" href="'));
 </script>
 
 <article

site/src/pages/guide/Create.svelte

@@ -0,0 +1,22 @@
+<script>
+	import { mdTextToHljs, groupIconMdPlugin } from '../../utils/index';
+	import { isWideScreenStore } from '../../store';
+
+	// @ts-ignore
+	import createText from '../../../../packages/create-stdf/README_CN.md';
+	// @ts-ignore
+	import createText_en from '../../../../packages/create-stdf/README.md';
+
+	const isZh = localStorage.getItem('lang') === 'zh_CN';
+	const text = groupIconMdPlugin(
+		(isZh ? mdTextToHljs(createText) : mdTextToHljs(createText_en)).replace(/<a href="/g, '<a target="_blank" href="'),
+	);
+</script>
+
+<article
+	class="prose prose-strong:text-primary dark:prose-strong:text-dark dark:prose-invert pb-12 {$isWideScreenStore
+		? 'max-w-full'
+		: 'max-w-5xl'}"
+>
+	{@html text}
+</article>

site/src/pages/guide/Guide.svelte

@@ -22,6 +22,8 @@
 	import Milestone from './Milestone.svelte';
 	import Vscode from './Vscode.svelte';
 	import Generator from './Generator.svelte';
+	import Create from './Create.svelte';
+	import IconPlugin from './IconPlugin.svelte';
 
 	const isZh = localStorage.getItem('lang') === 'zh_CN';
 
@@ -42,6 +44,8 @@
 		'/milestone': Milestone,
 		'/vscode': Vscode,
 		'/generator': Generator,
+		'/create': Create,
+		'/icon-plugin': IconPlugin,
 		'/': QuickStart,
 	};
 
@@ -75,6 +79,8 @@
 			childs: [
 				{ title: '主题生成器', title_en: 'Theme generator', nav: 'generator' },
 				{ title: 'IDE 插件', title_en: 'IDE plugin', nav: 'vscode', doc: 'vscode' },
+				{ title: '脚手架', title_en: 'Create cli', nav: 'create' },
+				{ title: '图标插件', title_en: 'Icon plugin', nav: 'icon-plugin' },
 				{ title: '快捷键', title_en: 'Shortcut key', nav: 'shortkey' },
 			],
 		},
@@ -147,6 +153,18 @@
 			localStorage.setItem('isFull', 'full');
 		}
 	};
+	// 编辑地址处理
+	const editUrlFn = nav => {
+		if (nav === 'create') {
+			return 'https://github.com/any-tdf/stdf/edit/main/packages/create-stdf/README' + (isZh ? '_CN' : '') + '.md';
+		}
+		if (nav === 'icon-plugin') {
+			return 'https://github.com/any-tdf/stdf/edit/main/packages/rollup-plugin-stdf-icon/README' + (isZh ? '_CN' : '') + '.md';
+		}
+		return `https://github.com/any-tdf/stdf/edit/main/doc/guide/${flatMenuList.filter(item => item.nav === nav)[0]?.doc}${
+			isZh ? '' : '_en'
+		}.md`;
+	};
 </script>
 
 <div class="flex">
@@ -172,14 +190,7 @@
 		</div>
 		{#if currentNav.nav != 'color' && currentNav.nav != 'logo' && currentNav.nav != 'shortkey' && currentNav.nav != 'generator'}
 			<div class="px-4 md:px-8 pb-8 text-xs flex gap-2">
-				<a
-					href={'https://github.com/any-tdf/stdf/edit/main/doc/guide/' +
-						flatMenuList.filter(item => item.nav === currentNav.nav)[0]?.doc +
-						(isZh ? '' : '_en') +
-						'.md'}
-					class="flex text-primary dark:text-dark w-full"
-					target="_blank"
-				>
+				<a href={editUrlFn(currentNav.nav)} class="flex text-primary dark:text-dark w-full" target="_blank">
 					<span class="h-4 w-4 mr-1">
 						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4" style="fill: currentColor;">
 							<path
@@ -216,3 +227,30 @@
 		{/if}
 	</button>
 {/if}
+<!-- 为 code-groups 预先编译 tailwind -->
+<div
+	class="hidden dark:bg-[#202020] border-b-2 peer-checked/tab-0-0:border-primary dark:peer-checked/tab-0-0:border-dark peer-checked/tab-0-0:block
+peer-checked/tab-0-1:border-primary dark:peer-checked/tab-0-1:border-dark peer-checked/tab-0-1:block
+peer-checked/tab-0-2:border-primary dark:peer-checked/tab-0-2:border-dark peer-checked/tab-0-2:block
+peer-checked/tab-0-3:border-primary dark:peer-checked/tab-0-3:border-dark peer-checked/tab-0-3:block
+peer-checked/tab-0-4:border-primary dark:peer-checked/tab-0-4:border-dark peer-checked/tab-0-4:block
+peer-checked/tab-0-5:border-primary dark:peer-checked/tab-0-5:border-dark peer-checked/tab-0-5:block
+peer-checked/tab-1-0:border-primary dark:peer-checked/tab-1-0:border-dark peer-checked/tab-1-0:block
+peer-checked/tab-1-1:border-primary dark:peer-checked/tab-1-1:border-dark peer-checked/tab-1-1:block
+peer-checked/tab-1-2:border-primary dark:peer-checked/tab-1-2:border-dark peer-checked/tab-1-2:block
+peer-checked/tab-1-3:border-primary dark:peer-checked/tab-1-3:border-dark peer-checked/tab-1-3:block
+peer-checked/tab-1-4:border-primary dark:peer-checked/tab-1-4:border-dark peer-checked/tab-1-4:block
+peer-checked/tab-1-5:border-primary dark:peer-checked/tab-1-5:border-dark peer-checked/tab-1-5:block
+peer-checked/tab-2-0:border-primary dark:peer-checked/tab-2-0:border-dark peer-checked/tab-2-0:block
+peer-checked/tab-2-1:border-primary dark:peer-checked/tab-2-1:border-dark peer-checked/tab-2-1:block
+peer-checked/tab-2-2:border-primary dark:peer-checked/tab-2-2:border-dark peer-checked/tab-2-2:block
+peer-checked/tab-2-3:border-primary dark:peer-checked/tab-2-3:border-dark peer-checked/tab-2-3:block
+peer-checked/tab-2-4:border-primary dark:peer-checked/tab-2-4:border-dark peer-checked/tab-2-4:block
+peer-checked/tab-2-5:border-primary dark:peer-checked/tab-2-5:border-dark peer-checked/tab-2-5:block
+peer-checked/tab-3-0:border-primary dark:peer-checked/tab-3-0:border-dark peer-checked/tab-3-0:block
+peer-checked/tab-3-1:border-primary dark:peer-checked/tab-3-1:border-dark peer-checked/tab-3-1:block
+peer-checked/tab-3-2:border-primary dark:peer-checked/tab-3-2:border-dark peer-checked/tab-3-2:block
+peer-checked/tab-3-3:border-primary dark:peer-checked/tab-3-3:border-dark peer-checked/tab-3-3:block
+peer-checked/tab-3-4:border-primary dark:peer-checked/tab-3-4:border-dark peer-checked/tab-3-4:block
+peer-checked/tab-3-5:border-primary dark:peer-checked/tab-3-5:border-dark peer-checked/tab-3-5:block"
+></div>

site/src/pages/guide/IconPlugin.svelte

@@ -0,0 +1,22 @@
+<script>
+	import { mdTextToHljs, groupIconMdPlugin } from '../../utils/index';
+	import { isWideScreenStore } from '../../store';
+
+	// @ts-ignore
+	import iconPluginText from '../../../../packages/rollup-plugin-stdf-icon/README_CN.md';
+	// @ts-ignore
+	import iconPluginText_en from '../../../../packages/rollup-plugin-stdf-icon/README.md';
+
+	const isZh = localStorage.getItem('lang') === 'zh_CN';
+	const text = mdTextToHljs(
+		(isZh ? groupIconMdPlugin(iconPluginText) : groupIconMdPlugin(iconPluginText_en)).replace(/<a href="/g, '<a target="_blank" href="'),
+	);
+</script>
+
+<article
+	class="prose prose-strong:text-primary dark:prose-strong:text-dark dark:prose-invert pb-12 {$isWideScreenStore
+		? 'max-w-full'
+		: 'max-w-5xl'}"
+>
+	{@html text}
+</article>

site/src/pages/guide/QuickStart.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { mdTextToHljs } from '../../utils/index';
+	import { mdTextToHljs, groupIconMdPlugin } from '../../utils/index';
 	import { isWideScreenStore } from '../../store';
 
 	// @ts-ignore
@@ -8,7 +8,9 @@
 	import quickStartText_en from '../../../../doc/guide/quickStart_en.md';
 
 	const isZh = localStorage.getItem('lang') === 'zh_CN';
-	const text = mdTextToHljs((isZh ? quickStartText : quickStartText_en).replace(/<a href="/g, '<a target="_blank" href="'));
+	const text = groupIconMdPlugin(
+		mdTextToHljs(isZh ? quickStartText : quickStartText_en).replace(/<a href="/g, '<a target="_blank" href="'),
+	);
 </script>
 
 <article

site/src/utils/index.js

@@ -1,4 +1,5 @@
 import Color from 'color';
+import codeGroupSvgData from './code-group-svg-data';
 
 /**
  * 节流，每 n 毫秒执行一次
@@ -89,6 +90,76 @@ export const mdTextToHljs = mdText => {
 	}
 };
 
+/**
+ * 传入解析出来的 md 文档字符，找到其中  ::: code-group 与  ::: 之间的代码块，并将其分组，实现代码块的 tab 分组显示，
+ * 其中 label 标签中的内容为 tab 标签的标题，并在文字前面增加一个 icon 标签，icon 标签的 class 内容为 iconfont 的类名
+ * @param {string} md - 解析出来的 md 文档字符
+ * @returns {string} - 返回处理后的 md 文档字符
+ */
+export const groupIconMdPlugin = md => {
+	// 找出自字符中所有的 ::: code-group 与  ::: 之间的字符组成数组
+	const codeGroupStrListAll = md.match(/<!-- :::code-groups -->[\s\S]*?<!-- ::: -->/g);
+	if (!codeGroupStrListAll) {
+		return md;
+	}
+	const codeGroupStrList = codeGroupStrListAll.map(item =>
+		item
+			.replace(/<!-- :::code-groups -->/g, '')
+			.replace(/<!-- ::: -->/g, '')
+			.split('<!-- :: -->'),
+	);
+	const codeGroupList = codeGroupStrList.map(item =>
+		item.map(subItem => {
+			return { tab: subItem.match(/<!-- (.*?) -->/)[1], code: subItem.replace(/<!-- (.*?) -->/, '') };
+		}),
+	);
+
+	const codeGroupHtmlList = codeGroupList.map((item, index) => {
+		const arr = [];
+		item.forEach((subItem, subIndex) => {
+			const label = `
+			<input id="tab-${index + '-' + subIndex}" type="radio" name="tab-${index}" class="peer/tab-${index + '-' + subIndex} opacity-0" ${
+				subIndex === 0 ? 'checked' : ''
+			} />
+				<label
+					for="tab-${index + '-' + subIndex}"
+					class="border-b-2 border-transparent peer-checked/tab-${index + '-' + subIndex}:border-primary dark:peer-checked/tab-${
+						index + '-' + subIndex
+					}:border-dark transition duration-300 cursor-pointer py-2 px-4 inline-flex items-center gap-2 text-xs"
+				>
+					${codeGroupSvgData.find(icon => icon.name === subItem.tab).svg}${subItem.tab}
+				</label>
+			`;
+			const code = `<div class="hidden peer-checked/tab-${index + '-' + subIndex}:block w-full">${subItem.code}</div>`;
+			arr.push({ label, code });
+		});
+		return `
+			<section class="flex flex-row flex-wrap bg-black/5 dark:bg-[#202020] rounded mb-4">
+				${arr.map(item => item.label).join('')}
+				${arr.map(item => item.code).join('')}
+			</section>
+			`;
+	});
+	const replaceCodeGroups = (inputString, replacements) => {
+		// 定义正则表达式匹配 <!-- :::code-groups --> 与 <!-- ::: --> 之间的内容
+		const regex = /<!--\s*:::code-groups\s*-->(.*?)<!--\s*:::\s*-->/gs;
+
+		let match;
+		let index = 0;
+
+		// 替换匹配到的部分
+		inputString = inputString.replace(regex, (match, p1) => {
+			if (index < replacements.length) {
+				return replacements[index++];
+			}
+			return '';
+		});
+
+		return inputString;
+	};
+	return replaceCodeGroups(md, codeGroupHtmlList).replace(/w-full">\n\n<pre>/g, 'w-full">\n\n<pre style="margin: 0;">');
+};
+
 /**
  * 去除url最后一项的?方法
  * @param {string} url - 需要处理的url
@@ -209,7 +280,6 @@ const colorPalette = (originColor, i, format) => {
 
 	const isLight = i < 6;
 	const index = isLight ? 6 - i : i - 6;
-	// console.log(isLight, index, getNewSaturation(isLight, 0.5), getNewSaturation(isLight, index === 0 ? 0.5 : index));
 	const retColor =
 		i === 6
 			? color

site/vite.config.js

@@ -16,7 +16,7 @@ export default defineConfig({
 			marked: {
 				//marked options
 			},
-			include: ['../doc/**/*.md', './src/pages/guide/**/*.md'],
+			include: ['../doc/**/*.md', './src/pages/guide/**/*.md', '../packages/**/*.md'],
 		}),
 		svgSprite([{ inFile: 'src/assets/svgs', outFile: 'public/fonts', fileName: 'symbol' }]),
 	],