diff --git a/docs/docs/example/demo.tsx b/docs/docs/example/demo.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e1db7d2099cce5724ee0eef39d827b92a2a0240a
--- /dev/null
+++ b/docs/docs/example/demo.tsx
@@ -0,0 +1,9 @@
+import { Editor } from "@mini-markdown-rc/editor";
+
+export default function () {
+  return (
+    <div style={{ width: "100%", height: "500px" }}>
+      <Editor />
+    </div>
+  );
+}
diff --git a/docs/docs/example/index.mdx b/docs/docs/example/index.mdx
new file mode 100644
index 0000000000000000000000000000000000000000..015d766f1144fa2b3f95319d4709f40a0d00990a
--- /dev/null
+++ b/docs/docs/example/index.mdx
@@ -0,0 +1,9 @@
+# hello
+
+```tsx title="hello.ts"
+console.log('hello')
+```
+
+## 案例
+
+<code src='./demo.tsx' />
\ No newline at end of file
diff --git a/docs/guide/api.mdx b/docs/docs/guide/api.mdx
similarity index 100%
rename from docs/guide/api.mdx
rename to docs/docs/guide/api.mdx
diff --git a/docs/guide/ast-parser.mdx b/docs/docs/guide/ast-parser.mdx
similarity index 95%
rename from docs/guide/ast-parser.mdx
rename to docs/docs/guide/ast-parser.mdx
index f33ea5650d106c767515a7f9f6607f703f1f70da..867de55bc4572fd53c91148cb6df2bf710b661c2 100644
--- a/docs/guide/ast-parser.mdx
+++ b/docs/docs/guide/ast-parser.mdx
@@ -1,4 +1,4 @@
-import { PackageManagerTabs } from "@theme";
+import { PackageManagerTabs } from "@rspress/theme-default";
 
 # AST 解析
 
@@ -141,6 +141,18 @@ import { parseMarkdown, transformHtml } from "@mini-markdown-rc/ast-parser";
 const { parseMarkdown, transformHtml } = require("@mini-markdown-rc/ast-parser");
 ```
 
+## 样式
+
+该库导出了一个默认样式文件，用于渲染转换后的html样式。
+
+> 对于代码块的样式，需要手动引入样式文件。
+>
+> `import "highlight.js/styles/atom-one-dark.css";`
+
+```ts
+import '@mini-markdown-rc/ast-parser/style/index.css'
+```
+
 ## 案例
 
 ```js
diff --git a/docs/guide/custom-preview.mdx b/docs/docs/guide/custom-preview.mdx
similarity index 100%
rename from docs/guide/custom-preview.mdx
rename to docs/docs/guide/custom-preview.mdx
diff --git a/docs/guide/grammar.mdx b/docs/docs/guide/grammar.mdx
similarity index 100%
rename from docs/guide/grammar.mdx
rename to docs/docs/guide/grammar.mdx
diff --git "a/docs/guide/img/\350\207\252\345\256\232\344\271\211\345\267\245\345\205\267\346\240\217-component.png" "b/docs/docs/guide/img/\350\207\252\345\256\232\344\271\211\345\267\245\345\205\267\346\240\217-component.png"
similarity index 100%
rename from "docs/guide/img/\350\207\252\345\256\232\344\271\211\345\267\245\345\205\267\346\240\217-component.png"
rename to "docs/docs/guide/img/\350\207\252\345\256\232\344\271\211\345\267\245\345\205\267\346\240\217-component.png"
diff --git a/docs/guide/index.mdx b/docs/docs/guide/index.mdx
similarity index 100%
rename from docs/guide/index.mdx
rename to docs/docs/guide/index.mdx
diff --git a/docs/guide/shortcut-keys.mdx b/docs/docs/guide/shortcut-keys.mdx
similarity index 100%
rename from docs/guide/shortcut-keys.mdx
rename to docs/docs/guide/shortcut-keys.mdx
diff --git a/docs/guide/start.mdx b/docs/docs/guide/start.mdx
similarity index 78%
rename from docs/guide/start.mdx
rename to docs/docs/guide/start.mdx
index 8b5edf145a24faeb3e800d08e59793fa3aa9a6a6..5261d73153c9f93c4d9b2170f10cfaef16174a1f 100644
--- a/docs/guide/start.mdx
+++ b/docs/docs/guide/start.mdx
@@ -1,4 +1,4 @@
-import { PackageManagerTabs } from '@theme';
+import { PackageManagerTabs } from '@rspress/theme-default';
 
 # 快速开始
 
