From b27e3be7adac037cc2f54900661230d642c7305a Mon Sep 17 00:00:00 2001
From: jaywcjlove <398188662@qq.com>
Date: Wed, 15 Feb 2023 09:45:39 +0800
Subject: [PATCH 01/24] chore: update package.json

---
 core/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/core/package.json b/core/package.json
index 37e8ff2..6785d61 100644
--- a/core/package.json
+++ b/core/package.json
@@ -3,7 +3,7 @@
   "name": "markdown-react-code-preview-loader",
   "version": "2.1.2",
   "description": "Index react example text in markdown, converted to React components.",
-  "homepage": "https://kktjs.github.io/markdown-react-code-preview-loader",
+  "homepage": "https://github.com/kktjs/markdown-react-code-preview-loader",
   "author": "SunLxy <1011771396@qq.com>",
   "contributors": [
     "SunLxy <1011771396@qq.com>",

From 9ea5419b3b88ee95255406af47dac399c9a72698 Mon Sep 17 00:00:00 2001
From: jaywcjlove <398188662@qq.com>
Date: Wed, 15 Feb 2023 09:48:53 +0800
Subject: [PATCH 02/24] chore: update workflows config.

---
 .github/workflows/ci.yml | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 072456a..40bcfca 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -6,12 +6,13 @@ on:
 
 jobs:
   build:
-    runs-on: ubuntu-18.04
+    runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v3
         with:
           node-version: 16
+          registry-url: 'https://registry.npmjs.org'
 
       - run: npm install
       - run: npm install --workspaces
@@ -28,13 +29,13 @@ jobs:
 
       - name: Create Tag
         id: create_tag
-        uses: jaywcjlove/create-tag-action@v1.3.6
+        uses: jaywcjlove/create-tag-action@main
         with:
           package-path: ./core/package.json
 
       - name: get tag version
         id: tag_version
-        uses: jaywcjlove/changelog-generator@v1.5.3
+        uses: jaywcjlove/changelog-generator@main
 
       - name: Deploy Website
         uses: peaceiris/actions-gh-pages@v3
@@ -47,7 +48,7 @@ jobs:
 
       - name: Generate Changelog
         id: changelog
-        uses: jaywcjlove/changelog-generator@v1.5.3
+        uses: jaywcjlove/changelog-generator@main
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           filter-author: (小弟调调™|dependabot\[bot\]|Renovate Bot)
@@ -78,7 +79,9 @@ jobs:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           publish_dir: ./website/build
 
-      - uses: JS-DevTools/npm-publish@v1
-        with:
-          token: ${{ secrets.NPM_TOKEN }}
-          package: ./core/package.json
\ No newline at end of file
+      - run: npm publish
+        name: 📦 markdown-react-code-preview-loader publish to NPM
+        working-directory: core
+        continue-on-error: true
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

From adb8ae1b6f3c664f9cb7fb3b4671ac08163f612c Mon Sep 17 00:00:00 2001
From: jaywcjlove <398188662@qq.com>
Date: Wed, 15 Feb 2023 09:49:26 +0800
Subject: [PATCH 03/24] released v2.1.3

---
 core/package.json    | 2 +-
 lerna.json           | 2 +-
 website/package.json | 6 +++---
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/core/package.json b/core/package.json
index 6785d61..5212711 100644
--- a/core/package.json
+++ b/core/package.json
@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "markdown-react-code-preview-loader",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "description": "Index react example text in markdown, converted to React components.",
   "homepage": "https://github.com/kktjs/markdown-react-code-preview-loader",
   "author": "SunLxy <1011771396@qq.com>",
diff --git a/lerna.json b/lerna.json
index 7c86904..4084f84 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,4 +1,4 @@
 {
-  "version": "2.1.2",
+  "version": "2.1.3",
   "packages": ["website", "core"]
 }
diff --git a/website/package.json b/website/package.json
index 90ecdb6..e9c42ca 100644
--- a/website/package.json
+++ b/website/package.json
@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "website",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "description": "Simple React package development project example template.",
   "private": true,
   "scripts": {
@@ -18,9 +18,9 @@
     "@uiw/react-markdown-preview": "^4.0.19",
     "@uiw/react-stackblitz": "~1.0.5",
     "@wcj/dark-mode": "^1.0.14",
-    "react-code-preview-layout": "^2.0.6",
     "i18next": "~21.7.1",
     "react": "18.1.0",
+    "react-code-preview-layout": "^2.0.6",
     "react-dom": "18.1.0",
     "react-i18next": "~11.16.9",
     "react-router-dom": "^6.3.0",
@@ -33,7 +33,7 @@
     "@types/react": "18.0.8",
     "@types/react-dom": "18.0.3",
     "kkt": "~7.1.5",
-    "markdown-react-code-preview-loader": "2.1.2"
+    "markdown-react-code-preview-loader": "2.1.3"
   },
   "eslintConfig": {
     "extends": [

From 58d1de90073ffcf57c7af0dcdf78f1029c67100c Mon Sep 17 00:00:00 2001
From: jaywcjlove <398188662@qq.com>
Date: Wed, 15 Feb 2023 09:51:35 +0800
Subject: [PATCH 04/24] chore: update package.json

---
 core/package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/core/package.json b/core/package.json
index 5212711..fe81814 100644
--- a/core/package.json
+++ b/core/package.json
@@ -3,7 +3,7 @@
   "name": "markdown-react-code-preview-loader",
   "version": "2.1.3",
   "description": "Index react example text in markdown, converted to React components.",
-  "homepage": "https://github.com/kktjs/markdown-react-code-preview-loader",
+  "homepage": "https://kktjs.github.io/markdown-react-code-preview-loader",
   "author": "SunLxy <1011771396@qq.com>",
   "contributors": [
     "SunLxy <1011771396@qq.com>",
@@ -11,7 +11,7 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/kktjs/babel-plugin-transform-replace-export-default.git"
+    "url": "https://github.com/kktjs/markdown-react-code-preview-loader"
   },
   "license": "MIT",
   "main": "./lib/index.js",

From dd06ab6f58ae03ab7d9958a9c39d148bd8bbbb5a Mon Sep 17 00:00:00 2001
From: jaywcjlove <398188662@qq.com>
Date: Wed, 15 Feb 2023 09:54:10 +0800
Subject: [PATCH 05/24] released v2.1.4

---
 core/package.json    | 2 +-
 lerna.json           | 2 +-
 website/package.json | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/core/package.json b/core/package.json
index fe81814..fddc155 100644
--- a/core/package.json
+++ b/core/package.json
@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "markdown-react-code-preview-loader",
-  "version": "2.1.3",
+  "version": "2.1.4",
   "description": "Index react example text in markdown, converted to React components.",
   "homepage": "https://kktjs.github.io/markdown-react-code-preview-loader",
   "author": "SunLxy <1011771396@qq.com>",
diff --git a/lerna.json b/lerna.json
index 4084f84..6e38811 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,4 +1,4 @@
 {
-  "version": "2.1.3",
+  "version": "2.1.4",
   "packages": ["website", "core"]
 }
diff --git a/website/package.json b/website/package.json
index e9c42ca..b447cf3 100644
--- a/website/package.json
+++ b/website/package.json
@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "website",
-  "version": "2.1.3",
+  "version": "2.1.4",
   "description": "Simple React package development project example template.",
   "private": true,
   "scripts": {
@@ -33,7 +33,7 @@
     "@types/react": "18.0.8",
     "@types/react-dom": "18.0.3",
     "kkt": "~7.1.5",
-    "markdown-react-code-preview-loader": "2.1.3"
+    "markdown-react-code-preview-loader": "2.1.4"
   },
   "eslintConfig": {
     "extends": [

From e59d9cd264e155951754f64024242a9a58f98ab6 Mon Sep 17 00:00:00 2001
From: jaywcjlove <398188662@qq.com>
Date: Tue, 7 Mar 2023 00:21:31 +0800
Subject: [PATCH 06/24] fix: fix getURLParameters method.

---
 core/README.md          |  1 +
 core/src/utils/index.ts | 14 +++++++++-----
 test/index.test.tsx     |  3 +++
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/core/README.md b/core/README.md
index bce9c22..931b7f8 100644
--- a/core/README.md
+++ b/core/README.md
@@ -186,6 +186,7 @@ getURLParameters('name=Adam&surname=Smith')  // => { name: 'Adam', surname: "Smi
 getURLParameters('mdx:preview:demo12')       // => { }
 getURLParameters('mdx:preview:demo12&name=Adam&surname=Smith')  // => { name: 'Adam', surname: "Smith" }
 getURLParameters('mdx:preview:demo12&code=true&boreder=0')      // => { code: 'true', boreder: "0" }
+getURLParameters('mdx:preview:demo12?code=true&boreder=0')      // => { code: 'true', boreder: "0" }
 ```
 
 ```markdown
diff --git a/core/src/utils/index.ts b/core/src/utils/index.ts
index e772f26..d7bf5a5 100644
--- a/core/src/utils/index.ts
+++ b/core/src/utils/index.ts
@@ -14,11 +14,15 @@ import { Options, FUNNAME_PREFIX, CodeBlockItem, CodeBlockData } from '../';
  * @param url `name=Adam&surname=Smith`
  * @returns
  */
-export const getURLParameters = (url: string): Record<string, string> =>
-  (url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(
-    (a: Record<string, string>, v: string) => ((a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1)), a),
-    {},
-  );
+export const getURLParameters = (url: string): Record<string, string> => {
+  const regex = /([^?=&]+)=([^&]*)/g;
+  const params: Record<string, string> = {};
+  let match;
+  while ((match = regex.exec(url))) {
+    params[match[1]] = match[2];
+  }
+  return params;
+};
 
 export interface MarkdownDataChild extends Node {
   lang: string;
diff --git a/test/index.test.tsx b/test/index.test.tsx
index 6e06274..e3b949c 100644
--- a/test/index.test.tsx
+++ b/test/index.test.tsx
@@ -3,6 +3,9 @@ import { getURLParameters, getMetaId, isMeta } from '../core/src/utils'
 test('getURLParameters test case', () => {
   expect(getURLParameters('name=Adam&surname=Smith')).toEqual({ name: 'Adam', surname: "Smith" })
   expect(getURLParameters('mdx:preview:demo12')).toEqual({ })
+  expect(getURLParameters('mdx:preview:demo12:')).toEqual({ })
+  expect(getURLParameters('mdx:preview:demo12:ab=1')).toEqual({ "mdx:preview:demo12:ab": "1" }); // 🔴
+  expect(getURLParameters('mdx:preview:demo12?name=Adam&surname=Smith')).toEqual({ name: 'Adam', surname: "Smith" })
   expect(getURLParameters('mdx:preview:demo12&name=Adam&surname=Smith')).toEqual({ name: 'Adam', surname: "Smith" })
   expect(getURLParameters('mdx:preview:demo12&code=true&boreder=0')).toEqual({ code: 'true', boreder: "0" })
 });

From 446ceaa6697d25f71ed0b74405a0bdfc2037f624 Mon Sep 17 00:00:00 2001
From: jaywcjlove <398188662@qq.com>
Date: Tue, 7 Mar 2023 00:22:08 +0800
Subject: [PATCH 07/24] released v2.1.5

---
 core/package.json    | 2 +-
 lerna.json           | 2 +-
 website/package.json | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/core/package.json b/core/package.json
index fddc155..183225d 100644
--- a/core/package.json
+++ b/core/package.json
@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "markdown-react-code-preview-loader",
-  "version": "2.1.4",
+  "version": "2.1.5",
   "description": "Index react example text in markdown, converted to React components.",
   "homepage": "https://kktjs.github.io/markdown-react-code-preview-loader",
   "author": "SunLxy <1011771396@qq.com>",
diff --git a/lerna.json b/lerna.json
index 6e38811..0d60655 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,4 +1,4 @@
 {
-  "version": "2.1.4",
+  "version": "2.1.5",
   "packages": ["website", "core"]
 }
diff --git a/website/package.json b/website/package.json
index b447cf3..ea4a08a 100644
--- a/website/package.json
+++ b/website/package.json
@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "website",
-  "version": "2.1.4",
+  "version": "2.1.5",
   "description": "Simple React package development project example template.",
   "private": true,
   "scripts": {
@@ -33,7 +33,7 @@
     "@types/react": "18.0.8",
     "@types/react-dom": "18.0.3",
     "kkt": "~7.1.5",
-    "markdown-react-code-preview-loader": "2.1.4"
+    "markdown-react-code-preview-loader": "2.1.5"
   },
   "eslintConfig": {
     "extends": [

From 88e8fdabd181e550d902a02646bbf97cebb959a9 Mon Sep 17 00:00:00 2001
From: SunLxy <1011771396@qq.com>
Date: Sun, 28 May 2023 18:06:27 +0800
Subject: [PATCH 08/24] chore(deps):update kkt

---
 core/package.json    | 5 +++--
 website/package.json | 6 ++++--
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/core/package.json b/core/package.json
index 183225d..41ac951 100644
--- a/core/package.json
+++ b/core/package.json
@@ -29,7 +29,8 @@
     "watch": "tsbb watch"
   },
   "dependencies": {
-    "@babel/standalone": "^7.17.11",
+    "@babel/plugin-syntax-unicode-sets-regex": "~7.18.6",
+    "@babel/standalone": "^7.22.2",
     "babel-plugin-transform-remove-imports": "^1.7.0",
     "babel-plugin-transform-replace-export-default": "^1.0.3",
     "remark": "~13.0.0"
@@ -38,4 +39,4 @@
     "@types/babel__standalone": "^7.1.4",
     "webpack": "^5.72.0"
   }
-}
+}
\ No newline at end of file
diff --git a/website/package.json b/website/package.json
index ea4a08a..1a593f3 100644
--- a/website/package.json
+++ b/website/package.json
@@ -27,12 +27,14 @@
     "uiw": "^4.21.7"
   },
   "devDependencies": {
+    "buffer": "6.0.3",
+    "@kkt/resolve-fallback": "~7.4.16",
     "@kkt/less-modules": "~7.1.1",
     "@kkt/raw-modules": "~7.1.1",
     "@kkt/scope-plugin-options": "~7.1.1",
     "@types/react": "18.0.8",
     "@types/react-dom": "18.0.3",
-    "kkt": "~7.1.5",
+    "kkt": "~7.4.16",
     "markdown-react-code-preview-loader": "2.1.5"
   },
   "eslintConfig": {
@@ -53,4 +55,4 @@
       "last 1 safari version"
     ]
   }
-}
+}
\ No newline at end of file

From a1facaab198dac9a4df3bcde78720d79468d1a53 Mon Sep 17 00:00:00 2001
From: SunLxy <1011771396@qq.com>
Date: Sun, 28 May 2023 18:21:23 +0800
Subject: [PATCH 09/24] released v2.1.6

---
 core/package.json    |  4 ++--
 lerna.json           |  2 +-
 website/package.json | 10 +++++-----
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/core/package.json b/core/package.json
index 41ac951..6ac25df 100644
--- a/core/package.json
+++ b/core/package.json
@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "markdown-react-code-preview-loader",
-  "version": "2.1.5",
+  "version": "2.1.6",
   "description": "Index react example text in markdown, converted to React components.",
   "homepage": "https://kktjs.github.io/markdown-react-code-preview-loader",
   "author": "SunLxy <1011771396@qq.com>",
@@ -39,4 +39,4 @@
     "@types/babel__standalone": "^7.1.4",
     "webpack": "^5.72.0"
   }
