;
+ status?: boolean;
+ theme?: "light" | "dark";
+ local?: boolean; // 是否开启本地存储
+ lineNumbers?: boolean;
+ onChange?: (value: string, editorView: ViewUpdate) => void;
+ onUpload?: (file: File, callback: Callback) => void;
+ onDragUpload?: (file: File, callback: Callback) => void;
+ onSave?: (value: string, editorView: ViewUpdate) => void;
+}
+
+type Callback = (param: { url: string; alt?: string }) => void;
+```
diff --git a/docs/guide/ast-parser.mdx b/docs/guide/ast-parser.mdx
new file mode 100644
index 0000000..11a2268
--- /dev/null
+++ b/docs/guide/ast-parser.mdx
@@ -0,0 +1,9 @@
+import { PackageManagerTabs } from '@theme';
+
+# AST 解析
+
+完成ast解析，有增量构建
+
+## 安装
+
+
diff --git a/docs/guide/custom-preview.mdx b/docs/guide/custom-preview.mdx
new file mode 100644
index 0000000..7c84302
--- /dev/null
+++ b/docs/guide/custom-preview.mdx
@@ -0,0 +1,261 @@
+# 渲染区样式
+
+## 自定义渲染区样式
+
+通过 `className` 可以自定义渲染区样式，进行样式重写。
+
+> 外层容器类名 `.markdown-editor-preview`。
+
+```css
+p {
+ line-height: 20px;
+}
+
+strong {
+ font-weight: 700;
+}
+
+.mini-md-h1,
+.mini-md-h2,
+.mini-md-h3,
+.mini-md-h4,
+.mini-md-h5,
+.mini-md-h6 {
+ width: 100%;
+ display: block;
+ padding: 0 10px;
+ word-wrap: break-word;
+ /* color: #3f4a54; */
+ color: var(--md-preview-special-color);
+ margin: 0.8em 0;
+ font-weight: 700;
+}
+
+.mini-md-h1 {
+ font-size: 2em;
+}
+
+.mini-md-h2 {
+ font-size: 1.5em;
+}
+
+.mini-md-h3 {
+ font-size: 1.25em;
+}
+
+.mini-md-h4 {
+ font-size: 1em;
+}
+
+.mini-md-h5 {
+ font-size: 0.875em;
+}
+
+.mini-md-h6 {
+ font-size: 0.85em;
+}
+
+.mini-md-inline-code {
+ line-height: 22px;
+ padding: 2px 4px;
+ /* color: #3594f7; */
+ color: var(--md-preview-inlincode-color);
+ /* #f1f1f1 */
+ /* background-color: rgba(59, 170, 250, 0.1); */
+ background-color: var(--md-preview-inlincode-bg-color);
+ border-radius: 4px;
+}
+
+.mini-md-link {
+ color: #2d8cf0;
+ text-decoration: none;
+ transition: color 0.3s;
+ cursor: pointer;
+}
+
+.mini-md-link:hover {
+ color: #73d13d;
+}
+
+.mini-md-image {
+ width: 100%;
+ /* border: 1px solid #e6e6e6; */
+ border: 1px solid var(--md-preview-border-color);
+ border-radius: 3px;
+ box-sizing: border-box;
+ margin: 0 auto;
+ padding: 5px;
+}
+
+.mini-md-hr {
+ border: none;
+ border-top: 1px solid var(--md-preview-border-color);
+ height: 1px;
+ margin: 10px 0;
+}
+
+.mini-md-blockquote {
+ display: block;
+ line-height: 2em;
+ margin: 20px 0;
+ overflow: auto;
+ padding: 0 1.2em;
+ /* border-left: 5px solid #d0d7de; */
+ border-left: 5px solid var(--md-preview-blockquote-border-color);
+ color: var(--md-preview-blockquote-color);
+}
+
+.mini-md-table {
+ width: 50%;
+ border-collapse: collapse;
+ margin: 20px 0;
+}
+
+.mini-md-th,
+.mini-md-td {
+ /* border: 1px solid #ddd; */
+ border: 1px solid var(--md-preview-table-border-color);
+ padding: 8px;
+ text-align: left;
+}
+
+.mini-md-th {
+ /* background-color: #f2f2f2; */
+ background-color: var(--md-preview-th-bg-color);
+}
+
+.mini-md-tr:hover {
+ /* background-color: #f5f5f5; */
+ background-color: var(--md-preview-table-hover-bg-color);
+}
+
+.mini-md-ul,
+.mini-md-ol {
+ margin: 0.6em 0;
+ padding-inline-start: 30px;
+ list-style: initial;
+ .mini-md-li {
+ list-style: initial;
+ &::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;
+ margin: 20px 0;
+ position: relative;
+}
+
+.mini-md-code-container .mini-md-code-header {
+ background-color: #282c34;
+ border-top-left-radius: 5px;
+ border-top-right-radius: 5px;
+ display: flex;
+ font-size: 12px;
+ font-weight: 600;
+ height: 32px;
+ justify-content: space-between;
+ margin-bottom: 0;
+ width: 100%;
+}
+
+.mini-md-code-header .mini-md-code-icon {
+ display: flex;
+ gap: 5px;
+ margin-left: 12px;
+}
+
+.mini-md-code-header .mini-md-code-icon span {
+ border-radius: 50%;
+ display: inline-block;
+ height: 10px;
+ margin-top: 10px;
+ width: 10px;
+}
+
+.mini-md-code-icon span:nth-of-type(1) {
+ background-color: #ec6a5e;
+}
+
+.mini-md-code-icon span:nth-of-type(2) {
+ background-color: #f4bf4f;
+}
+
+.mini-md-code-icon span:nth-of-type(3) {
+ background-color: #61c554;
+}
+
+.mini-md-code-right {
+ display: flex;
+ align-items: center;
+ margin-right: 10px;
+ color: #a9b7c6;
+
+ .copy-code-button-wrapper {
+ margin-left: 5px;
+ display: inline-flex;
+ align-items: center;
+ }
+}
+
+.mini-md-code-container pre {
+ margin: 0;
+}
+
+.mini-md-code-container pre code {
+ background-color: #282c34;
+ border-bottom-left-radius: 5px;
+ border-bottom-right-radius: 5px;
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ color: #a9b7c6;
+ display: block;
+ 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;
+}
+```
+
+## Code 代码块样式
+
+代码块主题，使用的 `highlight.js`。可以自行导入样式使用，例如：
+
+```js
+// 可根据需要引入不同的主题
+import "highlight.js/styles/atom-one-dark.css";
+```
+
diff --git a/docs/guide/grammar.mdx b/docs/guide/grammar.mdx
new file mode 100644
index 0000000..7535eb6
--- /dev/null
+++ b/docs/guide/grammar.mdx
@@ -0,0 +1,158 @@
+# Markdown 语法
+
+## 标题
+
+```md
+# 一级标题
+
+## 二级标题
+
+### 三级标题
+
+#### 四级标题
+
+##### 五级标题
+
+###### 六级标题
+```
+
+## 加粗、斜体、下划线、删除线
+
+输入：
+
+```md
+**加粗**
+
+_斜体_
+
+--下划线--
+
+~~删除线~~
+```
+
+输出：
+
+**加粗**、_斜体_、下划线、~~删除线~~
+
+## 引用
+
+输入：
+
+```md
+> 引用一段内容
+```
+
+输出：
+
+> 引用一段内容
+
+## 分割线
+
+输入：
+
+```md
+---
+```
+
+输出：
+
+---
+
+## 列表
+
+输入：
+
+```md
+
+- 列表1
+- 列表2
+- 列表3
+
+
+1. 列表1
+2. 列表2
+3. 列表3
+```
+
+输出：
+
+无序列表：
+
+- 列表1
+- 列表2
+- 列表3
+
+有序列表：
+
+1. 列表1
+2. 列表2
+3. 列表3
+
+## 内联代码
+
+```md
+`内联代码`
+```
+
+输出：
+
+`内联代码`
+
+## 代码块
+
+输入：
+
+
+\`\`\`js
+console.log('代码块')
+\`\`\`
+
+
+输出：
+
+```js
+console.log('代码块')
+```
+
+## 链接
+
+输入：
+
+```md
+[链接文字](链接地址)
+[链接文字](https://www.example.com)
+```
+
+输出：
+
+[链接文字](https://www.example.com)
+
+## 图片
+
+输入：
+
+```md
+
+
+
+```
+
+输出：
+
+
+
+## 表格
+
+输入：
+
+```md
+| 表头1 | 表头2 | 表头3 |
+| ------ | ------ | ------ |
+| 内容1 | 内容2 | 内容3 |
+```
+
+输出：
+
+| 表头1 | 表头2 | 表头3 |
+| ------ | ------ | ------ |
+| 内容1 | 内容2 | 内容3 |
diff --git a/docs/guide/index.md b/docs/guide/index.md
deleted file mode 100644
index fd01991..0000000
--- a/docs/guide/index.md
+++ /dev/null
@@ -1,90 +0,0 @@
-项目采用 `monorepo` 架构，项目包含3个子项目
-
-- `mini-markdown-ast-parser`：Markdown AST 解析器
-- `mini-markdown-editor`：Markdown 编辑器
-- `mini-markdown-material`：物料组件库
-
-```bash [安装]
-# markdown解析器
-pnpm add mini-markdown-ast-parser
-# react markdown 编辑器
-pnpm add mini-markdown-editor
-```
-
-
-
-::: code-group
-
-```bash [安装]
-# markdown解析器
-pnpm add mini-markdown-ast-parser
-# react markdown 编辑器
-pnpm add mini-markdown-editor
-```
-
-```js [markdown解析器]
-// esm
-import { parseMarkdown, transformHtml } from '@mini-markdown/ast-parser'
-// commonjs
-const { parseMarkdown, transformHtml } = require('@mini-markdown/ast-parser')
-// 样式导入
-import '@mini-markdown/ast-parser/style'
-
-// 解析 markdown 内容为 ast 对象
-const ast = parseMarkdown(code)
-// 转换 ast 为 html 字符串
-const html = transformHtml(ast)
-```
-
-```tsx [markdown编辑器]
-import { useState } from 'react'
-import { Editor, Preview } from 'mini-markdown-editor'
-import 'mini-markdown-editor/dist/style.css'
-
-export default function MarkdownEditor() {
- const [markdown, setMarkdown] = useState('# Hello Mini Markdown\n\n这是一个简单的示例')
-
- return (
-
- {/* 编辑器区域 */}
-
-
-
-
- {/* 预览区域 */}
-
-