@@ -12,7 +12,7 @@ import { PackageManagerTabs } from '@theme';
 
 ## 使用
 
-```tsx [src/App.tsx]
+```tsx title="App.tsx"
 import { Editor } from "@mini-markdown-rc/editor";
 
 export default function App() {
diff --git a/docs/index.md b/docs/docs/index.md
similarity index 100%
rename from docs/index.md
rename to docs/docs/index.md
diff --git a/docs/public/gitee.svg b/docs/docs/public/gitee.svg
similarity index 100%
rename from docs/public/gitee.svg
rename to docs/docs/public/gitee.svg
diff --git a/docs/public/logo.svg b/docs/docs/public/logo.svg
similarity index 100%
rename from docs/public/logo.svg
rename to docs/docs/public/logo.svg
diff --git a/docs/public/react_light.svg b/docs/docs/public/react_light.svg
similarity index 100%
rename from docs/public/react_light.svg
rename to docs/docs/public/react_light.svg
diff --git a/docs/example/index.tsx b/docs/example/index.tsx
deleted file mode 100644
index d35fb38e370a20a684be1dbb7635260bb3c750fc..0000000000000000000000000000000000000000
--- a/docs/example/index.tsx
+++ /dev/null
@@ -1,152 +0,0 @@
-import React, { FC, useEffect, useRef, useState } from "react";
-import { Editor, insertContent, ToolbarManager } from "@mini-markdown-rc/editor";
-import type { Callback, EditorRef } from "@mini-markdown-rc/editor";
-import { Button, message } from "antd";
-// 可根据需要引入不同的主题
-import "highlight.js/styles/atom-one-dark.css";
-import { ViewUpdate } from "@mini-markdown-rc/editor";
-
-export const frontmatter = {
-  // 声明布局类型
-  pageType: "page",
-};
-
-const App: FC = () => {
-  // 请求测试
-  const handleUpload = async (file: File, callback: Callback) => {
-    await new Promise((resolve) => {
-      setTimeout(() => {
-        console.log("settimeout 上传成功", file);
-        resolve({});
-      }, 1500);
-    });
-    callback({
-      url: "https://www.baidu.com/img/flexible/logo/pc/result@2.png",
-      alt: "alt",
-    });
-    message.success("上传成功");
-  };
-
-  const [theme, setTheme] = useState<"light" | "dark">("light");
-  const changeTheme = () => {
-    setTheme(theme === "light" ? "dark" : "light");
-  };
-
-  const handleChange = (val: string, view: ViewUpdate) => {
-    console.log(val, view);
-  };
-
-  const handlePatseUpload = async (file: File, callback: Callback) => {
-    await new Promise((resolve) => {
-      setTimeout(() => {
-        console.log("settimeout 上传成功", file);
-        resolve({});
-      }, 1500);
-    });
-    callback({
-      url: "https://www.baidu.com/img/flexible/logo/pc/result@2.png",
-      alt: "123",
-    });
-    message.success("上传成功");
-  };
-
-  const editorRef = useRef<EditorRef>(null);
-
-  useEffect(() => {
-    if (editorRef.current) {
-      console.log(editorRef.current);
-    }
-  }, []);
-
-  return (
-    <>
-      <Button onClick={changeTheme}>主题切换{theme}</Button>
-      <Button
-        onClick={() => {
-          editorRef.current?.setContent("hello world");
-        }}
-      >
-        插入内容
-      </Button>
-      <Button
-        onClick={() => {
-          const text = editorRef.current?.getContent();
-          console.log(text);
-        }}
-      >
-        获取内容
-      </Button>
-      <Button
-        onClick={() => {
-          editorRef.current?.clear();
-        }}
-      >
-        清空内容
-      </Button>
-      <Button
-        onClick={() => {
-          editorRef.current?.setCursor(100, 100);
-        }}
-      >
-        设置光标位置（100，100）
-      </Button>
-      <Button
-        onClick={() => {
-          const pos = editorRef.current?.getCursor();
-          console.log(pos);
-        }}
-      >
-        获取光标位置
-      </Button>
-      <Button
-        onClick={() => {
-          const text = editorRef.current?.getSelection();
-          console.log(text);
-        }}
-      >
-        获取选中内容
-      </Button>
-      <Button
-        onClick={() => {
-          editorRef.current?.focus();
-        }}
-      >
-        聚焦
-      </Button>
-      <Button
-        onClick={() => {
-          const instance = editorRef.current?.getEditorInstance();
-          console.log(instance);
-        }}
-      >
-        获取编辑器实例
-      </Button>
-      <Button
-        onClick={() => {
-          const instance = editorRef.current?.getPreviewInstance();
-          console.log(instance);
-        }}
-      >
-        获取预览区实例
-      </Button>
-      <div style={{ height: "600px" }}>
-        <Editor
-          status={true}
-          onUpload={handleUpload}
-          local={false}
-          theme={theme}
-          onChange={handleChange}
-          enableShortcuts={true}
-          onDragUpload={handlePatseUpload}
-          onPatseUpload={handlePatseUpload}
-          ref={editorRef}
-          value={
-            "# 标题\n## 二级标题\n### 三级标题\n#### 四级标题\n##### 五级标题\n###### 六级标题\n"
-          }
-        />
-      </div>
-    </>
-  );
-};
-
-export default App;
diff --git a/docs/rspress.config.ts b/docs/rspress.config.ts
index a8c3bb3fdc3c53772aa77a779bc4b4178bb755ee..3b69b4dddce049cdbe936865afa58ce27f81a74e 100644
--- a/docs/rspress.config.ts
+++ b/docs/rspress.config.ts
@@ -1,12 +1,14 @@
 import { defineConfig } from "rspress/config";
 import { sidebar } from "./sidebar";
-// import { pluginPreview } from "@rspress/plugin-preview";
+import { pluginPreview } from "@rspress/plugin-preview";
 
 export default defineConfig({
-  // plugins: [pluginPreview({
-  //   // defaultRenderMode: 'pure'
-  // })],
-  root: "./",
+  plugins: [
+    pluginPreview({
+      defaultRenderMode: "pure",
+    }),
+  ],
+  root: "docs",
   title: "Mini Markdown Editor",
   description: "一个基于 React 的 Markdown 编辑器",
   icon: "/logo.svg",
diff --git a/docs/tsconfig.json b/docs/tsconfig.json
index 81288d7ff40687417b061bb8985e06b9ad425a69..df9ad9637cc163054e2570d64c9417d43d3fb91a 100644
--- a/docs/tsconfig.json
+++ b/docs/tsconfig.json
@@ -17,9 +17,7 @@
         "allowImportingTsExtensions": true,
     },
     "include": [
-        "**/*.mdx",
-        "**/*.ts",
-        "**/*.tsx",
+        "docs",
         "theme",
         "rspress.config.ts"
     ],
diff --git a/packages/mini-markdown-ast-parser/example/demo.css b/packages/mini-markdown-ast-parser/example/demo.css
index 728d95946c3cc80b2205c460ea8cd0b802a0214e..92d97dd247067cffe590fe54c00834d60b2a96a3 100644
--- a/packages/mini-markdown-ast-parser/example/demo.css
+++ b/packages/mini-markdown-ast-parser/example/demo.css
@@ -9,6 +9,8 @@
   padding: 0 10px;
   word-wrap: break-word;
   color: #3f4a54;
+  margin: 0.8em 0;
+  font-weight: 700;
 }
 
 .mini-md-h1 {
@@ -39,7 +41,6 @@
   line-height: 22px;
   padding: 2px 4px;
   color: #3594f7;
-  /* #f1f1f1 */
   background-color: rgba(59, 170, 250, 0.1);
   border-radius: 4px;
 }
@@ -77,8 +78,7 @@
   margin: 20px 0;
   overflow: auto;
   padding: 0 1.2em;
-  background-color: #ececec;
-  border-left: 5px solid #35b378;
+  border-left: 5px solid #d0d7de;
   color: #3f4a54;
 }
 