-}
\ No newline at end of file
+}
diff --git a/lerna.json b/lerna.json
index 0d60655..c23a545 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,4 +1,4 @@
 {
-  "version": "2.1.5",
+  "version": "2.1.6",
   "packages": ["website", "core"]
 }
diff --git a/website/package.json b/website/package.json
index 1a593f3..6cece9b 100644
--- a/website/package.json
+++ b/website/package.json
@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "website",
-  "version": "2.1.5",
+  "version": "2.1.6",
   "description": "Simple React package development project example template.",
   "private": true,
   "scripts": {
@@ -27,15 +27,15 @@
     "uiw": "^4.21.7"
   },
   "devDependencies": {
-    "buffer": "6.0.3",
-    "@kkt/resolve-fallback": "~7.4.16",
     "@kkt/less-modules": "~7.1.1",
     "@kkt/raw-modules": "~7.1.1",
+    "@kkt/resolve-fallback": "~7.4.16",
     "@kkt/scope-plugin-options": "~7.1.1",
     "@types/react": "18.0.8",
     "@types/react-dom": "18.0.3",
+    "buffer": "6.0.3",
     "kkt": "~7.4.16",
-    "markdown-react-code-preview-loader": "2.1.5"
+    "markdown-react-code-preview-loader": "2.1.6"
   },
   "eslintConfig": {
     "extends": [
@@ -55,4 +55,4 @@
       "last 1 safari version"
     ]
   }
-}
\ No newline at end of file
+}

From 8a2c2bbb55fea1102f436b839efc5d7fcc424add Mon Sep 17 00:00:00 2001
From: SunLxy <1011771396@qq.com>
Date: Mon, 29 May 2023 12:39:30 +0800
Subject: [PATCH 10/24] chore:update kkt

---
 website/package.json | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/website/package.json b/website/package.json
index 6cece9b..4ec7d8f 100644
--- a/website/package.json
+++ b/website/package.json
@@ -33,8 +33,7 @@
     "@kkt/scope-plugin-options": "~7.1.1",
     "@types/react": "18.0.8",
     "@types/react-dom": "18.0.3",
-    "buffer": "6.0.3",
-    "kkt": "~7.4.16",
+    "kkt": "~7.4.17",
     "markdown-react-code-preview-loader": "2.1.6"
   },
   "eslintConfig": {
@@ -55,4 +54,4 @@
       "last 1 safari version"
     ]
   }
-}
+}
\ No newline at end of file

From 77cadfda64acc47ba98ca09c20131f260c13debd Mon Sep 17 00:00:00 2001
From: SunLxy <1011771396@qq.com>
Date: Mon, 29 May 2023 12:41:13 +0800
Subject: [PATCH 11/24] =?UTF-8?q?fix:=E7=A7=BB=E9=99=A4=E4=BE=9D=E8=B5=96?=
 =?UTF-8?q?=20@kkt/resolve-fallback?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 website/package.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/website/package.json b/website/package.json
