diff --git a/src/assets/example/markdown.md b/src/assets/example/markdown.md
index da7e21d5a..b54752202 100644
--- a/src/assets/example/markdown.md
+++ b/src/assets/example/markdown.md
@@ -1,116 +1,14 @@
-# 微信 Markdown 编辑器 @doocs/md
+# 探索 Markdown 的奇妙世界
-## 项目介绍
+欢迎来到 Markdown 的奇妙世界！无论你是写作爱好者、开发者、博主，还是想要简单记录点什么的人，Markdown 都能成为你新的好伙伴。它不仅让写作变得简单明了，还能轻松地将内容转化为漂亮的网页格式。今天，我们将全面探讨 Markdown 的基础和进阶语法，让你在这个过程中充分享受写作的乐趣！
-Markdown 文档自动即时渲染为微信图文，让你不再为微信文章排版而发愁！只要你会基本的 Markdown 语法，就能做出一篇样式简洁而又美观大方的微信图文。
+Markdown 是一种轻量级标记语言，用于格式化纯文本。它以简单、直观的语法而著称，可以快速地生成 HTML。Markdown 是写作与代码的完美结合，既简单又强大。
+## Markdown 基础语法
-## 功能特性
+### 1. 标题：让你的内容层次分明
-- [x] 支持自定义 CSS 样式
-- [x] 支持 Markdown 所有基础语法、数学公式、Mermaid 图表
-- [x] 支持浅色、深色两种编辑器外观
-- [x] 支持 Alt + Shift + F 快速格式化文档
-- [x] 支持色盘取色，快速替换文章整体色调
-- [x] 支持多图上传，可自定义配置图床
-- [x] 支持自定义上传逻辑
-- [x] 支持在编辑框右键弹出功能选项卡
-- [x] 支持批量转换本地图片为线上图片
-
-
-
-
-
-
-
-
-
-## 如何开发和部署
-
-```sh
-# 安装依赖
-npm i
-
-# 启动开发模式
-npm start
-
-# 部署在 /md 目录
-npm run build
-# 访问 http://127.0.0.1:9000/md
-
-# 部署在根目录
-npm run build:h5-netlify
-# 访问 http://127.0.0.1:9000/
-```
-
-## 快速搭建私有服务
-
-### 方式 1. 使用 npm cli
-
-通过我们的 npm cli 你可以轻易搭建属于自己的微信 Markdown 编辑器。
-
-```sh
-# 安装
-npm i -g @doocs/md-cli
-
-# 启动
-md-cli
-
-# 访问
-open http://127.0.0.1:8800/md/
-
-# 启动并指定端口
-md-cli port=8899
-
-# 访问
-open http://127.0.0.1:8899/md/
-```
-
-md-cli 支持以下命令行参数：
-
-- `port` 指定端口号，默认 8800，如果被占用会随机使用一个新端口。
-- `spaceId` dcloud 服务空间配置
-- `clientSecret` dcloud 服务空间配置
-
-### 方式 2. 使用 Docker 镜像
-
-如果你是 Docker 用户，也可以直接使用一条命令，启动完全属于你的、私有化运行的实例。
-
-```sh
-docker run -d -p 8080:80 doocs/md:latest
-```
-
-容器运行起来之后，打开浏览器，访问 http://localhost:8080 即可。
-
-关于本项目 Docker 镜像的更多详细信息，可以关注 https://github.com/doocs/docker-md
-
-#### 推荐阅读
-
-- [阿里又一个 20k+ stars 开源项目诞生，恭喜 fastjson！](https://mp.weixin.qq.com/s/RNKDCK2KoyeuMeEs6GUrow)
-- [刷掉 90% 候选人的互联网大厂海量数据面试题（附题解 + 方法总结）](https://mp.weixin.qq.com/s/rjGqxUvrEqJNlo09GrT1Dw)
-- [好用！期待已久的文本块功能究竟如何在 Java 13 中发挥作用？](https://mp.weixin.qq.com/s/kalGv5T8AZGxTnLHr2wDsA)
-- [2019 GitHub 开源贡献排行榜新鲜出炉！微软谷歌领头，阿里跻身前 12！](https://mp.weixin.qq.com/s/_q812aGD1b9QvZ2WFI0Qgw)
-
----
-
-欢迎关注我的公众号“**Doocs**”，原创技术文章第一时间推送。
-
-
- 
-
-
-
-
-
-----
-
-# Markdown 语法教程
-
-Markdown 是一种轻量级标记语言，常用于撰写格式简单的文本文件，如文档、博客、和 README 文件。它通过简单的语法将普通文本转换为格式化的 HTML 文档。下面是 Markdown 的基本语法介绍。
-
-## 标题
-
-Markdown 使用 `#` 来表示标题。标题等级从 1 到 4，对应 HTML 的 `` 到 `` 标签。
+用 `#` 号来创建标题。标题从 `#` 开始，我们最多支持 4 个 `#` 号，对应 4 级标题。
```markdown
# 一级标题
@@ -119,236 +17,164 @@ Markdown 使用 `#` 来表示标题。标题等级从 1 到 4，对应 HTML 的
#### 四级标题
```
-效果：
+以上代码将渲染出一组层次分明的标题，使你的文章井井有条。
-# 一级标题
-## 二级标题
-### 三级标题
-#### 四级标题
+> 标准 Markdown 支持 1 ~ 6 级标题，此编辑器也不例外，不过我们只准备了四个级别样式，同时也是不推荐文章超过四级标题。
-## 段落和换行
+### 2. 段落与换行：自然流畅
-普通文本直接书写即可形成段落。段落之间空一行即可。使用两个或多个空格加回车来实现换行。
+Markdown 中的段落就是一行接一行的文本。要创建新段落，只需在两行文本之间空一行。
-```markdown
-这是第一段文字。
+### 3. 字体样式：强调你的文字
-这是第二段文字。
-这是同一段中的换行。
-```
-
-效果：
+- **粗体**：用两个星号或下划线包裹文字，如 `**粗体**` 或 `__粗体__`。
+- *斜体*：用一个星号或下划线包裹文字，如 `*斜体*` 或 `_斜体_`。
+- ~~删除线~~：用两个波浪线包裹文字，如 `~~删除线~~`。
-这是第一段文字。
+这些简单的标记可以让你的内容更有层次感和重点突出。
-这是第二段文字。
-这是同一段中的换行。
+### 4. 列表：整洁有序
-## 字体样式
+- **无序列表**：用 `-`、`*` 或 `+` 加空格开始一行。
+- **有序列表**：使用数字加点号（`1.`、`2.`）开始一行。
-- **加粗**：使用 `**` 或 `__` 包裹文本。
-- *斜体*：使用 `*` 或 `_` 包裹文本。
-- ~~删除线~~：使用 `~~` 包裹文本。
+在列表中嵌套其他内容？只需缩进即可实现嵌套效果。
-```markdown
-**加粗**
-*斜体*
-~~删除线~~
-```
+- 无序列表项 1
+ 1. 嵌套有序列表项 1
+ 2. 嵌套有序列表项 2
+- 无序列表项 2
-效果：
+1. 有序列表项 1
+2. 有序列表项 2
-**加粗**
-*斜体*
-~~删除线~~
+### 5. 链接与图片：丰富内容
-## 列表
+- **链接**：用方括号和圆括号创建链接 `[显示文本](链接地址)`。
+- **图片**：和链接类似，只需在前面加上 `!`，如 ``。
-### 无序列表
-
-使用 `-`、`+` 或 `*` 加空格来创建无序列表。
-
-```markdown
-- 项目一
-- 项目二
- - 子项目
-- 项目三
-```
+[访问 Google](https://www.google.com)
-效果：
+
-- 项目一
-- 项目二
- - 子项目
-- 项目三
+轻松实现富媒体内容展示！
-### 有序列表
+> 因微信公众号平台不支持除公众号文章以外的链接，故其他平台的链接，会呈现链接色泽但不能点击。
-使用数字加点来创建有序列表。
+> 对于这些链接请注意明文书写，或点击左上角「格式->微信外链接转底部引用」开启引用，这样就可以在底部观察到链接指向。
-```markdown
-1. 项目一
-2. 项目二
- 1. 子项目
-3. 项目三
-```
+### 6. 引用：引用名言或引人深思的句子
-效果：
+使用 `>` 来创建引用，只需在文本前面加上它。多层引用？在前一层 `>` 后再加一个就行。
-1. 项目一
-2. 项目二
- 1. 子项目
-3. 项目三
+> 这是一个引用
+>> 这是一个嵌套引用
-## 链接
+这让你的引用更加富有层次感。
-### 行内链接
+### 7. 代码块：展示你的代码
-使用 `[显示文本](链接地址)` 创建行内链接。
+- **行内代码**：用反引号包裹，如 `code`。
+- **代码块**：用三个反引号包裹，并指定语言，如：
-```markdown
-[百度](https://www.baidu.com)
+```js
+console.log("Hello, Markdown!");
```
-效果：
-
-[百度](https://www.baidu.com)
+语法高亮让你的代码更易读。
-## 图片
+### 8. 分割线：分割内容
-使用 `` 插入图片。
+用三个或更多的 `-`、`*` 或 `_` 来创建分割线。
-```markdown
-
-```
+---
-效果：
+为你的内容添加视觉分隔。
-
+### 9. 表格：清晰展示数据
-## 代码
+Markdown 支持简单的表格，用 `|` 和 `-` 分隔单元格和表头。
-### 行内代码
+| 名称 | 年龄 | 职业 |
+| ------ | ---- | ------ |
+| 小明 | 25 | 开发者 |
+| 小红 | 24 | 设计师 |
-使用反引号 `` ` `` 包裹行内代码。
+这样的表格让数据展示更为清爽！
-```markdown
-使用 `print('Hello World')` 来输出文本。
-```
+> 手动编写标记太麻烦？我们提供了便捷方式。左上方点击「编辑->插入表格」，即可快速实现表格渲染。
-效果：
+## Markdown 进阶技巧
-使用 `print('Hello World')` 来输出文本。
+### 1. LaTeX 公式：完美展示数学表达式
-### 代码块
+Markdown 允许嵌入 LaTeX 语法展示数学公式：
-使用三个反引号 ``` 包裹代码块，可以指定语言来高亮代码。
+- **行内公式**：用 `$` 包裹公式，如 $E = mc^2$。
+- **块级公式**：用 `$$` 包裹公式，如：
-```markdown
-```python
-def hello():
- print("Hello, World!")
-```
-```
-
-效果：
+$$
+\begin{aligned}
+d_{i, j} &\leftarrow d_{i, j} + 1 \\
+d_{i, y + 1} &\leftarrow d_{i, y + 1} - 1 \\
+d_{x + 1, j} &\leftarrow d_{x + 1, j} - 1 \\
+d_{x + 1, y + 1} &\leftarrow d_{x + 1, y + 1} + 1
+\end{aligned}
+$$
-```python
-def hello():
- print("Hello, World!")
-```
-
-## 流程图
+这是展示复杂数学表达的利器！
+### 2. Mermaid 流程图：可视化流程
-```mermaid
-pie
- title Key elements in Product X
- "Calcium" : 42.96
- "Potassium" : 50.05
- "Magnesium" : 10.01
- "Iron" : 5
-```
+Mermaid 是强大的可视化工具，可以在 Markdown 中创建流程图、时序图等。
```mermaid
-classDiagram
-Class01 <|-- AveryLongClass : Cool
-Class03 *-- Class04
-Class05 o-- Class06
-Class07 .. Class08
-Class09 --> C2 : Where am i?
-Class09 --* C3
-Class09 --|> Class07
-Class07 : equals()
-Class07 : Object[] elementData
-Class01 : size()
-Class01 : int chimp
-Class01 : int gorilla
-Class08 <--> C2: Cool label
+graph TD;
+ A-->B;
+ A-->C;
+ B-->D;
+ C-->D;
```
-
```mermaid
pie
- title Key elements in Product X
- "Calcium" : 42.96
- "Potassium" : 50.05
- "Magnesium" : 10.01
- "Iron" : 5
+ title Key elements in Product X
+ "Calcium" : 42.96
+ "Potassium" : 50.05
+ "Magnesium" : 10.01
+ "Iron" : 5
```
-
```mermaid
pie
- title 为什么总是宅在家里？
- "喜欢宅" : 45
- "天气太热" : 70
- "穷" : 500
- "关你屁事" : 95
-```
-
-## 表格
-
-使用 `|` 分隔列，使用 `-` 分隔表头和内容。
-
-```markdown
-| 名称 | 年龄 | 城市 |
-|--------|------|--------|
-| 小明 | 20 | 北京 |
-| 小红 | 22 | 上海 |
+ title 为什么总是宅在家里？
+ "喜欢宅" : 45
+ "天气太热" : 70
+ "穷" : 500
+ "没人约" : 95
```
-效果：
-
-| 名称 | 年龄 | 城市 |
-|--------|------|--------|
-| 小明 | 20 | 北京 |
-| 小红 | 22 | 上海 |
-
-## 引用
+这种方式不仅能直观展示流程，还能提升文档的专业性。
-使用 `>` 创建引用。
-
-```markdown
-> 这是一段引用文本。
-```
+> 更多用法，参见：[Mermaid User Guide](https://mermaid.js.org/intro/getting-started.html)。
-效果：
+## 结语
-> 这是一段引用文本。
+Markdown 是一种简单、强大且易于掌握的标记语言，通过学习基础和进阶语法，你可以快速创作内容并有效传达信息。无论是技术文档、个人博客还是项目说明，Markdown 都是你的得力助手。希望这篇文章能够带你全面了解 Markdown 的潜力，让你的写作更加丰富多彩！
-## 分割线
+现在，拿起 Markdown 编辑器，开始创作吧！探索 Markdown 的世界，你会发现它远比想象中更精彩！
-使用三个或更多的 `-`、`*`、`_` 创建分割线。
-
-```markdown
----
-```
+#### 推荐阅读
-效果：
+- [阿里又一个 20k+ stars 开源项目诞生，恭喜 fastjson！](https://mp.weixin.qq.com/s/RNKDCK2KoyeuMeEs6GUrow)
+- [刷掉 90% 候选人的互联网大厂海量数据面试题（附题解 + 方法总结）](https://mp.weixin.qq.com/s/rjGqxUvrEqJNlo09GrT1Dw)
+- [好用！期待已久的文本块功能究竟如何在 Java 13 中发挥作用？](https://mp.weixin.qq.com/s/kalGv5T8AZGxTnLHr2wDsA)
+- [2019 GitHub 开源贡献排行榜新鲜出炉！微软谷歌领头，阿里跻身前 12！](https://mp.weixin.qq.com/s/_q812aGD1b9QvZ2WFI0Qgw)
---
-### 结束语
+欢迎关注我的公众号“**Doocs**”，原创技术文章第一时间推送。
-Markdown 简洁易学，适合用于各种简单的文本格式需求。如果想要深入了解更多语法，推荐查阅 [Markdown 官方文档](https://daringfireball.net/projects/markdown/)。
+
+
+