@@ -106,12 +106,37 @@
 .mini-md-ul,
 .mini-md-ol {
   margin: 0.6em 0;
+  padding-inline-start: 30px;
+  list-style: initial;
+}
+
+.mini-md-li {
+  list-style: initial;
 }
 
 .mini-md-li::marker {
   color: #1456f0;
 }
 
+.mini-md-ul > .mini-md-li {
+  list-style-type: disc;
+}
+.mini-md-ul .mini-md-ul > .mini-md-li {
+  list-style-type: circle;
+}
+.mini-md-ul .mini-md-ul .mini-md-ul > .mini-md-li {
+  list-style-type: square;
+}
+.mini-md-ol > .mini-md-li {
+  list-style-type: decimal;
+}
+.mini-md-ol .mini-md-ol > .mini-md-li {
+  list-style-type: lower-alpha;
+}
+.mini-md-ol .mini-md-ol .mini-md-ol > .mini-md-li {
+  list-style-type: lower-roman;
+}
+
 .mini-md-code-container {
   font-size: 12px;
   line-height: 1;
@@ -176,9 +201,19 @@
   border-top-right-radius: 0;
   color: #a9b7c6;
   display: block;
-  font-family: source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace;
+  font-family:
+    source-code-pro,
+    Menlo,
+    Monaco,
+    Consolas,
+    Courier New,
+    monospace;
   font-size: 14px;
   line-height: 1.6;
   overflow: auto;
   padding: 1em;
 }