index 4ec7d8f..afcaae3 100644
--- a/website/package.json
+++ b/website/package.json
@@ -29,7 +29,6 @@
   "devDependencies": {
     "@kkt/less-modules": "~7.1.1",
     "@kkt/raw-modules": "~7.1.1",
-    "@kkt/resolve-fallback": "~7.4.16",
     "@kkt/scope-plugin-options": "~7.1.1",
     "@types/react": "18.0.8",
     "@types/react-dom": "18.0.3",

From c595d0ba2871584cd92046ebb1d75115bec250b8 Mon Sep 17 00:00:00 2001
From: SunLxy <1011771396@qq.com>
Date: Thu, 20 Jul 2023 08:27:28 +0800
Subject: [PATCH 12/24] =?UTF-8?q?feat:=E6=B7=BB=E5=8A=A0=E8=A7=A3=E6=9E=90?=
 =?UTF-8?q?=E6=A0=87=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 core/src/index.ts       | 10 ++++--
 core/src/utils/index.ts | 74 +++++++++++++++++++++++++++++++++++++++++
 2 files changed, 81 insertions(+), 3 deletions(-)

diff --git a/core/src/index.ts b/core/src/index.ts
index 67949d0..5754ea9 100644
--- a/core/src/index.ts
+++ b/core/src/index.ts
@@ -1,7 +1,7 @@
 import React from 'react';
 import { PluginItem } from '@babel/core';
 import { Options as RIOptions } from 'babel-plugin-transform-remove-imports';
-import { getProcessor, getCodeBlock } from './utils';
+import { getProcessor, getCodeBlock, getHeadings } from './utils';
 import { LoaderDefinitionFunction } from 'webpack';
 export * from './utils';
 
@@ -47,8 +47,9 @@ const codePreviewLoader: LoaderDefinitionFunction = function (source) {
 
   let components = '';
   let codeBlock = {} as CodeBlockData['data'];
+  const child = getProcessor(source);
   try {
-    codeBlock = getCodeBlock(getProcessor(source), options, this.resourcePath);
+    codeBlock = getCodeBlock(child, options, this.resourcePath);
     Object.keys(codeBlock).forEach((key) => {
       components += `${key}: (function() { ${codeBlock[key].code} })(),`;
     });
@@ -56,10 +57,13 @@ const codePreviewLoader: LoaderDefinitionFunction = function (source) {
     this.emitError(error);
   }
 
+  const headings = getHeadings(child);
+
   return `\nexport default {
     components: { ${components} },
     data: ${JSON.stringify(codeBlock, null, 2)},
-    source: ${JSON.stringify(source)}
+    source: ${JSON.stringify(source)},
+    headings:${JSON.stringify(headings)}
   }`;
 };
 
diff --git a/core/src/utils/index.ts b/core/src/utils/index.ts
index d7bf5a5..9a6afa1 100644
--- a/core/src/utils/index.ts
+++ b/core/src/utils/index.ts
@@ -28,6 +28,8 @@ export interface MarkdownDataChild extends Node {
   lang: string;
   meta: string;
   value: string;
+  depth?: number;
+  children?: Array<MarkdownDataChild>;
 }
 
 export interface MarkdownParseData extends Parent<MarkdownDataChild> {}
@@ -125,3 +127,75 @@ export const mdCodeModulesLoader = (
   });
   return config;
 };
+
+export interface HeadingListType {
+  depth: number;
+  value: string;
+}
+
+export interface HeadingItem extends HeadingListType {
+  /**嵌套子标题*/
+  children?: HeadingItem[];
+}
+
+/**进行获取同级别标题数据*/
+export const getSameLevelHeading = (list: HeadingListType[]) => {
+  const newList: { start: number; end: number }[] = [];
+  let level: number = 0;
+  let satrtIndex = 0;
+  let lg = list.length;
+
+  // 对同级别数据进行区分
+  for (let index = 0; index < lg; index++) {
+    const element = list[index];
+    if (index === 0) {
+      satrtIndex = 0;
+      /**默认第一个数据的层级进行查找*/
+      level = element.depth;
+    } else if (element.depth === level) {
+      // 层级相同则进行赋值
+      // 这个位置相等，说明这些数据是一组数据
+      newList.push({ start: satrtIndex, end: index });
+      /**重新赋值开始下标数据*/
+      satrtIndex = index;
+    }
+  }
+  // 如果最后位置没找到
+  if (satrtIndex <= lg - 1) {
+    newList.push({ start: satrtIndex, end: lg });
+  }
+
+  const saveList: HeadingItem[] = [];
+
+  /**对标题数据进行处理*/
+  newList.forEach((item) => {
+    const { start, end } = item;
+    const [firstItem, ...lastItems] = list.slice(start, end);
+    const newItem: HeadingItem = { ...firstItem };
+    if (Array.isArray(lastItems) && lastItems.length) {
+      newItem.children = getSameLevelHeading(lastItems);
+    }
+    saveList.push(newItem);
+  });
+
+  return saveList;
+};
+
+/**获取标题*/
+export const getHeadings = (child: MarkdownParseData['children']) => {
+  const headingList: HeadingListType[] = [];
+
+  child.forEach((item) => {
+    if (item && item.type === 'heading') {
+      const { depth, children } = item;
+      if (Array.isArray(children) && children.length && depth) {
+        const [firstItem] = children || [];
+        if (firstItem && firstItem?.value) {
+          headingList.push({ depth, value: firstItem?.value });
+        }
+      }
+    }
+  });
+
+  return getSameLevelHeading(headingList);
+};

From d57d61a080134dbbbf768baf0dc1e3482ade503a Mon Sep 17 00:00:00 2001
From: SunLxy <1011771396@qq.com>
Date: Thu, 20 Jul 2023 18:36:28 +0800
Subject: [PATCH 13/24] =?UTF-8?q?feat:=E6=B7=BB=E5=8A=A0=E6=8E=A7=E5=88=B6?=
 =?UTF-8?q?=E6=98=AF=E5=90=A6=E8=A7=A3=E6=9E=90=E6=A0=87=E9=A2=98=E8=BF=9B?=
 =?UTF-8?q?=E8=A1=8C=E8=BF=94=E5=9B=9E=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 core/README.md    | 7 ++++++-
 core/src/index.ts | 7 +++++--
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/core/README.md b/core/README.md
index 931b7f8..6d7f3fd 100644
--- a/core/README.md
+++ b/core/README.md
@@ -99,6 +99,8 @@ export type Options = {
    * Add babel plugins.
    */
   babelPlugins?: PluginItem[];
+   /**Do you want to parse the title*/
+  isHeading?: boolean
 }
 ```
 
@@ -112,6 +114,7 @@ import mdObj from 'markdown-react-code-preview-loader/README.md';
 mdObj.source     // => `README.md` raw string text
 mdObj.components // => The component index object, the React component converted from the markdown indexed example. (need to configure meta)
 mdObj.data       // => The component source code index object, the sample source code indexed from markdown. (need to configure meta)
+mdObj.headings       // => This is the parsed header data
 ```
 
 ```js
@@ -133,7 +136,8 @@ mdObj.data       // => The component source code index object, the sample source
     }
   },
   components: { 77: ƒ, demo12: ƒ },
-  source: "# Alert 确认对话框...."
+  source: "# Alert 确认对话框....",
+  headings:[{depth:1,value:"标题", ...},...]
 }
 ```
 
@@ -155,6 +159,7 @@ export type CodeBlockData = {
   source: string;
   components: Record<CodeBlockItem['name'], React.FC>;
   data: Record<CodeBlockItem['name'], CodeBlockItem>;
+  headings?: HeadingItem[]
 };
 ```
 
diff --git a/core/src/index.ts b/core/src/index.ts
index 5754ea9..0502889 100644
--- a/core/src/index.ts
+++ b/core/src/index.ts
@@ -1,7 +1,7 @@
 import React from 'react';
 import { PluginItem } from '@babel/core';
 import { Options as RIOptions } from 'babel-plugin-transform-remove-imports';
-import { getProcessor, getCodeBlock, getHeadings } from './utils';
+import { getProcessor, getCodeBlock, getHeadings, HeadingItem } from './utils';
 import { LoaderDefinitionFunction } from 'webpack';
 export * from './utils';
 
@@ -22,6 +22,7 @@ export type CodeBlockData = {
   source: string;
   components: Record<CodeBlockItem['name'], React.FC>;
   data: Record<CodeBlockItem['name'], CodeBlockItem>;
+  headings?: HeadingItem[];
 };
 
 export const FUNNAME_PREFIX = '__BaseCode__';
@@ -40,6 +41,8 @@ export type Options = {
    * Add babel plugins.
    */
   babelPlugins?: PluginItem[];
+  /**是否进行标题解析*/
+  isHeading?: boolean;
 };
 
 const codePreviewLoader: LoaderDefinitionFunction = function (source) {
@@ -57,7 +60,7 @@ const codePreviewLoader: LoaderDefinitionFunction = function (source) {
     this.emitError(error);
   }
 
-  const headings = getHeadings(child);
+  const headings = options.isHeading ? getHeadings(child) : [];
 
   return `\nexport default {
     components: { ${components} },

From 9d72fdfae9b772e5d6a9e23408bd114625984106 Mon Sep 17 00:00:00 2001
From: SunLxy <1011771396@qq.com>
Date: Thu, 20 Jul 2023 18:37:06 +0800
Subject: [PATCH 14/24] released 2.1.7

---
 core/package.json    | 2 +-
 lerna.json           | 2 +-
 website/package.json | 6 +++---
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/core/package.json b/core/package.json
index 6ac25df..732070a 100644
--- a/core/package.json
+++ b/core/package.json
@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "markdown-react-code-preview-loader",
-  "version": "2.1.6",
+  "version": "2.1.7",
   "description": "Index react example text in markdown, converted to React components.",
   "homepage": "https://kktjs.github.io/markdown-react-code-preview-loader",
   "author": "SunLxy <1011771396@qq.com>",
diff --git a/lerna.json b/lerna.json
index c23a545..5a38c5b 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,4 +1,4 @@
 {
-  "version": "2.1.6",
+  "version": "2.1.7",
   "packages": ["website", "core"]
 }
diff --git a/website/package.json b/website/package.json
index afcaae3..71ece5b 100644
--- a/website/package.json
+++ b/website/package.json
@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "website",
-  "version": "2.1.6",
+  "version": "2.1.7",
   "description": "Simple React package development project example template.",
   "private": true,
   "scripts": {
@@ -33,7 +33,7 @@
     "@types/react": "18.0.8",
     "@types/react-dom": "18.0.3",
     "kkt": "~7.4.17",
-    "markdown-react-code-preview-loader": "2.1.6"
+    "markdown-react-code-preview-loader": "2.1.7"
   },
   "eslintConfig": {
     "extends": [
@@ -53,4 +53,4 @@
       "last 1 safari version"
     ]
   }
-}
\ No newline at end of file
+}

