完成Markdown使用手册

技术分享/Markdown编辑器使用手册.md

@@ -734,3 +734,1423 @@ Markdown 区块引用是在段落开头使用 > 符号 ，然后后面紧跟一
 ```
 ![](../images/Markdown编辑器使用手册/36.png)  
 
+实际应用示例：
+
+```
+> **用户反馈**：这个功能很有用！
+> 
+> > **开发团队回复**：感谢您的反馈，我们会继续优化。
+> > 
+> > > **项目经理补充**：预计下个版本会有更多改进。
+```
+
+![](../images/Markdown编辑器使用手册/37.png)  
+
+
+
+## 区块中使用列表  
+区块中使用列表实例如下：  
+
+```
+> 区块中使用列表
+> 1. 第一项
+> 2. 第二项
+> + 第一项
+> + 第二项
+> + 第三项
+```
+
+显示结果如下：
+
+![](../images/Markdown编辑器使用手册/38.png) 
+
+## 列表中使用区块  
+如果要在列表项目内放进区块，那么就需要在 > 前添加四个空格的缩进。
+
+列表中使用区块实例如下：  
+```
+* 第一项
+    > 菜鸟教程
+    > 学的不仅是技术更是梦想
+* 第二项
+```
+
+![](../images/Markdown编辑器使用手册/39.png)  
+
+## 引用块内的其他元素  
+引用块内可以包含几乎所有其他 Markdown 元素。
+
+包含标题：  
+```
+> ## 重要提醒
+> 
+> 请在操作前仔细阅读文档，避免数据丢失。
+```
+
+包含列表：   
+```
+> ### 注意事项
+> 
+> 1. 备份重要数据
+> 2. 检查系统兼容性
+> 3. 准备回滚方案
+> 
+> - 测试环境验证
+> - 生产环境部署
+> - 监控系统状态
+```
+
+包含代码：  
+```
+> 要运行这个脚本，请使用以下命令：
+> 
+> ```bash
+> npm install
+> npm start
+> ```
+> 
+> 执行后会在 `http://localhost:3000` 看到结果。
+```
+
+包含链接和图片：  
+```
+> 📚 **推荐阅读**
+> 
+> 详细信息请参考 [官方文档](https://example.com)
+> 
+> ![示例图片](./images/example.png)
+```
+
+## 引用的最佳实践  
+名言警句引用
+
+```
+> "在软件开发中，最昂贵的错误就是构建正确的系统错误的方式，或者构建错误的系统正确的方式。"
+> 
+> — Barry Boehm，软件工程专家
+```
+
+## 重要信息提示  
+成功提示：  
+```
+> ✅ **成功**
+> 
+> 配置已保存并生效。系统将在下次重启时应用新设置。
+```
+
+警告信息：  
+```
+> ❌ **错误**
+> 
+> 连接数据库失败，请检查网络连接或联系系统管理员。
+```
+
+信息提示：  
+```
+> ℹ️ **提示**
+> 
+> 首次使用需要进行账户验证，验证邮件已发送到您的邮箱。
+```
+![](../images/Markdown编辑器使用手册/40.png)   
+
+## 文档结构中的引用  
+章节摘要：  
+```
+# 第一章：项目概述
+
+> **本章要点**
+> 
+> - 了解项目背景和目标
+> - 掌握核心功能特性
+> - 熟悉技术架构设计
+```
+![](../images/Markdown编辑器使用手册/41.png)   
+
+版本更新说明：  
+```
+## v2.1.0 更新内容
+
+> **重大变更**
+> 
+> ⚠️ API 接口路径已调整，旧版本客户端需要更新
+> 
+> 详见 [迁移指南](./migration-guide.md)
+```
+
+
+
+
+
+
+
+
+# Markdown 代码  
+Markdown 提供了多种方式来展示代码，从简单的行内代码到复杂的代码块，满足不同场景下的代码展示需求。  
+
+## 行内代码  
+如果是段落上的一个函数或片段的代码可以用反引号把它包起来（`），例如：  
+```
+`printf()` 函数
+```
+![](../images/Markdown编辑器使用手册/42.png)   
+
+常见用法示例：
+
+函数名：使用 console.log() 输出信息
+变量名：将值赋给 userName 变量
+命令行：运行 npm install 安装依赖
+键盘按键：按 Ctrl+C 复制内容
+文件名：编辑 index.html 文件
+
+![](../images/Markdown编辑器使用手册/43.png)   
+
+
+## 特殊字符转义  
+当需要在行内代码中显示反引号或其他特殊字符时，需要进行转义处理。  
+
+显示反引号的方法：  
+
+使用双反引号包围单反引号：  
+```
+``使用 `反引号` 包围代码``
+```
+![](../images/Markdown编辑器使用手册/44.png)    
+
+使用多个反引号包围：  
+```
+```包含 `` 双反引号的代码```
+```
+![](../images/Markdown编辑器使用手册/45.png)    
+
+其他特殊字符处理：
+
+HTML 标签：<div> 元素
+数学符号：计算 x + y = z
+特殊符号：使用 &nbsp; 表示空格
+
+
+## 代码区块  
+缩进式代码块  
+代码区块使用 4 个空格或者一个制表符（Tab 键）。  
+
+语法格式：  
+```
+正常文本段落
+
+    这是缩进式代码块
+    每行前面有四个空格
+    保持代码的原始格式
+    
+继续正常文本
+```
+![](../images/Markdown编辑器使用手册/46.png)   
+![](../images/Markdown编辑器使用手册/47.png)   
+![](../images/Markdown编辑器使用手册/48.png)   
+
+## 三反引号代码块  
+你也可以用 ``` ```包裹一段代码，并指定一种语言（也可以不指定）：  
+```
+```
+多行代码内容
+可以包含空行
+保持原有缩进
+```
+```
+![](../images/Markdown编辑器使用手册/49.png)   
+
+三反引号（``` ```）是最常用的代码块语法，支持语法高亮和多行代码展示。  
+
+
+```javascript
+$(document).ready(function () {
+    alert('RUNOOB');
+});
+```
+
+![](../images/Markdown编辑器使用手册/50.png)   
+
+注意事项：
+
+缩进式代码块前后需要空行分隔
+所有代码行必须保持一致的缩进
+不支持语法高亮
+在列表中使用时需要8个空格缩进
+
+
+## 语言标识和语法高亮
+在三反引号后添加语言标识符可以启用语法高亮功能。
+
+常用语言标识符列表：  
+
+javascript / js - JavaScript
+python / py - Python
+html - HTML
+css - CSS
+sql - SQL
+json - JSON
+xml - XML
+yaml / yml - YAML
+bash / shell - Shell脚本
+java - Java
+cpp / c++ - C++
+csharp / c# - C#
+php - PHP
+ruby / rb - Ruby
+go - Go语言
+rust - Rust
+typescript / ts - TypeScript
+JavaScript:
+
+![](../images/Markdown编辑器使用手册/51.png)   
+![](../images/Markdown编辑器使用手册/52.png)   
+
+## 代码块的高级特性  
+行号显示
+某些 Markdown 渲染器支持显示行号，通过特定的语法或配置实现。
+
+语法示例（部分支持）：  
+![](../images/Markdown编辑器使用手册/53.png)  
+
+## 代码差异对比  
+用于显示代码的添加、删除或修改，常用于展示版本控制中的变更。
+
+Diff 语法：  
+![](../images/Markdown编辑器使用手册/54.png)    
+![](../images/Markdown编辑器使用手册/55.png)    
+![](../images/Markdown编辑器使用手册/56.png)    
+![](../images/Markdown编辑器使用手册/57.png)     
+
+
+
+
+
+
+
+
+# Markdown 链接  
+链接是使 Markdown 文档具有交互性的关键元素。
+
+掌握链接语法能让你创建内容丰富、易于导航的文档。
+
+链接使用方法如下：  
+```
+[链接名称](链接地址)
+[链接文字](链接地址 "可选的标题")
+或者:
+<链接地址>
+
+```
+
+一个简单的链接：  
+```
+这是一个链接 [上海永天科技官网](https://www.usky.cn)  
+```
+![](../images/Markdown编辑器使用手册/58.png)   
+
+直接使用链接地址：  
+```
+<https://www.usky.cn>
+```
+![](../images/Markdown编辑器使用手册/59.png)   
+
+设置可选标题：  
+```
+这是一个链接 [上海永天科技官网](https://www.usky.cn)
+欢迎访问 [GitHub](https://github.com) 官网
+这是 [百度搜索](https://www.baidu.com "百度一下，你就知道")
+```
+![](../images/Markdown编辑器使用手册/60.png)   
+
+链接标题的作用：
+
+当鼠标悬停在链接上时显示提示信息
+对搜索引擎优化和无障碍访问有帮助
+标题文字放在双引号、单引号或括号中都可以
+邮箱链接：  
+```
+markdown联系我：[发送邮件](mailto:usky@email.com)
+电话联系：[拨打电话](tel:+86-100-0000-8000)
+```
+
+## 参考链接  
+参考式链接将链接定义与使用分离，让文档更整洁，特别适合长文档或需要多次引用相同链接的情况。
+
+基本语法：  
+```
+markdown[链接文字][参考标签]
+
+[参考标签]: URL "可选标题"
+```
+
+我们可以通过变量来设置一个链接，变量赋值在文档末尾进行：  
+```
+这个链接用 1 作为网址变量 [Google][1]
+这个链接用 usky 作为网址变量 [Usky][usky]
+然后在文档的结尾为变量赋值（网址）
+
+  [1]: http://www.google.com/
+  [usky]: https://www.usky.cn/
+```
+![](../images/Markdown编辑器使用手册/61.png)   
+
+简化写法：
+
+当参考标签与链接文字相同时，可以省略第二个方括号：  
+```
+markdown 我喜欢使用 [GitHub][] 来管理代码。
+
+[GitHub]: https://github.com
+
+```
+
+参考链接的优势：
+
+文档正文更清爽，不被长 URL 打断
+便于链接的统一管理和更新
+相同链接可以重复使用，避免重复定义
+链接定义可以放在文档任意位置（通常放在末尾）
+组织技巧： 
+markdown# 学习资源推荐
+```
+## 在线教程
+- [MDN Web Docs][mdn] - 权威的 Web 技术文档
+- [USKY][rnb] - 上海永天科技股份有限公司官网
+- [freeCodeCamp][fcc] - 免费的编程学习平台
+
+## 代码托管
+- [GitHub][github] - 最受欢迎的代码托管服务
+- [GitLab][gitlab] - 企业级的代码管理平台
+
+<!-- 链接定义区域 -->
+[mdn]: https://developer.mozilla.org/
+[rnb]: https://www.usky.cn/
+[fcc]: https://www.freecodecamp.org/
+[github]: https://github.com/
+[gitlab]: https://gitlab.com/
+```
+![](../images/Markdown编辑器使用手册/62.png)   
+
+自动链接识别
+现代 Markdown 解析器通常支持自动识别 URL 和邮箱地址：
+
+URL 自动识别：  
+```
+markdown直接输入网址：https://www.example.com
+用尖括号包围：<https://www.example.com>
+```
+邮箱自动识别：  
+```
+markdown联系邮箱：example@email.com
+或者：<example@email.com>
+```
+注意事项：
+
+自动识别功能依赖于具体的 Markdown 解析器
+为了确保兼容性，建议使用标准的链接语法
+某些特殊字符可能影响自动识别
+锚点链接的使用
+锚点链接用于在同一文档内跳转，特别适合长文档的导航：
+
+跳转到标题：  
+```
+## 目录
+- [第一章：介绍](#第一章介绍)
+- [第二章：安装](#第二章安装)
+- [第三章：使用方法](#第三章使用方法)
+
+# 第一章：介绍
+这里是介绍内容...
+
+# 第二章：安装
+这里是安装说明...
+
+# 第三章：使用方法
+这里是使用说明...
+```
+![](../images/Markdown编辑器使用手册/63.png)  
+
+锚点规则：
+
+标题会自动生成锚点
+锚点名称通常是标题的小写形式
+空格替换为连字符
+移除特殊字符
+手动创建锚点：  
+```
+<a id="custom-anchor"></a>
+## 自定义锚点位置
+
+[跳转到自定义位置](#custom-anchor)
+
+```
+
+页面顶部返回链接：  
+```
+[回到顶部](#)
+```
+
+
+
+
+
+
+
+
+# Markdown 图片  
+图片能让文档更加生动和易于理解。
+
+Markdown 的图片语法简洁而灵活。
+
+Markdown 图片语法格式如下：  
+```
+![替代文字](图片路径)
+![替代文字](图片路径 "图片标题")
+```
+开头一个感叹号 !
+接着一个方括号，里面放上图片的替代文字
+接着一个普通括号，里面放上图片的网址，最后还可以用引号包住并加上选择性的 'title' 属性的文字。  
+相对路径示例：  
+```
+![项目截图](./images/screenshot.png)
+![用户界面](../assets/ui-demo.jpg "用户界面演示")
+![图标](images/icon.svg "应用图标")
+```
+
+绝对路径示例：  
+```
+![本地图片](/Users/username/Documents/image.png)
+![系统截图](C:\Users\username\Pictures\screenshot.png)
+```
+路径使用建议：
+
+推荐使用相对路径，便于项目移植
+建议创建专门的图片文件夹（如 images/、assets/）
+使用有意义的文件名，便于管理
+注意路径分隔符在不同操作系统中的差异
+直接引用网络图片：  
+```
+![USKY 图标](http://47.111.81.118:4000/images/uskylogo.png)
+
+![USKY 图标](http://47.111.81.118:4000/images/uskylogo.png "USKY")  
+```
+
+![](../images/Markdown编辑器使用手册/64.png)  
+
+当然，你也可以像网址那样对图片网址使用变量:  
+```
+这个链接用 1 作为网址变量 [USKY][1].
+然后在文档的结尾为变量赋值（网址）
+
+[1]: http://47.111.81.118:4000/images/uskylogo.png  
+```
+
+Markdown 还没有办法指定图片的高度与宽度，如果你需要的话，你可以使用普通的 `<img> `标签。  
+```
+<img src="http://47.111.81.118:4000/images/uskylogo.png" width="50%">
+```
+
+使用 CDN 服务：  
+```
+![示例图片](https://cdn.jsdelivr.net/gh/user/repo/image.png)
+![Unsplash 图片](https://images.unsplash.com/photo-1506905925346-21bda4d32df4)
+```  
+网络图片注意事项：
+
+确保图片 URL 的稳定性和可访问性
+注意图片的版权问题
+考虑加载速度和网络环境
+建议本地备份重要图片
+
+
+## 图片 alt 文本的重要性  
+Alt 文本（替代文字）在图片无法显示时提供替代信息，同时对无障碍访问和 SEO 很重要：
+
+好的 alt 文本示例：  
+```
+![苹果公司总部大楼外观，现代玻璃幕墙建筑](./images/apple-headquarters.jpg)
+![网站流量统计图表，显示过去六个月的访问量呈上升趋势](./charts/traffic-stats.png)
+![用户登录界面，包含用户名和密码输入框](./screenshots/login-page.png)
+```
+避免的 alt 文本：  
+```
+![图片](image.jpg)  // 太简单，没有描述性
+![](image.jpg)      // 完全没有 alt 文本
+![点击这里](image.jpg)  // 不描述图片内容
+```
+alt 文本最佳实践：
+
+简洁但有描述性
+描述图片的主要内容和用途
+避免使用"图片"、"照片"等冗余词汇
+对于装饰性图片，可以使用空的 alt 文本
+考虑上下文，提供有意义的信息  
+
+## 图片尺寸控制（HTML方式）  
+标准 Markdown 不支持直接控制图片尺寸，但可以使用 HTML 标签。
+
+使用 HTML img 标签：
+```
+<img src="image.jpg" alt="描述文字" width="300" height="200">
+<img src="image.jpg" alt="描述文字" width="50%">
+<img src="image.jpg" alt="描述文字" style="width: 300px; height: auto;">
+```  
+
+响应式图片：  
+```
+<img src="image.jpg" alt="描述文字" style="max-width: 100%; height: auto;">
+```
+
+图片对齐：  
+```
+<!-- 居中对齐 -->
+<div align="center">
+  <img src="image.jpg" alt="居中图片" width="400">
+</div>
+
+<!-- 左对齐（默认） -->
+<img src="image.jpg" alt="左对齐图片" style="float: left; margin-right: 20px;">
+
+<!-- 右对齐 -->
+<img src="image.jpg" alt="右对齐图片" style="float: right; margin-left: 20px;">
+```
+
+## 链接和图片的高级用法  
+图片链接组合
+将图片作为链接的可点击元素。
+
+基本语法：  
+```
+[![图片alt文本](图片URL)](链接URL)
+```
+
+实际示例：  
+```
+[![GitHub项目截图](./images/project-screenshot.png)](https://github.com/username/project)
+[![访问官网](https://example.com/logo.png)](https://example.com "点击访问官网")
+```
+
+常见应用场景：  
+```
+<!-- 项目徽章 -->
+[![Build Status](https://travis-ci.org/user/repo.svg?branch=master)](https://travis-ci.org/user/repo)
+[![License](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
+
+<!-- 应用商店下载 -->
+[![App Store](./images/app-store-badge.png)](https://apps.apple.com/app/your-app)
+[![Google Play](./images/google-play-badge.png)](https://play.google.com/store/apps/details?id=com.yourapp)
+```
+
+相对路径与绝对路径
+相对路径的优势：  
+```
+<!-- 项目结构 -->
+project/
+├── README.md
+├── docs/
+│   ├── guide.md
+│   └── images/
+│       └── screenshot.png
+└── assets/
+    └── logo.png
+
+<!-- 在 README.md 中 -->
+![Logo](./assets/logo.png)
+
+<!-- 在 docs/guide.md 中 -->
+![Screenshot](./images/screenshot.png)
+![Logo](../assets/logo.png)
+```
+
+路径规划建议：
+
+在项目根目录创建统一的资源文件夹
+使用描述性的文件夹名称
+保持路径结构的一致性
+考虑静态网站生成器的路径规则  
+
+## 图片居中和对齐
+方法一：HTML + CSS 
+```
+<div style="text-align: center;">
+  <img src="image.jpg" alt="居中图片" style="max-width: 100%;">
+</div>
+```
+
+方法二：使用 HTML 对齐属性  
+```
+<p align="center">
+  <img src="image.jpg" alt="居中图片" width="400">
+</p>
+```
+
+方法三：创建图片画廊  
+```
+<div style="display: flex; justify-content: space-around; flex-wrap: wrap;">
+  <img src="image1.jpg" alt="图片1" style="width: 30%; margin: 10px;">
+  <img src="image2.jpg" alt="图片2" style="width: 30%; margin: 10px;">
+  <img src="image3.jpg" alt="图片3" style="width: 30%; margin: 10px;">
+</div>
+```
+
+实用的图片展示模板：  
+```
+## 产品展示
+
+### 主要功能
+<table>
+  <tr>
+    <td align="center">
+      <img src="./images/feature1.png" width="200" alt="功能1">
+      <br>
+      <strong>智能识别</strong>
+      <br>
+      <sub>AI驱动的图像识别技术</sub>
+    </td>
+    <td align="center">
+      <img src="./images/feature2.png" width="200" alt="功能2">
+      <br>
+      <strong>快速处理</strong>
+      <br>
+      <sub>毫秒级响应速度</sub>
+    </td>
+  </tr>
+</table>
+
+### 界面预览
+| 移动端 | 桌面端 |
+|:---:|:---:|
+| ![移动界面](./images/mobile.png) | ![桌面界面](./images/desktop.png) |
+| 响应式设计，完美适配 | 大屏体验，功能齐全 |
+```
+
+性能优化建议：
+
+优化图片大小和格式（WebP > PNG > JPG）
+使用适当的图片尺寸，避免在网页中缩放大图
+考虑使用图片压缩工具
+为不同设备准备不同尺寸的图片
+
+## 链接和图片的故障排除  
+常见问题及解决方案：
+
+链接无法点击：检查语法格式，确保方括号和圆括号正确配对
+图片无法显示：验证图片路径和文件存在性
+图片过大：使用 HTML 控制尺寸或优化图片文件
+链接在新窗口打开：使用 HTML <a target="_blank"> 标签
+调试技巧：  
+```
+<!-- 测试链接是否有效 -->
+测试链接：[点击测试](https://httpbin.org/get)
+
+<!-- 测试图片路径 -->
+![测试图片](./images/test.png)
+<!-- 如果不显示，尝试绝对路径或检查文件名大小写 -->
+```
+
+
+
+
+
+
+
+# Markdown 表格  
+表格和引用是 Markdown 中重要的内容组织工具。
+
+表格能够清晰地展示结构化数据，而引用则用于突出重要信息或引用他人观点。
+
+Markdown 制作表格使用 | 来分隔不同的单元格，使用 - 来分隔表头和其他行。
+
+语法格式如下：  
+```
+|  表头   | 表头  |
+|  ----  | ----  |
+| 单元格  | 单元格 |
+| 单元格  | 单元格 |
+```
+![](../images/Markdown编辑器使用手册/65.png)  
+
+语法要点：
+
+表头和数据行之间必须有分隔线
+分隔线至少需要三个连字符 ---
+两端的竖线 | 是可选的，但建议保留以提高可读性
+不需要严格对齐，但对齐后更美观
+
+## 对齐方式  
+我们可以设置表格的对齐方式：
+
+---: 设置内容和标题栏居右对齐。
+:--- 设置内容和标题栏居左对齐。
+:---: 设置内容和标题栏居中对齐。
+实例如下：  
+```
+| 左对齐 | 右对齐 | 居中对齐 |
+| :-----| ----: | :----: |
+| 单元格 | 单元格 | 单元格 |
+| 单元格 | 单元格 | 单元格 |
+```  
+![](../images/Markdown编辑器使用手册/66.png)  
+
+## 复杂表格的处理技巧  
+元格内容格式化
+表格单元格内可以使用大部分 Markdown 语法：  
+```
+| 功能 | 描述 | 状态 |
+|------|------|:----:|
+| **用户登录** | 支持邮箱和手机号登录 | &#x2705; |
+| *密码重置* | 通过邮箱重置密码 | &#x26a0;&#xfe0f; |
+| `API接口` | RESTful API 设计 | &#x2705; |
+| [文档链接](https://example.com) | 查看详细文档 | &#x1f4d6; |
+```
+![](../images/Markdown编辑器使用手册/67.png)  
+
+## 处理长文本  
+当单元格内容较长时，可以使用以下技巧：
+
+换行处理：  
+```
+| 项目 | 详细说明 |
+|------|----------|
+| 需求分析 | 1. 收集用户需求<br>2. 分析业务场景<br>3. 确定功能范围 |
+| 技术选型 | 前端：React + TypeScript<br>后端：Node.js + Express<br>数据库：MongoDB |
+```
+
+缩写和链接：  
+```
+| 技术栈 | 说明 | 官网 |
+|--------|------|------|
+| React | 用户界面库 | [链接](https://reactjs.org) |
+| Vue.js | 渐进式框架 | [链接](https://vuejs.org) |
+| Angular | 完整的框架 | [链接](https://angular.io) |
+```
+![](../images/Markdown编辑器使用手册/68.png)  
+
+表格中的特殊字符
+某些字符在表格中有特殊含义，需要转义：  
+```
+| 字符 | 转义方法 | 示例 |
+|------|----------|------|
+| 竖线 | `\|` | 显示 \| 符号 |
+| 反斜杠 | `\\` | 显示 \\ 符号 |
+| HTML | 直接使用 | <code>&lt;div&gt;</code> |
+```
+![](../images/Markdown编辑器使用手册/69.png)  
+
+## 表格美化建议  
+使用 Emoji 和符号  
+```
+| 状态 | 图标 | 说明 |
+|:----:|:----:|------|
+| 完成 | &#x2705; | 任务已完成 |
+| 进行中 | &#x1f504; | 正在处理 |
+| 待处理 | &#x23f3; | 等待开始 |
+| 错误 | &#x274c; | 出现问题 |
+| 警告 | &#x26a0;&#xfe0f; | 需要注意 |
+```
+![](../images/Markdown编辑器使用手册/70.png)  
+
+数据表格最佳实践
+财务数据表格：  
+```
+| 月份 | 收入 | 支出 | 利润 | 增长率 |
+|:----:|-----:|-----:|-----:|-------:|
+| 1月 | ¥50,000 | ¥35,000 | ¥15,000 | - |
+| 2月 | ¥55,000 | ¥38,000 | ¥17,000 | +13.3% |
+| 3月 | ¥62,000 | ¥42,000 | ¥20,000 | +17.6% |
+| **总计** | **¥167,000** | **¥115,000** | **¥52,000** | **+31.1%** |
+```
+![](../images/Markdown编辑器使用手册/71.png)  
+技术对比表格：  
+```
+| 特性 | React | Vue.js | Angular | 评分 |
+|------|:-----:|:------:|:-------:|:----:|
+| 学习曲线 | 中等 | 简单 | 复杂 | Vue &#x2b50;&#x2b50;&#x2b50; |
+| 性能表现 | 优秀 | 优秀 | 良好 | 平分 &#x2b50;&#x2b50;&#x2b50; |
+| 生态系统 | 丰富 | 成长中 | 完整 | React &#x2b50;&#x2b50;&#x2b50; |
+| 企业支持 | Facebook | 社区 | Google | Angular &#x2b50;&#x2b50;&#x2b50; |
+```
+![](../images/Markdown编辑器使用手册/72.png)  
+
+
+响应式表格处理
+对于复杂表格，可以考虑分解为多个简单表格。
+
+移动端友好的设计：  
+```
+### 基本信息
+| 项目 | 值 |
+|------|-----|
+| 姓名 | 张三 |
+| 年龄 | 25 |
+| 职业 | 工程师 |
+
+### 联系方式
+| 类型 | 信息 |
+|------|------|
+| 邮箱 | zhang@example.com |
+| 电话 | 100-0000-8000 |
+| 地址 | 北京市朝阳区 |
+```
+![](../images/Markdown编辑器使用手册/73.png)  
+
+
+
+
+
+
+
+
+# Markdown 高级技巧  
+## 支持的 HTML 元素  
+不在 Markdown 涵盖范围之内的标签，都可以直接在文档里面用 HTML 撰写。
+
+目前支持的 HTML 元素有：`<kbd> <b> <i> <em> <sup> <sub> <br>`等 ，如：  
+```
+使用 <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd> 重启电脑
+```  
+![](../images/Markdown编辑器使用手册/74.png)  
+
+##  转义  
+Markdown 使用了很多特殊符号来表示特定的意义，如果需要显示特定的符号则需要使用转义字符，Markdown 使用反斜杠转义特殊字符：  
+```
+**文本加粗** 
+\*\* 正常显示星号 \*\*
+```
+![](../images/Markdown编辑器使用手册/75.png)  
+
+Markdown 支持以下这些符号前面加上反斜杠来帮助插入普通的符号：  
+```
+\   反斜线
+`   反引号
+*   星号
+_   下划线
+{}  花括号
+[]  方括号
+()  小括号
+#   井字号
++   加号
+-   减号
+.   英文句点
+!   感叹号
+```
+
+## 公式
+Markdown Preview Enhanced 使用 KaTeX 或者 MathJax 来渲染数学表达式。
+
+KaTeX 拥有比 MathJax 更快的性能，但是它却少了很多 MathJax 拥有的特性。你可以查看 KaTeX supported functions/symbols 来了解 KaTeX 支持那些符号和函数。
+
+默认下的分隔符：
+
+`$...$ `或者 `\(...\) `中的数学表达式将会在行内显示。
+`$$...$$` 或者` \[...\] `或者` ```math `中的数学表达式将会在块内显示。  
+![](../images/Markdown编辑器使用手册/md6.gif)  
+
+```
+$$
+\begin{Bmatrix}
+   a & b \\
+   c & d
+\end{Bmatrix}
+$$
+$$
+\begin{CD}
+   A @>a>> B \\
+@VbVV @AAcA \\
+   C @= D
+\end{CD}
+$$
+```
+![](../images/Markdown编辑器使用手册/76.png)  
+
+
+
+
+
+
+
+
+# 分割线
+分割线用于在视觉上分隔文档的不同部分，创建清晰的内容层次。
+
+## 水平分割线的三种写法
+Markdown 支持三种方式创建水平分割线：
+
+1、使用三个连字符：  
+```
+---
+```
+
+2、使用三个星号：  
+```
+***
+```
+
+3、使用三个下划线：  
+```
+___
+```
+
+所有三种方式的渲染效果相同：  
+![](../images/Markdown编辑器使用手册/77.png)  
+
+## 扩展写法
+可以使用更多的符号，但三个是最小要求：  
+```
+-----
+*****
+_____
+```
+
+空格的影响：符号之间可以有空格。  
+```
+- - -
+* * *
+_ _ _
+```
+
+## 分割线的使用场景
+章节分隔
+```
+# 第一章：概述
+
+内容描述...
+
+---
+
+# 第二章：安装
+
+安装步骤...
+
+---
+
+# 第三章：使用
+
+使用说明...
+```
+![](../images/Markdown编辑器使用手册/78.png)  
+
+内容区块分隔  
+```
+## 产品特性
+
+### 核心功能
+- 功能A
+- 功能B
+- 功能C
+
+---
+
+### 技术优势
+- 优势1
+- 优势2
+- 优势3
+
+---
+
+### 应用场景
+场景描述...
+页面底部分隔
+markdown正文内容...
+
+---
+
+## 相关链接
+
+- [官方网站](https://example.com)
+- [技术文档](https://docs.example.com)
+- [社区论坛](https://forum.example.com)
+
+---
+
+*最后更新：2024年3月15日*
+```
+![](../images/Markdown编辑器使用手册/79.png)  
+
+引用和正文分隔  
+```
+项目介绍的正文内容...
+
+---
+
+> **免责声明**
+> 
+> 本软件按"原样"提供，不提供任何形式的明示或暗示担保。
+
+---
+
+继续其他内容...
+```
+![](../images/Markdown编辑器使用手册/80.png)  
+
+## 分割线的最佳实践  
+避免过度使用：  
+```
+# 标题
+
+内容1
+
+--- （不必要的分割线）
+
+## 子标题
+
+内容2
+```
+
+合理的使用：  
+```
+# 项目文档
+
+项目简介...
+
+---
+
+## 安装指南
+
+安装步骤...
+
+---
+
+## 使用说明
+
+使用方法...
+
+---
+
+## 常见问题
+
+FAQ内容...
+```
+
+与其他元素的配合：  
+```
+## 版本历史
+
+### v2.0.0 (2024-03-15)
+- 新增功能A
+- 修复问题B
+
+---
+
+### v1.5.0 (2024-02-01)
+- 新增功能C
+- 优化性能
+
+---
+
+### v1.0.0 (2024-01-01)
+- 初始版本发布
+```
+![](../images/Markdown编辑器使用手册/81.png)  
+
+
+
+
+
+
+
+
+# Markdown 数学公式  
+## LaTeX 数学公式基础
+在 Markdown 中，数学公式通过 LaTeX 语法来表示。LaTeX 是一个强大的排版系统，特别适用于包含复杂数学公式的文档。
+
+基本语法结构
+命令：以反斜杠 \ 开头，如 \alpha、\sum
+参数：用花括号 {} 包围，如 \frac{a}{b}
+下标：使用 _，如 x_1
+上标：使用 ^，如 x^2
+分组：用花括号将多个字符组合，如 x_{i+1}
+常用 LaTeX 命令  
+```
+\alpha, \beta, \gamma  % 希腊字母
+\sum, \prod, \int      % 求和、乘积、积分
+\frac{分子}{分母}      % 分数
+\sqrt{表达式}          % 平方根
+\sqrt[n]{表达式}       % n次根
+```
+
+### 行内公式与块级公式  
+行内公式
+行内公式使用单个美元符号 $ 包围，公式会嵌入到文本中，如：文本中的变量 $x = 5$ 和函数 $f(x) = x^2 + 2x + 1$。  
+![](../images/Markdown编辑器使用手册/82.png)  
+
+块级公式
+块级公式使用双美元符号 $$ 包围，公式会独立成行并居中显示：
+
+E = mc^2
+
+\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
+
+```
+$$E = mc^2$$
+
+$$\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}$$
+```
+![](../images/Markdown编辑器使用手册/83.png)   
+
+多行公式
+使用 align 环境创建多行对齐公式：
+
+
+\begin{align}
+f(x) &= ax^2 + bx + c \
+f'(x) &= 2ax + b \
+f''(x) &= 2a
+\end{align}
+
+```
+$$
+    \begin{align}
+    f(x) &= ax^2 + bx + c \\
+    f'(x)  &= 2ax + b \\
+    f''(x)  &= 2a
+    \end{align}
+    $$
+```
+![](../images/Markdown编辑器使用手册/84.png)   
+
+
+## 常用数学符号
+### 基本运算符号
+加减乘除：+, -, \times, \div
+分数：\frac{a}{b} → $\frac{a}{b}$
+根号：\sqrt{x}, \sqrt[n]{x} → $\sqrt{x}$, $\sqrt[n]{x}$
+指数：x^2, e^{i\pi} → $x^2$, $e^{i\pi}$
+
+### 比较符号
+等于：=, \neq, \equiv → $=$, $\neq$, $\equiv$
+大小：<, >, \leq, \geq → $<$, $>$, $\leq$, $\geq$
+约等于：\approx, \sim → $\approx$, $\sim$
+
+### 集合符号
+属于：\in, \notin → $\in$, $\notin$
+包含：\subset, \supset → $\subset$, $\supset$
+交并：\cap, \cup → $\cap$, $\cup$
+空集：\emptyset → $\emptyset$
+
+### 希腊字母
+常用希腊字母及其 LaTeX 表示：  
+![](../images/Markdown编辑器使用手册/85.png)  
+
+### 特殊函数和符号
+三角函数：\sin, \cos, \tan
+对数：\log, \ln
+极限：\lim_{x \to 0}
+求和：\sum_{i=1}^{n}
+积分：\int_{a}^{b}
+无穷：\infty
+
+### 矩阵表示
+使用 matrix 环境：
+
+
+\begin{pmatrix}
+a & b \
+c & d
+\end{pmatrix}  
+```
+$$
+    \begin{pmatrix}
+    a & b \\
+    c & d
+    \end{pmatrix}
+    $$
+```
+![](../images/Markdown编辑器使用手册/86.png)    
+
+不同括号类型的矩阵：
+
+pmatrix：圆括号 $\begin{pmatrix} a & b \ c & d \end{pmatrix}$
+bmatrix：方括号 $\begin{bmatrix} a & b \ c & d \end{bmatrix}$
+vmatrix：行列式 $\begin{vmatrix} a & b \ c & d \end{vmatrix}$  
+
+
+
+
+
+# Markdown 图表绘制
+图表在技术文档中非常重要，它可以帮助我们：
+
+可视化复杂的数据关系
+展示系统架构和工作流程
+更清晰地表达思想和概念
+##  常见的 Markdown 图表工具
+Mermaid
+Mermaid 是最流行的 Markdown 图表工具之一，它允许你使用简单的文本语法生成各种图表。
+
+支持图表类型：
+流程图 (Flowchart)
+序列图 (Sequence Diagram)
+类图 (Class Diagram)
+状态图 (State Diagram)
+甘特图 (Gantt Chart)
+饼图 (Pie Chart)
+
+### 流程图  
+![](../images/Markdown编辑器使用手册/87.png)  
+```mermaid
+graph TD
+    A[开始] --> B{条件判断}
+    B -->|Yes| C[执行操作A]
+    B -->|No| D[执行操作B]
+    C --> E[结束]
+    D --> E
+```
+
+流程图方向
+TD 或 TB：从上到下
+BT：从下到上
+RL：从右到左
+LR：从左到右
+节点形状
+A[方形]：矩形
+B(圆角矩形)：圆角矩形
+C{菱形}：菱形（决策）
+D((圆形))：圆形
+E>旗帜形]：旗帜形
+连接线类型
+--> 实线箭头
+-.-> 虚线箭头
+==> 粗实线箭头
+-- 实线
+-. 虚线
+
+### 时序图和甘特图
+时序图（Sequence Diagram）  
+![](../images/Markdown编辑器使用手册/88.png)  
+
+```mermaid
+sequenceDiagram
+    participant A as 用户
+    participant B as 系统
+    participant C as 数据库
+    
+    A->>B: 登录请求
+    B->>C: 验证用户信息
+    C-->>B: 返回验证结果
+    B-->>A: 登录成功/失败
+```
+
+时序图语法要点：
+
+participant 定义参与者
+->> 实线箭头
+-->> 虚线箭头
+note 添加注释
+甘特图（Gantt Chart）  
+![](../images/Markdown编辑器使用手册/89.png)  
+
+```mermaid
+gantt
+    title 项目开发计划
+    dateFormat  YYYY-MM-DD
+    section 设计阶段
+    需求分析      :done,    des1, 2024-01-01,2024-01-15
+    UI设计       :active,  des2, 2024-01-10, 30d
+    section 开发阶段
+    前端开发      :         dev1, after des2, 45d
+    后端开发      :         dev2, 2024-02-01, 60d
+    section 测试阶段
+    单元测试      :         test1, after dev1, 15d
+    集成测试      :         test2, after dev2, 10d
+```  
+
+甘特图语法要点：
+
+title 设置标题
+dateFormat 定义日期格式
+section 定义阶段
+任务状态：done（已完成）、active（进行中）、crit（关键）
+
+### 饼图  
+![](../images/Markdown编辑器使用手册/90.png)  
+```mermaid
+pie
+    title 浏览器市场份额
+    "Chrome" : 65
+    "Safari" : 15
+    "Firefox" : 10
+    "其他" : 10
+```  
+
+## 图表类型详解  
+流程图 (Flowchart)
+流程图是最常用的图表类型，用于展示过程或算法流程。
+
+Mermaid 示例：
+![](../images/Markdown编辑器使用手册/91.png)  
+语法说明：
+graph 声明流程图
+LR 表示从左到右布局 (可选 TB/RL/BT)
+--> 表示箭头连接
+[] 表示矩形节点
+{} 表示菱形条件节点
+
+
+序列图 (Sequence Diagram)
+序列图展示对象之间的交互顺序。
+
+Mermaid 示例：
+![](../images/Markdown编辑器使用手册/92.png)    
+
+语法说明：
+participant 定义参与者
+->> 表示实线箭头
+-->> 表示虚线箭头
+
+
+类图 (Class Diagram)
+类图用于面向对象设计，展示类及其关系。  
+![](../images/Markdown编辑器使用手册/93.png)     
+
+## 高级技巧  
+1. 主题定制
+Mermaid 允许自定义图表样式：
+![](../images/Markdown编辑器使用手册/94.png)    
+```mermaid
+%%{init: {'theme': 'forest'}}%%
+pie
+    title 自定义主题
+    "项目A" : 30
+    "项目B" : 50
+    "项目C" : 20
+```  
+
+2. 交互式图表
+一些工具支持添加交互功能：  
+![](../images/Markdown编辑器使用手册/95.png)  
+```mermaid
+graph TD
+    A[点击我] --> B[显示详细信息]
+    click A "https://www.runoob.com" "这是提示文本"
+```
+
+3. 导出图表
+大多数工具支持将图表导出为：
+
+PNG 图片
+SVG 矢量图
+PDF 文档
+
+工具支持情况
+![](../images/Markdown编辑器使用手册/96.png)  
+
+## 最佳实践
+保持简洁：图表应该简单明了，避免过多细节
+统一风格：同一文档中的图表应保持一致的风格
+添加说明：为复杂图表添加文字说明
+版本控制：文本格式的图表可以很好地与 Git 配合使用
+测试渲染：在不同平台上测试图表显示效果
+
+##  常见问题解答
+Q1: 为什么我的图表无法显示？
+检查是否使用了正确的语法
+确认你的 Markdown 编辑器/平台支持该图表工具
+查看是否有语法错误
+Q2: 如何学习这些图表语法？
+参考官方文档：
+Mermaid 官方文档
+PlantUML 官方文档
+使用在线编辑器实时练习
+Q3: 有没有可视化编辑器？
+Mermaid Live Editor: https://mermaid.live
+PlantUML Server: http://www.plantuml.com/plantuml