+
+.markdown-editor-preview p {
+  margin: 0 !important;
+}
diff --git a/packages/mini-markdown-ast-parser/example/demo.md b/packages/mini-markdown-ast-parser/example/demo.md
index 36116c8a2dec673fddcf082c5a06e34dc899a852..d46173eaa0ab698cf91effe633edf68d3b0f0631 100644
--- a/packages/mini-markdown-ast-parser/example/demo.md
+++ b/packages/mini-markdown-ast-parser/example/demo.md
@@ -13,4 +13,140 @@ asd
     4. demo4
   5. demo5
 测试
-6. 
\ No newline at end of file
+6. 
+
+asdss**--~~_asd_~~--**asd_123_
+
+**asd**
+
+asd`code``code`asd--uder--~~bolang~~
+
+--uder--[link](./demo.md)
+
+---
+
+# h1 `code` _bolang_
+## h2 `code` --bolang--
+
+> blockquote `code`
+
+> blockquote `code`
+>
+> blockquote _bolang_
+
+![image](https://www.baidu.com/img/flexible/logo/pc/result@2.png)
+![image](https://www.baidu.com/img/flexible/logo/pc/result@2.png)
+
+- 1
+  - asd
+    - 啊啥的、2
+        - 啊啥的、2
+        - 啊啥的、asdsa
+    - 啊啥的、asdsa
+  - 啊啥的、asdsa
+    - 啊啥的、asdsa
+- 2
+  - 2asd
+    - 啊啥的、3
+  - 啊啥的、asdsa
+- 3
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+<body>
+  ${html}
+</body>
+<script>
+console.log(${JSON.stringify(ast)})
+</script>
+</html>
+```
+```js
+const a = 1;
+```
+
+<p>hello<u style="color: red;">red</u></p>
+
+```python
+def hello():
+    print('hello')
+    return
+```
+
+`<p>hello</p>`
+
+| 姓名 | 年龄 | 地址 |
+| ------ | ------- | ------- |
+| 张三 | 18   | `北京` |
+| 李四 | 20   | `上海` |
+
+-----
+
+asdss**asd**asd_123_
+
+**asd**
+
+asd`code``code`asd--uder--~~bolang~~
+
+--uder--[link](./demo.md)
+
+---
+
+# h1 `code` _bolang_
+## h2 `code` --bolang--
+
+> blockquote `code`
+
+> blockquote `code`
+>
+> blockquote _bolang_
+
+![image](https://www.baidu.com/img/flexible/logo/pc/result@2.png)
+![image](https://www.baidu.com/img/flexible/logo/pc/result@2.png)
+
+- 1
+  - asd
+    - 啊啥的、2
+        - 啊啥的、2
+    - 啊啥的、asdsa
+- 2
+  - 2asd
+- 3
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  ${html}
+</body>
+<script>
+console.log(${JSON.stringify(ast)})
+</script>
+</html>
+```
+```js
+const a = 1;asdasdasdsadad
+```
+
+<p>hello<u style="color: red;">red</u></p>
+
+1. aaa
+    1. 222
+    2. 333
+        1. 111
+3. bbb
+
+```python
+def hello():
+```
+
+`<p>hello</p>`
+
+| 姓名 | 年龄 | 地址 |
+| ------ | ------- | ------- |
+| 张三 | 18   | 北京 |
\ No newline at end of file
diff --git "a/packages/mini-markdown-ast-parser/example/markdown\347\274\226\350\276\221\345\231\250\350\257\255\346\263\225\350\247\204\345\210\231.md" "b/packages/mini-markdown-ast-parser/example/markdown\347\274\226\350\276\221\345\231\250\350\257\255\346\263\225\350\247\204\345\210\231.md"
deleted file mode 100644
index 1ed30ed8d6c551e9a791a478955b8a0c6bbe3336..0000000000000000000000000000000000000000
--- "a/packages/mini-markdown-ast-parser/example/markdown\347\274\226\350\276\221\345\231\250\350\257\255\346\263\225\350\247\204\345\210\231.md"
+++ /dev/null
@@ -1,33 +0,0 @@
-# heading 标题
-
-**加粗** bold 加粗
-
-_斜体_ italic 斜体
-
---下划线-- underline 下划线
-
-~~删除线~~ delete 删除线
-
-> blockquote 引用
-
-[link](http://www.xxx.com) link 链接
-
-![image](http://www.xxx.com/image.jpg) image 图片
-
-`inlineCode` inlineCode 行内高亮
-
---- thematicBreak 分割线
-
-```js
-```
-code 代码
-
-
-- list 列表
-1. list 列表
-
-| head1 | head2 | head3 |
-|-------|-------|-------|
-| cell1 | cell2 | cell3 | table 表格
-
-<div /> html 标签
diff --git a/packages/mini-markdown-ast-parser/package.json b/packages/mini-markdown-ast-parser/package.json
index d3d89bd93f112553f0487a64f1d8efe73c5a686b..8d3d76db3cad84cbce80fc997ce76e48a4550ffa 100644
--- a/packages/mini-markdown-ast-parser/package.json
+++ b/packages/mini-markdown-ast-parser/package.json
@@ -14,7 +14,8 @@
     "./style": {
       "import": "./dist/style/index.css",
       "require": "./dist/style/index.css"
-    }
+    },
+    "./*": "./dist/*"
   },
   "publishConfig": {
     "access": "public",
diff --git a/packages/mini-markdown-ast-parser/src/styles/index.css b/packages/mini-markdown-ast-parser/src/styles/index.css
index e01822699daee6a378eca720104c4fedd3e1b72e..92d97dd247067cffe590fe54c00834d60b2a96a3 100644
--- a/packages/mini-markdown-ast-parser/src/styles/index.css
+++ b/packages/mini-markdown-ast-parser/src/styles/index.css
@@ -9,7 +9,8 @@
   padding: 0 10px;
   word-wrap: break-word;
   color: #3f4a54;
-  margin: 0 !important;
+  margin: 0.8em 0;
+  font-weight: 700;
 }
 
 .mini-md-h1 {
@@ -40,7 +41,6 @@
   line-height: 22px;
   padding: 2px 4px;
   color: #3594f7;
-  /* #f1f1f1 */
   background-color: rgba(59, 170, 250, 0.1);
   border-radius: 4px;
 }
@@ -78,8 +78,7 @@
   margin: 20px 0;
   overflow: auto;
   padding: 0 1.2em;
-  background-color: #ececec;
-  border-left: 5px solid #35b378;
+  border-left: 5px solid #d0d7de;
   color: #3f4a54;
 }
 
@@ -107,12 +106,37 @@
 .mini-md-ul,
 .mini-md-ol {
   margin: 0.6em 0;
+  padding-inline-start: 30px;
+  list-style: initial;
+}
+
+.mini-md-li {
+  list-style: initial;
 }
 
 .mini-md-li::marker {
   color: #1456f0;
 }
 
+.mini-md-ul > .mini-md-li {
+  list-style-type: disc;
+}
+.mini-md-ul .mini-md-ul > .mini-md-li {
+  list-style-type: circle;
+}
+.mini-md-ul .mini-md-ul .mini-md-ul > .mini-md-li {
+  list-style-type: square;
+}
+.mini-md-ol > .mini-md-li {
+  list-style-type: decimal;
+}
+.mini-md-ol .mini-md-ol > .mini-md-li {
+  list-style-type: lower-alpha;
+}
+.mini-md-ol .mini-md-ol .mini-md-ol > .mini-md-li {
+  list-style-type: lower-roman;
+}
+
 .mini-md-code-container {
   font-size: 12px;
   line-height: 1;
@@ -177,9 +201,19 @@
   border-top-right-radius: 0;
   color: #a9b7c6;
   display: block;
-  font-family: source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace;
+  font-family:
+    source-code-pro,
+    Menlo,
+    Monaco,
+    Consolas,
+    Courier New,
+    monospace;
   font-size: 14px;
   line-height: 1.6;
   overflow: auto;
   padding: 1em;
 }
+
+.markdown-editor-preview p {
+  margin: 0 !important;
+}
diff --git a/packages/mini-markdown-play/.npmrc b/packages/mini-markdown-play/.npmrc
new file mode 100644
index 0000000000000000000000000000000000000000..caa71fecbd5baa7c15c0e219bcbbf5e963a70314
--- /dev/null
+++ b/packages/mini-markdown-play/.npmrc
@@ -0,0 +1 @@
+shamefully-hoist=false
\ No newline at end of file
diff --git a/packages/mini-markdown-play/package.json b/packages/mini-markdown-play/package.json
index 6bbe33249927dcedf46a13a84b90fb284a202ca3..d58bcbad6b48b270200bc1d70668fe19da64896e 100644
--- a/packages/mini-markdown-play/package.json
+++ b/packages/mini-markdown-play/package.json
@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@mini-markdown-rc/ast-parser": "workspace:^1.0.1",
     "@mini-markdown-rc/editor": "workspace:*",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
diff --git a/packages/mini-markdown-play/src/App.tsx b/packages/mini-markdown-play/src/App.tsx
index 0ed4f80d7d4b6affe4bace18b07ffffafd2746a1..81159ab5bb20e0a6d2dafd44e46af85e0e13231e 100644
--- a/packages/mini-markdown-play/src/App.tsx
+++ b/packages/mini-markdown-play/src/App.tsx
@@ -1,15 +1,16 @@
-import { useRoutes, NavLink } from 'react-router-dom'
-import routes from './router'
+import { useRoutes, NavLink } from "react-router-dom";
+import routes from "./router";
 
 export default function App() {
-  const outlet = useRoutes(routes)
+  const outlet = useRoutes(routes);
   return (
     <>
-      <header className='w-full h-10 flex items-center justify-center gap-5'>
+      <header className="w-full h-10 flex items-center justify-center gap-5">
         <NavLink to="/ui-test">组件库测试</NavLink>
+        <NavLink to="/ast-test">AST测试</NavLink>
         <NavLink to="/css-test">CSS主题切换方案测试</NavLink>
       </header>
       {outlet}
     </>
-  )
+  );
 }