From 742307618b3c5e24f6e22d39d251e53c33996b74 Mon Sep 17 00:00:00 2001
From: SunLxy <1011771396@qq.com>
Date: Fri, 18 Aug 2023 08:40:46 +0800
Subject: [PATCH 15/24] =?UTF-8?q?fix:=E4=BF=AE=E5=A4=8D=E6=A0=87=E9=A2=98?=
 =?UTF-8?q?=E8=A7=A3=E6=9E=90=E5=8F=96=E5=80=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 core/src/index.ts       | 11 +++++++----
 core/src/utils/index.ts | 20 +++++++++++++-------
 2 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/core/src/index.ts b/core/src/index.ts
index 0502889..c63ee63 100644
--- a/core/src/index.ts
+++ b/core/src/index.ts
@@ -1,7 +1,7 @@
 import React from 'react';
 import { PluginItem } from '@babel/core';
 import { Options as RIOptions } from 'babel-plugin-transform-remove-imports';
-import { getProcessor, getCodeBlock, getHeadings, HeadingItem } from './utils';
+import { getProcessor, getCodeBlock, getHeadings, HeadingItem, HeadingListType } from './utils';
 import { LoaderDefinitionFunction } from 'webpack';
 export * from './utils';
 
@@ -23,6 +23,7 @@ export type CodeBlockData = {
   components: Record<CodeBlockItem['name'], React.FC>;
   data: Record<CodeBlockItem['name'], CodeBlockItem>;
   headings?: HeadingItem[];
+  headingsList: HeadingListType[];
 };
 
 export const FUNNAME_PREFIX = '__BaseCode__';
@@ -47,12 +48,13 @@ export type Options = {
 
 const codePreviewLoader: LoaderDefinitionFunction = function (source) {
   const options: Options = this.getOptions();
+  const { isHeading, ...rest } = options;
 
   let components = '';
   let codeBlock = {} as CodeBlockData['data'];
   const child = getProcessor(source);
   try {
-    codeBlock = getCodeBlock(child, options, this.resourcePath);
+    codeBlock = getCodeBlock(child, rest, this.resourcePath);
     Object.keys(codeBlock).forEach((key) => {
       components += `${key}: (function() { ${codeBlock[key].code} })(),`;
     });
@@ -60,13 +62,14 @@ const codePreviewLoader: LoaderDefinitionFunction = function (source) {
     this.emitError(error);
   }
 
-  const headings = options.isHeading ? getHeadings(child) : [];
+  const { headingsList, headings } = isHeading ? getHeadings(child) : { headingsList: [], headings: [] };
 
   return `\nexport default {
     components: { ${components} },
     data: ${JSON.stringify(codeBlock, null, 2)},
     source: ${JSON.stringify(source)},
-    headings:${JSON.stringify(headings)}
+    headings:${JSON.stringify(headings)},
+    headingsList:${JSON.stringify(headingsList)},
   }`;
 };
 
diff --git a/core/src/utils/index.ts b/core/src/utils/index.ts
index 9a6afa1..a8cde0c 100644
--- a/core/src/utils/index.ts
+++ b/core/src/utils/index.ts
@@ -131,6 +131,7 @@ export const mdCodeModulesLoader = (
 export interface HeadingListType {
   depth: number;
   value: string;
+  key: number;
 }
 
 export interface HeadingItem extends HeadingListType {
@@ -185,17 +186,22 @@ export const getSameLevelHeading = (list: HeadingListType[]) => {
 export const getHeadings = (child: MarkdownParseData['children']) => {
   const headingList: HeadingListType[] = [];
 
-  child.forEach((item) => {
+  child.forEach((item, index) => {
     if (item && item.type === 'heading') {
       const { depth, children } = item;
-      if (Array.isArray(children) && children.length && depth) {
-        const [firstItem] = children || [];
-        if (firstItem && firstItem?.value) {
-          headingList.push({ depth, value: firstItem?.value });
-        }
+      if (Array.isArray(children) && children.length) {
+        const value = children.map((item) => item.value).join('');
+        headingList.push({
+          key: index,
+          value,
+          depth,
+        });
       }
     }
   });
 
-  return getSameLevelHeading(headingList);
+  return {
+    headings: getSameLevelHeading(headingList),
+    headingsList: headingList,
+  };
 };

From 5977537f2299ba698cd272a3783d2aaf9402ac5b Mon Sep 17 00:00:00 2001
From: jaywcjlove <398188662@qq.com>
Date: Tue, 3 Oct 2023 17:39:44 +0800
Subject: [PATCH 16/24] fix: fix CodeBlockItem type error.

https://github.com/kktjs/markdown-react-code-preview-loader/commit/742307618b3c5e24f6e22d39d251e53c33996b74
---
 core/src/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/core/src/index.ts b/core/src/index.ts
index c63ee63..484c157 100644
--- a/core/src/index.ts
+++ b/core/src/index.ts
@@ -23,7 +23,7 @@ export type CodeBlockData = {
   components: Record<CodeBlockItem['name'], React.FC>;
   data: Record<CodeBlockItem['name'], CodeBlockItem>;
   headings?: HeadingItem[];
-  headingsList: HeadingListType[];
+  headingsList?: HeadingListType[];
 };
 
 export const FUNNAME_PREFIX = '__BaseCode__';

From f79c3259b9125325f0637f4d1f29e1965b171b7c Mon Sep 17 00:00:00 2001
From: jaywcjlove <398188662@qq.com>
Date: Tue, 3 Oct 2023 17:42:17 +0800
Subject: [PATCH 17/24] ci: update workflows config.

---
 .github/workflows/ci.yml | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 40bcfca..90620cb 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -7,11 +7,14 @@ on:
 jobs:
   build:
     runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      id-token: write
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
           registry-url: 'https://registry.npmjs.org'
 
       - run: npm install
@@ -79,7 +82,7 @@ jobs:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           publish_dir: ./website/build
 
-      - run: npm publish
+      - run: npm publish --access public --provenance
         name: 📦 markdown-react-code-preview-loader publish to NPM
         working-directory: core
         continue-on-error: true

From cb3c59145adb13ded538c62600c699b4fa57dad2 Mon Sep 17 00:00:00 2001
From: jaywcjlove <398188662@qq.com>
Date: Tue, 3 Oct 2023 17:45:42 +0800
Subject: [PATCH 18/24] released v2.1.8

---
 core/package.json                   | 2 +-
 lerna.json                          | 2 +-
 website/package.json                | 4 ++--
 website/src/pages/docs/index.tsx    | 1 +
 website/src/pages/example/index.tsx | 1 +
 5 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/core/package.json b/core/package.json
index 732070a..3a1f611 100644
--- a/core/package.json
+++ b/core/package.json
@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "markdown-react-code-preview-loader",
-  "version": "2.1.7",
+  "version": "2.1.8",
   "description": "Index react example text in markdown, converted to React components.",
   "homepage": "https://kktjs.github.io/markdown-react-code-preview-loader",
   "author": "SunLxy <1011771396@qq.com>",
diff --git a/lerna.json b/lerna.json
index 5a38c5b..0e95706 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,4 +1,4 @@
 {
-  "version": "2.1.7",
+  "version": "2.1.8",
   "packages": ["website", "core"]
 }
diff --git a/website/package.json b/website/package.json
index 71ece5b..040e0b9 100644
--- a/website/package.json
+++ b/website/package.json
@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "website",
-  "version": "2.1.7",
+  "version": "2.1.8",
   "description": "Simple React package development project example template.",
   "private": true,
   "scripts": {
@@ -33,7 +33,7 @@
     "@types/react": "18.0.8",
     "@types/react-dom": "18.0.3",
     "kkt": "~7.4.17",
-    "markdown-react-code-preview-loader": "2.1.7"
+    "markdown-react-code-preview-loader": "2.1.8"
   },
   "eslintConfig": {
     "extends": [
diff --git a/website/src/pages/docs/index.tsx b/website/src/pages/docs/index.tsx
index e088831..e0eef7d 100644
--- a/website/src/pages/docs/index.tsx
+++ b/website/src/pages/docs/index.tsx
@@ -11,6 +11,7 @@ export function HomePage() {
     <Loader style={{ width: '100%' }} loading={loading} tip="loading...">
       <MarkdownPreview
         source={mdData.source}
+        style={{ background: 'transparent' }}
         rehypeRewrite={(node: Root | RootContent, index: number, parent: Root | Element) => {
           if (node.type === 'element' && parent && parent.type === 'root' && /h(1|2|3|4|5|6)/.test(node.tagName)) {
             const child = node.children && (node.children[0] as Element);
diff --git a/website/src/pages/example/index.tsx b/website/src/pages/example/index.tsx
index 39029ab..b802348 100644
--- a/website/src/pages/example/index.tsx
+++ b/website/src/pages/example/index.tsx
@@ -11,6 +11,7 @@ export function ExamplePage() {
     <Loader style={{ width: '100%' }} loading={loading} tip="loading...">
       <MarkdownPreview
         disableCopy={true}
+        style={{ background: 'transparent' }}
         source={mdData.source}
         rehypeRewrite={(node: Root | RootContent, index: number, parent: Root | Element) => {
           if (node.type === 'element' && parent && parent.type === 'root' && /h(1|2|3|4|5|6)/.test(node.tagName)) {

From 3b31f69cd6fb17d159739cca9aa9e8b03d9486a4 Mon Sep 17 00:00:00 2001
From: jaywcjlove <398188662@qq.com>
Date: Thu, 24 Oct 2024 15:23:46 +0800
Subject: [PATCH 19/24] chore(deps): update dependencies.

---
 .husky/pre-commit                   |  5 +--
 core/README-zh.md                   | 12 +++++-
 core/README.md                      | 34 ++++++++++-----
 core/src/utils/transform.ts         |  4 +-
 lerna.json                          |  2 +-
 package.json                        | 15 ++++---
 pkg-example/README.md               | 15 +++++++
 pkg-example/package.json            | 22 ++++++++++
 pkg-example/src/index.tsx           |  5 +++
 pkg-example/tsconfig.json           |  8 ++++
 website/.kktrc.ts                   |  1 +
 website/package.json                | 27 ++++++------
 website/src/App.tsx                 |  1 +
 website/src/Layout.tsx              |  2 +-
 website/src/index.tsx               | 10 ++---
 website/src/pages/example/index.tsx | 65 ++++++++++++++++++-----------
 16 files changed, 158 insertions(+), 70 deletions(-)
 create mode 100644 pkg-example/README.md
 create mode 100644 pkg-example/package.json
 create mode 100644 pkg-example/src/index.tsx
 create mode 100644 pkg-example/tsconfig.json

diff --git a/.husky/pre-commit b/.husky/pre-commit
index 2df4242..041c660 100755
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -1,4 +1 @@
-#!/usr/bin/env sh
-. "$(dirname "$0")/_/husky.sh"
-
-npx --no-install lint-staged
\ No newline at end of file
+npx --no-install lint-staged
diff --git a/core/README-zh.md b/core/README-zh.md
index 26aa1f1..e1a121e 100644
--- a/core/README-zh.md
+++ b/core/README-zh.md
@@ -27,7 +27,11 @@ import scopePluginOptions from '@kkt/scope-plugin-options';
 import { LoaderConfOptions, WebpackConfiguration } from 'kkt';
 import { mdCodeModulesLoader } from 'markdown-react-code-preview-loader';
 
-export default (conf: WebpackConfiguration, env: 'development' | 'production', options: LoaderConfOptions) => {
+export default (
+  conf: WebpackConfiguration, 
+  env: 'development' | 'production', 
+  options: LoaderConfOptions
+) => {
   // ....
   conf = mdCodeModulesLoader(conf);
   // ....
@@ -45,7 +49,11 @@ import { Options } from 'markdown-react-code-preview-loader';
  * @param {Options} option Loader Options
  * @returns {webpack.Configuration}
  * **/
-export declare const mdCodeModulesLoader: (config: webpack.Configuration, lang?: string[], option?: Options) => webpack.Configuration;
+export declare const mdCodeModulesLoader: (
+  config: webpack.Configuration, 
+  lang?: string[], 
+  option?: Options
+) => webpack.Configuration;
 ```
 
 **第 ② 种方法，手动添加配置**
diff --git a/core/README.md b/core/README.md
index 6d7f3fd..30fc0ac 100644
--- a/core/README.md
+++ b/core/README.md
@@ -27,11 +27,15 @@ import scopePluginOptions from '@kkt/scope-plugin-options';
 import { LoaderConfOptions, WebpackConfiguration } from 'kkt';
 import { mdCodeModulesLoader } from 'markdown-react-code-preview-loader';
 
-export default (conf: WebpackConfiguration, env: 'development' | 'production', options: LoaderConfOptions) => {
-  // ....
-  conf = mdCodeModulesLoader(conf);
-  // ....
-  return conf;
+export default (
+    conf: WebpackConfiguration,
+    env: 'development' | 'production',
+    options: LoaderConfOptions
+) => {
+    // ....
+    conf = mdCodeModulesLoader(conf);
+    // ....
+    return conf;
 };
 ```
 
@@ -45,7 +49,11 @@ import { Options } from 'markdown-react-code-preview-loader';
  * @param {Options} option Loader Options
  * @returns {webpack.Configuration}
  * **/
-export declare const mdCodeModulesLoader: (config: webpack.Configuration, lang?: string[], option?: Options) => webpack.Configuration;
+export declare const mdCodeModulesLoader: (
+  config: webpack.Configuration, 
+  lang?: string[], 
+  option?: Options
+) => webpack.Configuration;
 ```
 
 **② The second method is to manually add the configuration**
@@ -111,10 +119,16 @@ After adding `loader`, use the method to load `markdown` text in the project pro
 ```jsx
 import mdObj from 'markdown-react-code-preview-loader/README.md';
 
-mdObj.source     // => `README.md` raw string text
-mdObj.components // => The component index object, the React component converted from the markdown indexed example. (need to configure meta)
-mdObj.data       // => The component source code index object, the sample source code indexed from markdown. (need to configure meta)
-mdObj.headings       // => This is the parsed header data
+// `README.md` raw string text
+mdObj.source
+// The component index object, the React component converted from the markdown indexed example.
+// (need to configure meta)
+mdObj.components
+// The component source code index object, the sample source code indexed from markdown.
+// (need to configure meta)
+mdObj.data
+// This is the parsed header data
+mdObj.headings
 ```
 
 ```js
diff --git a/core/src/utils/transform.ts b/core/src/utils/transform.ts
index c5dd637..390e3b9 100644
--- a/core/src/utils/transform.ts
+++ b/core/src/utils/transform.ts
@@ -1,8 +1,8 @@
 import { transform } from '@babel/standalone';
-import { PluginItem } from '@babel/core';
+import { type PluginItem } from '@babel/core';
 import removeImports from 'babel-plugin-transform-remove-imports';
 import replaceExportDefault from 'babel-plugin-transform-replace-export-default';
-import { Options } from '../';
+import { type Options } from '../';
 
 export const getTransformValue = (str: string, filename: string, opts: Options) => {
   const plugins: PluginItem[] = [...(opts.babelPlugins || [])];
diff --git a/lerna.json b/lerna.json
index 0e95706..ec789d7 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,4 +1,4 @@
 {
   "version": "2.1.8",
-  "packages": ["website", "core"]
+  "packages": ["website", "core", "pkg-example"]
 }
diff --git a/package.json b/package.json
index a1ddeb8..033896a 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
   },
   "workspaces": [
     "core",
+    "pkg-example",
     "website"
   ],
   "jest": {
@@ -35,11 +36,13 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "husky": "~7.0.4",
-    "lerna": "~4.0.0",
-    "lint-staged": "~12.3.4",
-    "prettier": "~2.5.1",
-    "pretty-quick": "~3.1.3",
-    "tsbb": "~3.7.0"
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "husky": "~9.1.6",
+    "lerna": "~8.1.8",
+    "lint-staged": "~15.2.10",
+    "prettier": "~3.3.3",
+    "pretty-quick": "~4.0.0",
+    "tsbb": "^4.4.0"
   }
 }
\ No newline at end of file
diff --git a/pkg-example/README.md b/pkg-example/README.md
new file mode 100644
index 0000000..0a3faea
--- /dev/null
+++ b/pkg-example/README.md
@@ -0,0 +1,15 @@
+Example
+===
+
+```jsx mdx:preview
+import React from "react";
+import Example from 'pkg-example';
+
+export default function App() {
+  return (
+    <div className="container">
+      <Example />
+    </div>
+  );
+}
+```
\ No newline at end of file
diff --git a/pkg-example/package.json b/pkg-example/package.json
new file mode 100644
index 0000000..6b7824a
--- /dev/null
+++ b/pkg-example/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "pkg-example",
+  "version": "1.0.0",
+  "private": true,
+  "license": "MIT",
+  "main": "./cjs/index.js",
+  "module": "./esm/index.js",
+  "exports": {
+    ".": {
+      "require": "./cjs/index.js",
+      "import": "./esm/index.js"
+    },
+    "./README.md": "./README.md"
+  },
+  "scripts": {
+    "watch": "tsbb watch src/*.tsx --use-babel",
+    "build": "tsbb build src/*.tsx --use-babel"
+  },
+  "keywords": [],
+  "author": "jaywcjlove",
+  "description": ""
+}
diff --git a/pkg-example/src/index.tsx b/pkg-example/src/index.tsx
new file mode 100644
index 0000000..e213ab5
--- /dev/null
+++ b/pkg-example/src/index.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function Test() {
+  return <div>Test</div>;
+}
diff --git a/pkg-example/tsconfig.json b/pkg-example/tsconfig.json
new file mode 100644
index 0000000..f1d875b
--- /dev/null
+++ b/pkg-example/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "extends": "../tsconfig",
+  "include": ["src"],
+  "compilerOptions": {
+    "outDir": "./cjs",
+    "baseUrl": "."
+  }
+}
diff --git a/website/.kktrc.ts b/website/.kktrc.ts
index 3dbc53d..55de723 100644
--- a/website/.kktrc.ts
+++ b/website/.kktrc.ts
@@ -21,6 +21,7 @@ export default (conf: WebpackConfiguration, env: 'development' | 'production', o
   );
   conf = mdCodeModulesLoader(conf);
   conf.module!.exprContextCritical = false;
+
   if (process.env.NODE_ENV === 'production') {
     conf.output = { ...conf.output, publicPath: './' };
   }
diff --git a/website/package.json b/website/package.json
index 040e0b9..76537e7 100644
--- a/website/package.json
+++ b/website/package.json
@@ -5,34 +5,35 @@
   "description": "Simple React package development project example template.",
   "private": true,
   "scripts": {
-    "start": "kkt start",
+    "start": "kkt start --no-clear-console --no-open-browser",
     "build": "kkt build"
   },
   "license": "MIT",
   "dependencies": {
+    "@babel/plugin-transform-modules-commonjs": "^7.24.8",
     "@uiw/copy-to-clipboard": "^1.0.12",
     "@uiw/react-codepen": "~1.0.2",
     "@uiw/react-codesandbox": "~1.1.5",
     "@uiw/react-github-corners": "~1.5.3",
     "@uiw/react-layout": "~5.0.0-beta.1",
-    "@uiw/react-markdown-preview": "^4.0.19",
+    "@uiw/react-markdown-preview": "^5.1.3",
     "@uiw/react-stackblitz": "~1.0.5",
     "@wcj/dark-mode": "^1.0.14",
-    "i18next": "~21.7.1",
-    "react": "18.1.0",
-    "react-code-preview-layout": "^2.0.6",
-    "react-dom": "18.1.0",
+    "i18next": "~23.16.2",
+    "react": "~18.2.0",
+    "react-code-preview-layout": "^3.1.4",
+    "react-dom": "~18.2.0",
     "react-i18next": "~11.16.9",
-    "react-router-dom": "^6.3.0",
+    "react-router-dom": "^6.20.0",
     "uiw": "^4.21.7"
   },
   "devDependencies": {
-    "@kkt/less-modules": "~7.1.1",
-    "@kkt/raw-modules": "~7.1.1",
-    "@kkt/scope-plugin-options": "~7.1.1",
-    "@types/react": "18.0.8",
-    "@types/react-dom": "18.0.3",
-    "kkt": "~7.4.17",
+    "@kkt/less-modules": "~7.5.5",
+    "@kkt/raw-modules": "~7.5.5",
+    "@kkt/scope-plugin-options": "~7.5.5",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "kkt": "~7.5.5",
     "markdown-react-code-preview-loader": "2.1.8"
   },
   "eslintConfig": {
diff --git a/website/src/App.tsx b/website/src/App.tsx
index 59d5524..d9921f8 100644
--- a/website/src/App.tsx
+++ b/website/src/App.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { HashRouter, Routes, Route } from 'react-router-dom';
 import { Layout } from './Layout';
 import { HomePage } from './pages/docs';
diff --git a/website/src/Layout.tsx b/website/src/Layout.tsx
index d7a0a45..7d60cc5 100644
--- a/website/src/Layout.tsx
+++ b/website/src/Layout.tsx
@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import React, { Fragment } from 'react';
 import { Outlet, NavLink } from 'react-router-dom';
 import GitHubCorners from '@uiw/react-github-corners';
 import '@wcj/dark-mode';
diff --git a/website/src/index.tsx b/website/src/index.tsx
index 812d885..97c5de9 100644
--- a/website/src/index.tsx
+++ b/website/src/index.tsx
@@ -1,10 +1,8 @@
 import React from 'react';
-import ReactDOM from 'react-dom/client';
+import { createRoot } from 'react-dom/client';
 import App from './App';
 import './language/i18n';
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-);
+const container = document.getElementById('root');
+const root = createRoot(container!);
+root.render(<App />);
diff --git a/website/src/pages/example/index.tsx b/website/src/pages/example/index.tsx
index b802348..523c264 100644
--- a/website/src/pages/example/index.tsx
+++ b/website/src/pages/example/index.tsx
@@ -1,10 +1,48 @@
+import React from 'react';
+import { FC, PropsWithChildren, useRef } from 'react';
 import MarkdownPreview from '@uiw/react-markdown-preview';
-import { getMetaId, isMeta, getURLParameters } from 'markdown-react-code-preview-loader';
+import { getMetaId, getURLParameters, CodeBlockData } from 'markdown-react-code-preview-loader';
+
 import { Root, Element, RootContent } from 'hast';
 import { Loader } from 'uiw';
 import CodeLayout from 'react-code-preview-layout';
 import useMdData from '../../components/useMdData';
 
+const Preview = CodeLayout.Preview;
+const Code = CodeLayout.Code;
+const Toolbar = CodeLayout.Toolbar;
+
+interface CodePreviewProps {
+  mdData?: CodeBlockData;
+  'data-meta'?: string;
+}
+
+const CodePreview: FC<PropsWithChildren<CodePreviewProps>> = (props) => {
+  const $dom = useRef<HTMLDivElement>(null);
+  // @ts-ignore
+  const { mdData, node, 'data-meta': meta, ...rest } = props;
+  // @ts-ignore
+  const line = node?.position?.start.line;
+  const metaId = getMetaId(meta) || String(line);
+  const Child = mdData?.components[`${metaId}`];
+  if (metaId && typeof Child === 'function') {
+    const code = mdData?.data[metaId].value || '';
+    const param = getURLParameters(meta || '');
+    return (
+      <CodeLayout ref={$dom}>
+        <Preview>
+          <Child />
+        </Preview>
+        <Toolbar text={code}>{param.title || 'Example'}</Toolbar>
+        <Code>
+          <pre {...rest} />
+        </Code>
+      </CodeLayout>
+    );
+  }
+  return <code {...rest} />;
+};
+
 export function ExamplePage() {
   const { mdData, loading } = useMdData((path) => import(`./App${path}.md`));
   return (
@@ -22,30 +60,7 @@ export function ExamplePage() {
           }
         }}
         components={{
-          code: ({ inline, node, ...props }) => {
-            const { 'data-meta': meta, ...rest } = props as any;
-            if (inline || !isMeta(meta)) {
-              return <code {...props} />;
-            }
-            const line = node.position?.start.line;
-            const metaId = getMetaId(meta) || String(line);
-            const Child = mdData.components[`${metaId}`];
-            if (metaId && typeof Child === 'function') {
-              const code = mdData.data[metaId].value || '';
-              const param = getURLParameters(meta);
-              return (
-                <CodeLayout
-                  disableCheckered
-                  toolbar={param.title || 'Example Preview'}
-                  code={<code {...rest} />}
-                  text={code}
-                >
-                  <Child />
-                </CodeLayout>
-              );
-            }
-            return <code {...rest} />;
-          },
+          code: (props) => <CodePreview {...props} mdData={mdData} />,
         }}
       />
     </Loader>

From 9dff6c6b3f53eb6cf488a9c9f43d2a590a7e6503 Mon Sep 17 00:00:00 2001
From: jaywcjlove <398188662@qq.com>
Date: Thu, 24 Oct 2024 15:25:11 +0800
Subject: [PATCH 20/24] ci: update workflows/ci.yml

---
 .github/workflows/ci.yml | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 90620cb..e308550 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -11,10 +11,10 @@ jobs:
       contents: write
       id-token: write
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
           registry-url: 'https://registry.npmjs.org'
 
       - run: npm install
@@ -41,7 +41,7 @@ jobs:
         uses: jaywcjlove/changelog-generator@main
 
       - name: Deploy Website
-        uses: peaceiris/actions-gh-pages@v3
+        uses: peaceiris/actions-gh-pages@v4
         with:
           user_name: 'github-actions[bot]'
           user_email: 'github-actions[bot]@users.noreply.github.com'
@@ -61,6 +61,7 @@ jobs:
         uses: ncipollo/release-action@v1
         if: steps.create_tag.outputs.successful
         with:
+          allowUpdates: true
           token: ${{ secrets.GITHUB_TOKEN }}
           name: ${{ steps.create_tag.outputs.version }}
           tag: ${{ steps.create_tag.outputs.version }}
@@ -77,7 +78,7 @@ jobs:
             ${{ steps.changelog.outputs.changelog }}
 
       - name: Deploy
-        uses: peaceiris/actions-gh-pages@v3
+        uses: peaceiris/actions-gh-pages@v4
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           publish_dir: ./website/build

From 7db14c86dadc1c0cb207261a945345aef57cd07b Mon Sep 17 00:00:00 2001
From: jaywcjlove <398188662@qq.com>
Date: Thu, 24 Oct 2024 17:37:23 +0800
Subject: [PATCH 21/24] fix(deps): update dependency.

---
 core/package.json       | 12 ++++++------
 core/src/index.ts       |  9 +++++----
 core/src/utils/index.ts |  7 ++++---
 package.json            |  4 ++--
 website/.kktrc.ts       | 24 ++++++++++++++++++++++--
 5 files changed, 39 insertions(+), 17 deletions(-)

diff --git a/core/package.json b/core/package.json
index 3a1f611..c6b2fa7 100644
--- a/core/package.json
+++ b/core/package.json
@@ -14,7 +14,7 @@
     "url": "https://github.com/kktjs/markdown-react-code-preview-loader"
   },
   "license": "MIT",
-  "main": "./lib/index.js",
+  "main": "lib/index.js",
   "module": "esm/index.js",
   "types": "lib/index.d.ts",
   "files": [
@@ -25,18 +25,18 @@
     "esm"
   ],
   "scripts": {
-    "build": "tsbb build",
-    "watch": "tsbb watch"
+    "build": "tsbb build src/**/*.ts --use-babel",
+    "watch": "tsbb watch src/**/*.ts --use-babel"
   },
   "dependencies": {
     "@babel/plugin-syntax-unicode-sets-regex": "~7.18.6",
     "@babel/standalone": "^7.22.2",
-    "babel-plugin-transform-remove-imports": "^1.7.0",
-    "babel-plugin-transform-replace-export-default": "^1.0.3",
+    "babel-plugin-transform-remove-imports": "^1.8.0",
+    "babel-plugin-transform-replace-export-default": "^1.0.4",
     "remark": "~13.0.0"
   },
   "devDependencies": {
     "@types/babel__standalone": "^7.1.4",
-    "webpack": "^5.72.0"
+    "webpack": "^5.95.0"
   }
 }
diff --git a/core/src/index.ts b/core/src/index.ts
index 484c157..4a75ab3 100644
--- a/core/src/index.ts
+++ b/core/src/index.ts
@@ -1,8 +1,9 @@
 import React from 'react';
-import { PluginItem } from '@babel/core';
-import { Options as RIOptions } from 'babel-plugin-transform-remove-imports';
-import { getProcessor, getCodeBlock, getHeadings, HeadingItem, HeadingListType } from './utils';
-import { LoaderDefinitionFunction } from 'webpack';
+import { type LoaderDefinitionFunction } from 'webpack';
+import { type PluginItem } from '@babel/core';
+import { type Options as RIOptions } from 'babel-plugin-transform-remove-imports';
+import { getProcessor, getCodeBlock, getHeadings, type HeadingItem, type HeadingListType } from './utils';
+
 export * from './utils';
 
 export type CodeBlockItem = {
diff --git a/core/src/utils/index.ts b/core/src/utils/index.ts
index a8cde0c..63d2620 100644
--- a/core/src/utils/index.ts
+++ b/core/src/utils/index.ts
@@ -1,8 +1,8 @@
-import { Parent, Node } from 'unist';
+import { type Node } from 'unist';
 import webpack from 'webpack';
 import remark from 'remark';
 import { getTransformValue } from './transform';
-import { Options, FUNNAME_PREFIX, CodeBlockItem, CodeBlockData } from '../';
+import { type Options, FUNNAME_PREFIX, CodeBlockItem, CodeBlockData } from '../';
 
 /**
  * Creates an object containing the parameters of the current URL.
@@ -32,11 +32,12 @@ export interface MarkdownDataChild extends Node {
   children?: Array<MarkdownDataChild>;
 }
 
-export interface MarkdownParseData extends Parent<MarkdownDataChild> {}
+export interface MarkdownParseData extends MarkdownDataChild {}
 
 /** 转换 代码*/
 export const getProcessor = (source: string) => {
   try {
+    // @ts-ignore
     const child = remark.parse(source) as MarkdownParseData;
     return child.children;
   } catch (err) {
diff --git a/package.json b/package.json
index 033896a..37005e0 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
     "⬆️⬆️⬆️⬆️⬆️ package ⬆️⬆️⬆️⬆️⬆️": "▲▲▲▲▲ package ▲▲▲▲▲",
     "test": "tsbb test",
     "coverage": "tsbb test --coverage --bail",
-    "prepare": "husky install",
+    "prepare": "husky",
     "version": "lerna version --exact --force-publish --no-push --no-git-tag-version",
     "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'",
     "remove": "npm run clean && lerna exec \"rm -rf package-lock.json\" --scope markdown-react-code-preview-loader --scope website",
@@ -45,4 +45,4 @@
     "pretty-quick": "~4.0.0",
     "tsbb": "^4.4.0"
   }
-}
\ No newline at end of file
+}
diff --git a/website/.kktrc.ts b/website/.kktrc.ts
index 55de723..f742bcc 100644
--- a/website/.kktrc.ts
+++ b/website/.kktrc.ts
@@ -5,7 +5,7 @@ import rawModules from '@kkt/raw-modules';
 import scopePluginOptions from '@kkt/scope-plugin-options';
 import { LoaderConfOptions, WebpackConfiguration } from 'kkt';
 import pkg from './package.json';
-import { mdCodeModulesLoader } from 'markdown-react-code-preview-loader';
+// import { mdCodeModulesLoader } from 'markdown-react-code-preview-loader';
 
 export default (conf: WebpackConfiguration, env: 'development' | 'production', options: LoaderConfOptions) => {
   conf = lessModules(conf, env, options);
@@ -19,8 +19,28 @@ export default (conf: WebpackConfiguration, env: 'development' | 'production', o
       VERSION: JSON.stringify(pkg.version),
     }),
   );
-  conf = mdCodeModulesLoader(conf);
+
+  if (Array.isArray(conf.module?.rules)) {
+    conf.module?.rules.forEach((ruleItem) => {
+      if (typeof ruleItem === 'object' && ruleItem !== null) {
+        if (ruleItem.oneOf) {
+          ruleItem.oneOf.unshift({
+            test: /.md$/,
+            use: [
+              {
+                loader: 'markdown-react-code-preview-loader',
+                options: {},
+              },
+            ],
+          });
+        }
+      }
+    });
+  }
+
   conf.module!.exprContextCritical = false;
+  /** https://github.com/kktjs/kkt/issues/446 */
+  conf.ignoreWarnings = [{ module: /node_modules[\\/]parse5[\\/]/ }];
 
   if (process.env.NODE_ENV === 'production') {
     conf.output = { ...conf.output, publicPath: './' };

From cf7764840ff8dbc857877be61b45ab8b894f9a69 Mon Sep 17 00:00:00 2001
From: jaywcjlove <398188662@qq.com>
Date: Thu, 24 Oct 2024 17:42:07 +0800
Subject: [PATCH 22/24] released v2.1.9

---
 core/package.json        | 2 +-
 lerna.json               | 2 +-
 pkg-example/package.json | 2 +-
 website/package.json     | 4 ++--
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/core/package.json b/core/package.json
index c6b2fa7..2c43b3e 100644
--- a/core/package.json
+++ b/core/package.json
@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "markdown-react-code-preview-loader",
-  "version": "2.1.8",
+  "version": "2.1.9",
   "description": "Index react example text in markdown, converted to React components.",
   "homepage": "https://kktjs.github.io/markdown-react-code-preview-loader",
   "author": "SunLxy <1011771396@qq.com>",
diff --git a/lerna.json b/lerna.json
index ec789d7..7b12a5b 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,4 +1,4 @@
 {
-  "version": "2.1.8",
+  "version": "2.1.9",
   "packages": ["website", "core", "pkg-example"]
 }
diff --git a/pkg-example/package.json b/pkg-example/package.json
index 6b7824a..704d012 100644
--- a/pkg-example/package.json
+++ b/pkg-example/package.json
@@ -1,6 +1,6 @@
 {
   "name": "pkg-example",
-  "version": "1.0.0",
+  "version": "2.1.9",
   "private": true,
   "license": "MIT",
   "main": "./cjs/index.js",
diff --git a/website/package.json b/website/package.json
index 76537e7..80249f8 100644
--- a/website/package.json
+++ b/website/package.json
@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "website",
-  "version": "2.1.8",
+  "version": "2.1.9",
   "description": "Simple React package development project example template.",
   "private": true,
   "scripts": {
@@ -34,7 +34,7 @@
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
     "kkt": "~7.5.5",
-    "markdown-react-code-preview-loader": "2.1.8"
+    "markdown-react-code-preview-loader": "2.1.9"
   },
   "eslintConfig": {
     "extends": [

From 2459f09d21bd7b59ea92d9a70100fcae8945783a Mon Sep 17 00:00:00 2001
From: jaywcjlove <398188662@qq.com>
Date: Thu, 24 Oct 2024 17:48:31 +0800
Subject: [PATCH 23/24] doc: Update README.md

---
 core/README-zh.md |  6 +++++-
 core/README.md    | 28 +++++++++++++++++++++-------
 2 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/core/README-zh.md b/core/README-zh.md
index e1a121e..9699059 100644
--- a/core/README-zh.md
+++ b/core/README-zh.md
@@ -66,7 +66,11 @@ import webpack, { Configuration } from 'webpack';
 import scopePluginOptions from '@kkt/scope-plugin-options';
 import { LoaderConfOptions } from 'kkt';
 
-export default (conf: Configuration, env: 'development' | 'production', options: LoaderConfOptions) => {
+export default (
+  conf: Configuration,
+  env: 'development' | 'production',
+  options: LoaderConfOptions
+) => {
   // ....
   config.module.rules.forEach((ruleItem) => {
     if (typeof ruleItem === 'object') {
diff --git a/core/README.md b/core/README.md
index 30fc0ac..151d4bf 100644
--- a/core/README.md
+++ b/core/README.md
@@ -43,7 +43,9 @@ export default (
 import webpack from 'webpack';
 import { Options } from 'markdown-react-code-preview-loader';
 /**
- * `mdCodeModulesLoader` method for adding `markdown-react-code-preview-loader` to webpack config.
+ * `mdCodeModulesLoader` method for adding 
+ * `markdown-react-code-preview-loader` to webpack config.
+ * 
  * @param {webpack.Configuration} config webpack config
  * @param {string[]} lang Parsing language
  * @param {Options} option Loader Options
@@ -66,7 +68,11 @@ import webpack, { Configuration } from 'webpack';
 import scopePluginOptions from '@kkt/scope-plugin-options';
 import { LoaderConfOptions } from 'kkt';
 
-export default (conf: Configuration, env: 'development' | 'production', options: LoaderConfOptions) => {
+export default (
+  conf: Configuration,
+  env: 'development' | 'production',
+  options: LoaderConfOptions
+) => {
   // ....
   config.module.rules.forEach((ruleItem) => {
     if (typeof ruleItem === 'object') {
@@ -121,7 +127,8 @@ import mdObj from 'markdown-react-code-preview-loader/README.md';
 
 // `README.md` raw string text
 mdObj.source
-// The component index object, the React component converted from the markdown indexed example.
+// The component index object,
+// the React component converted from the markdown indexed example.
 // (need to configure meta)
 mdObj.components
 // The component source code index object, the sample source code indexed from markdown.
@@ -203,9 +210,13 @@ import { getURLParameters } from 'markdown-react-code-preview-loader';
 
 getURLParameters('name=Adam&surname=Smith')  // => { name: 'Adam', surname: "Smith" }
 getURLParameters('mdx:preview:demo12')       // => { }
-getURLParameters('mdx:preview:demo12&name=Adam&surname=Smith')  // => { name: 'Adam', surname: "Smith" }
-getURLParameters('mdx:preview:demo12&code=true&boreder=0')      // => { code: 'true', boreder: "0" }
-getURLParameters('mdx:preview:demo12?code=true&boreder=0')      // => { code: 'true', boreder: "0" }
+
+getURLParameters('mdx:preview:demo12&name=Adam&surname=Smith')
+// => { name: 'Adam', surname: "Smith" }
+getURLParameters('mdx:preview:demo12&code=true&boreder=0')
+// => { code: 'true', boreder: "0" }
+getURLParameters('mdx:preview:demo12?code=true&boreder=0')
+// => { code: 'true', boreder: "0" }
 ```
 
 ```markdown
@@ -238,7 +249,10 @@ export default Demo
 ## getCodeBlock 
 
 ```ts
-const getCodeBlock: (child: MarkdownParseData['children'], opts?: Options) => CodeBlockData['data'];
+const getCodeBlock: (
+  child: MarkdownParseData['children'],
+  opts?: Options
+) => CodeBlockData['data'];
 ```
 
 ## Configure meta ID

From e378721057c2e62ad89371599762fc0e1ee54567 Mon Sep 17 00:00:00 2001
From: jaywcjlove <398188662@qq.com>
Date: Thu, 24 Oct 2024 19:56:33 +0800
Subject: [PATCH 24/24] website: add pkg example.

---
 package.json                        |  2 +
 pkg-example/README.md               |  2 +
 website/package.json                |  3 +-
 website/src/App.tsx                 |  2 +
 website/src/Layout.tsx              |  3 ++
 website/src/language/locale/en.json |  3 +-
 website/src/language/locale/zh.json |  3 +-
 website/src/pages/example/App-zh.md | 45 +++++++++-----------
 website/src/pages/pkg/index.tsx     | 64 +++++++++++++++++++++++++++++
 9 files changed, 98 insertions(+), 29 deletions(-)
 create mode 100644 website/src/pages/pkg/index.tsx

diff --git a/package.json b/package.json
index 37005e0..82ed69e 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,8 @@
   },
   "license": "MIT",
   "devDependencies": {
+    "@types/react": "~18.2.0",
+    "@types/react-dom": "~18.2.0",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "husky": "~9.1.6",
diff --git a/pkg-example/README.md b/pkg-example/README.md
index 0a3faea..f990352 100644
--- a/pkg-example/README.md
+++ b/pkg-example/README.md
@@ -1,6 +1,8 @@
 Example
 ===
 
+Add an example of loading EMS package dependencies
+
 ```jsx mdx:preview
 import React from "react";
 import Example from 'pkg-example';
diff --git a/website/package.json b/website/package.json
index 80249f8..eab15bf 100644
--- a/website/package.json
+++ b/website/package.json
@@ -31,9 +31,8 @@
     "@kkt/less-modules": "~7.5.5",
     "@kkt/raw-modules": "~7.5.5",
     "@kkt/scope-plugin-options": "~7.5.5",
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0",
     "kkt": "~7.5.5",
+    "pkg-example": "2.1.9",
     "markdown-react-code-preview-loader": "2.1.9"
   },
   "eslintConfig": {
diff --git a/website/src/App.tsx b/website/src/App.tsx
index d9921f8..3ed47a6 100644
--- a/website/src/App.tsx
+++ b/website/src/App.tsx
@@ -3,6 +3,7 @@ import { HashRouter, Routes, Route } from 'react-router-dom';
 import { Layout } from './Layout';
 import { HomePage } from './pages/docs';
 import { ExamplePage } from './pages/example';
+import { PkgExamplePage } from './pages/pkg';
 
 export default function App() {
   return (
@@ -11,6 +12,7 @@ export default function App() {
         <Route element={<Layout />}>
           <Route path="/" element={<HomePage />} />
           <Route path="/example" element={<ExamplePage />} />
+          <Route path="/pkg-example" element={<PkgExamplePage />} />
         </Route>
       </Routes>
     </HashRouter>
diff --git a/website/src/Layout.tsx b/website/src/Layout.tsx
index 7d60cc5..9db2383 100644
--- a/website/src/Layout.tsx
+++ b/website/src/Layout.tsx
@@ -19,6 +19,9 @@ export function Layout() {
           <NavLink to="/example" replace>
             {i18next.t('example')}
           </NavLink>
+          <NavLink to="/pkg-example" replace>
+            {i18next.t('pkg-example')}
+          </NavLink>
           <dark-mode permanent></dark-mode>
           <Language />
         </nav>
diff --git a/website/src/language/locale/en.json b/website/src/language/locale/en.json
index 4f434b9..b416bd2 100644
--- a/website/src/language/locale/en.json
+++ b/website/src/language/locale/en.json
@@ -3,5 +3,6 @@
   "zh": "chinese",
   "en": "english",
   "docuemnt": "Docuemnt",
-  "example": "Example"
+  "example": "Example",
+  "pkg-example": "PKG Example"
 }
diff --git a/website/src/language/locale/zh.json b/website/src/language/locale/zh.json
index d703f81..0a677b3 100644
--- a/website/src/language/locale/zh.json
+++ b/website/src/language/locale/zh.json
@@ -3,5 +3,6 @@
   "zh": "中文",
   "en": "英文",
   "docuemnt": "文档",
-  "example": "案例"
+  "example": "案例",
+  "pkg-example": "PKG 示例"
 }
diff --git a/website/src/pages/example/App-zh.md b/website/src/pages/example/App-zh.md
index 3144227..de9da2b 100644
--- a/website/src/pages/example/App-zh.md
+++ b/website/src/pages/example/App-zh.md
@@ -16,58 +16,53 @@ import Alert from "@uiw/react-alert";
 
 ```jsx mdx:preview
 import React from "react";
+import { useState } from 'react';
 import ReactDOM from "react-dom";
 import { Alert, ButtonGroup, Button } from "uiw";
 
-class Demo extends React.Component {
-  constructor() {
-    super();
-    this.state = {
-      visible1: false,
-      visible2: false,
-    };
-  }
-  onClick(type) {
-    this.setState({ [type]: !this.state[type] });
-  }
-  onClosed(type) {
-    this.setState({ [type]: false });
-  }
-  render() {
-    return (
+export default function Demo() {
+  const [visible1, setVisible1] = useState(false);
+  const [visible2, setVisible2] = useState(false);
+  return (
       <div>
         <Alert
-          isOpen={this.state.visible1}
+          isOpen={visible1}
           confirmText="确定按钮"
-          onClosed={this.onClosed.bind(this, "visible1")}
+          onClosed={() => {
+            setVisible1(false)
+          }}
           content="这个对话框只有两个个按钮，单击“确定按钮”后，此对话框将关闭。用作通知用户重要信息。"
         />
         <Alert
-          isOpen={this.state.visible2}
+          isOpen={visible2}
           confirmText="确定按钮"
           cancelText="取消按钮"
           type="danger"
           onConfirm={() => console.log("您点击了确定按钮！")}
           onCancel={() => console.log("您点击了取消按钮！")}
-          onClosed={this.onClosed.bind(this, "visible2")}
+          onClosed={() => {
+            setVisible2(false)
+          }}
         >
           这个对话框有两个按钮，单击 “<b>确定按钮</b>” 或 “<b>取消按钮</b>”
           后，此对话框将关闭，触发 “<b>onConfirm</b>” 或 “<b>onCancel</b>”
           事件。用作通知用户重要信息。
         </Alert>
         <ButtonGroup>
-          <Button onClick={this.onClick.bind(this, "visible1")}>
+          <Button onClick={() => {
+            setVisible1(false)
+          }}>
             单个按钮确认对话框
           </Button>
-          <Button onClick={this.onClick.bind(this, "visible2")}>
+          <Button onClick={() => {
+            setVisible2(false)
+          }}>
             确认对话框
           </Button>
         </ButtonGroup>
       </div>
-    );
-  }
+  )
 }
-export default Demo;
 ```
 
 ## 延迟关闭对话框
diff --git a/website/src/pages/pkg/index.tsx b/website/src/pages/pkg/index.tsx
new file mode 100644
index 0000000..9014b81
--- /dev/null
+++ b/website/src/pages/pkg/index.tsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import { FC, PropsWithChildren, useRef } from 'react';
+import MarkdownPreview from '@uiw/react-markdown-preview';
+import { getMetaId, getURLParameters, CodeBlockData } from 'markdown-react-code-preview-loader';
+
+import { Root, Element, RootContent } from 'hast';
+import MDSource from 'pkg-example/README.md';
+import CodeLayout from 'react-code-preview-layout';
+
+const Preview = CodeLayout.Preview;
+const Code = CodeLayout.Code;
+const Toolbar = CodeLayout.Toolbar;
+
+interface CodePreviewProps {
+  mdData?: CodeBlockData;
+  'data-meta'?: string;
+}
+
+const CodePreview: FC<PropsWithChildren<CodePreviewProps>> = (props) => {
+  const $dom = useRef<HTMLDivElement>(null);
+  // @ts-ignore
+  const { mdData, node, 'data-meta': meta, ...rest } = props;
+  // @ts-ignore
+  const line = node?.position?.start.line;
+  const metaId = getMetaId(meta) || String(line);
+  const Child = mdData?.components[`${metaId}`];
+  if (metaId && typeof Child === 'function') {
+    const code = mdData?.data[metaId].value || '';
+    const param = getURLParameters(meta || '');
+    return (
+      <CodeLayout ref={$dom}>
+        <Preview>
+          <Child />
+        </Preview>
+        <Toolbar text={code}>{param.title || 'Example'}</Toolbar>
+        <Code>
+          <pre {...rest} />
+        </Code>
+      </CodeLayout>
+    );
+  }
+  return <code {...rest} />;
+};
+
+export function PkgExamplePage() {
+  return (
+    <MarkdownPreview
+      disableCopy={true}
+      style={{ background: 'transparent' }}
+      source={MDSource.source}
+      rehypeRewrite={(node: Root | RootContent, index: number, parent: Root | Element) => {
+        if (node.type === 'element' && parent && parent.type === 'root' && /h(1|2|3|4|5|6)/.test(node.tagName)) {
+          const child = node.children && (node.children[0] as Element);
+          if (child && child.properties && child.properties.ariaHidden === 'true') {
+            child.children = [];
+          }
+        }
+      }}
+      components={{
+        code: (props) => <CodePreview {...props} mdData={MDSource} />,
+      }}
+    />
+  );
+}