diff --git a/packages/mini-markdown-play/src/pages/ast-demo.md b/packages/mini-markdown-play/src/pages/ast-demo.md
new file mode 100644
index 0000000000000000000000000000000000000000..65a762baf0359292503734e07acf4745085eba4e
--- /dev/null
+++ b/packages/mini-markdown-play/src/pages/ast-demo.md
@@ -0,0 +1,135 @@
+asdss**--~~_asd_~~--**asd_123_
+
+**asd**
+
+asd`code``code`asd--uder--~~bolang~~
+
+--uder--[link](./demo.md)
+
+---
+
+# h1 `code` _bolang_
+## h2 `code` --bolang--
+
+> blockquote `code`
+
+> blockquote `code`
+>
+> blockquote _bolang_
+
+![image](https://www.baidu.com/img/flexible/logo/pc/result@2.png)
+![image](https://www.baidu.com/img/flexible/logo/pc/result@2.png)
+
+- 1
+  - asd
+    - 啊啥的、2
+        - 啊啥的、2
+        - 啊啥的、asdsa
+    - 啊啥的、asdsa
+  - 啊啥的、asdsa
+    - 啊啥的、asdsa
+- 2
+  - 2asd
+    - 啊啥的、3
+  - 啊啥的、asdsa
+- 3
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+<body>
+  ${html}
+</body>
+<script>
+console.log(${JSON.stringify(ast)})
+</script>
+</html>
+```
+```js
+const a = 1;
+```
+
+<p>hello<u style="color: red;">red</u></p>
+
+```python
+def hello():
+    print('hello')
+    return
+```
+
+`<p>hello</p>`
+
+| 姓名 | 年龄 | 地址 |
+| ------ | ------- | ------- |
+| 张三 | 18   | `北京` |
+| 李四 | 20   | `上海` |
+
+-----
+
+asdss**asd**asd_123_
+
+**asd**
+
+asd`code``code`asd--uder--~~bolang~~
+
+--uder--[link](./demo.md)
+
+---
+
+# h1 `code` _bolang_
+## h2 `code` --bolang--
+
+> blockquote `code`
+
+> blockquote `code`
+>
+> blockquote _bolang_
+
+![image](https://www.baidu.com/img/flexible/logo/pc/result@2.png)
+![image](https://www.baidu.com/img/flexible/logo/pc/result@2.png)
+
+- 1
+  - asd
+    - 啊啥的、2
+        - 啊啥的、2
+    - 啊啥的、asdsa
+- 2
+  - 2asd
+- 3
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  ${html}
+</body>
+<script>
+console.log(${JSON.stringify(ast)})
+</script>
+</html>
+```
+```js
+const a = 1;asdasdasdsadad
+```
+
+<p>hello<u style="color: red;">red</u></p>
+
+1. aaa
+    1. 222
+    2. 333
+        1. 111
+3. bbb
+
+```python
+def hello():
+```
+
+`<p>hello</p>`
+
+| 姓名 | 年龄 | 地址 |
+| ------ | ------- | ------- |
+| 张三 | 18   | 北京 |
\ No newline at end of file
diff --git a/packages/mini-markdown-play/src/pages/ast-test.tsx b/packages/mini-markdown-play/src/pages/ast-test.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..1a68151bb61a273fc3d0cf18d17a11c4d5460cf4
--- /dev/null
+++ b/packages/mini-markdown-play/src/pages/ast-test.tsx
@@ -0,0 +1,18 @@
+import { FC, useEffect, useState } from "react";
+// 可根据需要引入不同的主题
+import "highlight.js/styles/atom-one-dark.css";
+import { parseMarkdown, transformHtml } from "@mini-markdown-rc/ast-parser";
+import "@mini-markdown-rc/ast-parser/style/index.css";
+import mdCode from "./ast-demo.md?raw";
+
+const App: FC = () => {
+  const [code, setCode] = useState("");
+  useEffect(() => {
+    const res = parseMarkdown(mdCode);
+    setCode(transformHtml(res));
+  }, []);
+
+  return <div dangerouslySetInnerHTML={{ __html: code }}></div>;
+};
+
+export default App;
diff --git a/packages/mini-markdown-play/src/pages/ui-test.tsx b/packages/mini-markdown-play/src/pages/ui-test.tsx
index c55931480acba190ff39d7bb6f198b8790d1c746..e2f162e4ccc52fde1aa02085233d281f4b07b79f 100644
--- a/packages/mini-markdown-play/src/pages/ui-test.tsx
+++ b/packages/mini-markdown-play/src/pages/ui-test.tsx
@@ -1,4 +1,4 @@
-import { FC, useState } from "react";
+import { FC, useEffect, useState } from "react";
 import styled from "styled-components";
 import { Editor } from "@mini-markdown-rc/editor";
 import type { Callback } from "@mini-markdown-rc/editor";
@@ -6,6 +6,8 @@ import { Button, message } from "antd";
 // 可根据需要引入不同的主题
 import "highlight.js/styles/atom-one-dark.css";
 import { ViewUpdate } from "@mini-markdown-rc/editor";
+import { parseMarkdown } from "@mini-markdown-rc/ast-parser";
+import "@mini-markdown-rc/ast-parser/style/index.css";
 
 const AppWrapper = styled.div`
   width: 100%;
@@ -15,6 +17,10 @@ const AppWrapper = styled.div`
 `;
 
 const App: FC = () => {
+  useEffect(() => {
+    const res = parseMarkdown(`# hello world`);
+    console.log(res);
+  });
   // 请求测试
   const handleUpload = async (file: File, callback: Callback) => {
     await new Promise((resolve) => {
diff --git a/packages/mini-markdown-play/src/router/index.tsx b/packages/mini-markdown-play/src/router/index.tsx
index 663c27139e2b359ac309658286dfbc8a57d83f29..8d6bbe0aa4957e969c711c1d7585522e9fdb0c7c 100644
--- a/packages/mini-markdown-play/src/router/index.tsx
+++ b/packages/mini-markdown-play/src/router/index.tsx
@@ -1,41 +1,46 @@
-import { RouteObject, Navigate } from 'react-router-dom'
-import UITest from '@/pages/ui-test'
-import CssTest from '@/pages/css-test'
-import CssInJs from '@/pages/css-in-js'
-import ModuleCSS from '@/pages/module-css'
-import Tailwindcss from '@/pages/tailwindcss'
+import { RouteObject, Navigate } from "react-router-dom";
+import UITest from "@/pages/ui-test";
+import ASTTest from "@/pages/ast-test";
+import CssTest from "@/pages/css-test";
+import CssInJs from "@/pages/css-in-js";
+import ModuleCSS from "@/pages/module-css";
+import Tailwindcss from "@/pages/tailwindcss";
 
 const routes: RouteObject[] = [
-    {
-        path: '/',
-        element: <Navigate to='/ui-test' />
-    },
-    {
-        path: '/ui-test',
-        element: <UITest />
-    },
-    {
-        path: '/css-test',
-        element: <CssTest />,
-        children: [
-            {
-                index: true,
-                element: <Navigate to='/css-test/css-in-js' />
-            },
-            {
-                path: 'css-in-js',
-                element: <CssInJs />
-            },
-            {
-                path: 'module-css',
-                element: <ModuleCSS />
-            },
-            {
-                path: 'tailwindcss',
-                element: <Tailwindcss />
-            }
-        ]
-    }
-]
+  {
+    path: "/",
+    element: <Navigate to="/ui-test" />,
+  },
+  {
+    path: "/ui-test",
+    element: <UITest />,
+  },
+  {
+    path: "/ast-test",
+    element: <ASTTest />,
+  },
+  {
+    path: "/css-test",
+    element: <CssTest />,
+    children: [
+      {
+        index: true,
+        element: <Navigate to="/css-test/css-in-js" />,
+      },
+      {
+        path: "css-in-js",
+        element: <CssInJs />,
+      },
+      {
+        path: "module-css",
+        element: <ModuleCSS />,
+      },
+      {
+        path: "tailwindcss",
+        element: <Tailwindcss />,
+      },
+    ],
+  },
+];
 
-export default routes
\ No newline at end of file
+export default routes;