图表显示异常问题排查

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

@@ -27,7 +27,7 @@ Joplin：免费开源的支持 markdown 免费的笔记应用 -- https://joplina
 Markdown 在线编辑器：https://www.jyshare.com/front-end/712/。  
 
 Dillinger：https://dillinger.io/，功能齐全的在线 Markdown 编辑器，支持云同步和多种导出格式。  
-  
+
 StackEdit：https://stackedit.io/，基于浏览器的编辑器，与 Google Drive、Dropbox 等云服务集成。  
 
 简书、语雀编辑器：国内平台提供的在线 Markdown 编辑环境。  
@@ -63,12 +63,12 @@ MarkDown 思维导图工具：https://www.jyshare.com/front-end/9692/。
 ![](../images/Markdown编辑器使用手册/4.png)  
 
 安装完成后重启 VSCode。  
-  
+
 在 RUNOOB.md 输入以下代码：  
 ```  
 # RUNOOB Markdown Test  
 ## Hello World!  
-```  
+```
 将该代码格式粘贴到文件 RUNOOB.md 上，效果如下：  
 ![](../images/Markdown编辑器使用手册/5.png)  
 在预览框中右击鼠标还提供了各种导出功能：  
@@ -319,15 +319,15 @@ ___粗斜体文本___
 你可以在一行中用三个以上的星号、减号、底线来建立一个分隔线，行内不能有其他东西。你也可以在星号或是减号中间插入空格。下面每种写法都可以建立分隔线：  
 
 ```
-*** 
+***
 
-* * *  
+* * *
 
-*****  
+*****
 
-- - -  
+- - -
 
-----------  
+----------
 ```
 
 显示效果如下所示：  
@@ -754,7 +754,10 @@ Markdown 区块引用是在段落开头使用 > 符号 ，然后后面紧跟一
 > 区块引用  
 > 菜鸟教程  
 > 学的不仅是技术更是梦想  
-```  
+>
+> ```  
+> 
+> ```
 
 ![](../images/Markdown编辑器使用手册/34.png)  
 
@@ -775,7 +778,7 @@ Markdown 区块引用是在段落开头使用 > 符号 ，然后后面紧跟一
 > 这是一个长引用，  
 包含多行内容， 
 只需要在第一行使用 > 符号。  
-```  
+```
 
 ![](../images/Markdown编辑器使用手册/35.png)  
 
@@ -787,7 +790,7 @@ Markdown 区块引用是在段落开头使用 > 符号 ，然后后面紧跟一
 > 最外层  
 > > 第一层嵌套  
 > > > 第二层嵌套  
-```  
+```
 
 ![](../images/Markdown编辑器使用手册/36.png)  
 
@@ -831,7 +834,7 @@ Markdown 区块引用是在段落开头使用 > 符号 ，然后后面紧跟一
     > 菜鸟教程  
     > 学的不仅是技术更是梦想  
 * 第二项  
-```  
+```
 
 ![](../images/Markdown编辑器使用手册/39.png)  
 
@@ -915,7 +918,7 @@ Markdown 区块引用是在段落开头使用 > 符号 ，然后后面紧跟一
 > ℹ️ **提示**  
 >  
 > 首次使用需要进行账户验证，验证邮件已发送到您的邮箱。  
-```  
+```
 
 ![](../images/Markdown编辑器使用手册/40.png)  
 
@@ -930,7 +933,7 @@ Markdown 区块引用是在段落开头使用 > 符号 ，然后后面紧跟一
 > - 了解项目背景和目标  
 > - 掌握核心功能特性  
 > - 熟悉技术架构设计  
-```  
+```
 
 ![](../images/Markdown编辑器使用手册/41.png)  
 
@@ -961,7 +964,7 @@ Markdown 提供了多种方式来展示代码，从简单的行内代码到复
 
 ```
 `printf()` 函数  
-```  
+```
 
 ![](../images/Markdown编辑器使用手册/42.png)   
 
@@ -985,15 +988,15 @@ Markdown 提供了多种方式来展示代码，从简单的行内代码到复
 
 ```
 ``使用 `反引号` 包围代码``  
-```  
+```
 
 ![](../images/Markdown编辑器使用手册/44.png)  
 
 使用多个反引号包围：  
 
 ```
-```包含 `` 双反引号的代码```  
-```  
+​```包含 `` 双反引号的代码```  
+```
 
 ![](../images/Markdown编辑器使用手册/45.png)  
 
@@ -1018,7 +1021,7 @@ HTML 标签：<div> 元素
     保持代码的原始格式  
   
 继续正常文本  
-```  
+```
 
 ![](../images/Markdown编辑器使用手册/46.png)  
 ![](../images/Markdown编辑器使用手册/47.png)  
@@ -1137,7 +1140,7 @@ Diff 语法：
 
 ```
 <https://www.usky.cn>   
-```  
+```
 
 ![](../images/Markdown编辑器使用手册/59.png)  
 
@@ -1147,7 +1150,7 @@ Diff 语法：
 这是一个链接 [上海永天科技官网](https://www.usky.cn)  
 欢迎访问 [GitHub](https://github.com) 官网  
 这是 [百度搜索](https://www.baidu.com "百度一下，你就知道")  
-```  
+```
 
 ![](../images/Markdown编辑器使用手册/60.png)  
 
@@ -1183,7 +1186,7 @@ markdown[链接文字][参考标签]
 
   [1]: http://www.google.com/  
   [usky]: https://www.usky.cn/  
-```  
+```
 
 ![](../images/Markdown编辑器使用手册/61.png)  
 
@@ -1223,7 +1226,7 @@ markdown# 学习资源推荐
 [fcc]: https://www.freecodecamp.org/  
 [github]: https://github.com/  
 [gitlab]: https://gitlab.com/  
-```  
+```
 
 ![](../images/Markdown编辑器使用手册/62.png)  
 
@@ -1268,7 +1271,7 @@ markdown联系邮箱：example@email.com
 
 # 第三章：使用方法  
 这里是使用说明...  
-```  
+```
 
 ![](../images/Markdown编辑器使用手册/63.png)  
 
@@ -1367,7 +1370,7 @@ Markdown 还没有办法指定图片的高度与宽度，如果你需要的话
 ```
 ![示例图片](https://cdn.jsdelivr.net/gh/user/repo/image.png)  
 ![Unsplash 图片](https://images.unsplash.com/photo-1506905925346-21bda4d32df4)  
-```  
+```
 
 网络图片注意事项：  
 
@@ -1413,7 +1416,7 @@ alt 文本最佳实践：
 <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;">  
-```  
+```
 
 响应式图片：  
 
@@ -1598,7 +1601,7 @@ Markdown 制作表格使用 | 来分隔不同的单元格，使用 - 来分隔
 |  ----  | ----  |
 | 单元格  | 单元格 |
 | 单元格  | 单元格 |
-```  
+```
 
 ![](../images/Markdown编辑器使用手册/65.png)  
 
@@ -1622,7 +1625,7 @@ Markdown 制作表格使用 | 来分隔不同的单元格，使用 - 来分隔
 | :-----| ----: | :----: |
 | 单元格 | 单元格 | 单元格 |
 | 单元格 | 单元格 | 单元格 |
-```  
+```
 
 ![](../images/Markdown编辑器使用手册/66.png)  
 
@@ -1637,7 +1640,7 @@ Markdown 制作表格使用 | 来分隔不同的单元格，使用 - 来分隔
 | *密码重置* | 通过邮箱重置密码 | &#x26a0;&#xfe0f; |
 | `API接口` | RESTful API 设计 | &#x2705; |
 | [文档链接](https://example.com) | 查看详细文档 | &#x1f4d6; |
-```  
+```
 
 ![](../images/Markdown编辑器使用手册/67.png)  
 
@@ -1661,7 +1664,7 @@ Markdown 制作表格使用 | 来分隔不同的单元格，使用 - 来分隔
 | React | 用户界面库 | [链接](https://reactjs.org) |
 | Vue.js | 渐进式框架 | [链接](https://vuejs.org) |
 | Angular | 完整的框架 | [链接](https://angular.io) |
-```  
+```
 
 ![](../images/Markdown编辑器使用手册/68.png)  
 
@@ -1674,7 +1677,7 @@ Markdown 制作表格使用 | 来分隔不同的单元格，使用 - 来分隔
 | 竖线 | `\|` | 显示 \| 符号 |
 | 反斜杠 | `\\` | 显示 \\ 符号 |
 | HTML | 直接使用 | <code>&lt;div&gt;</code> |
-```  
+```
 
 ![](../images/Markdown编辑器使用手册/69.png)  
 
@@ -1689,7 +1692,7 @@ Markdown 制作表格使用 | 来分隔不同的单元格，使用 - 来分隔
 | 待处理 | &#x23f3; | 等待开始 |
 | 错误 | &#x274c; | 出现问题 |
 | 警告 | &#x26a0;&#xfe0f; | 需要注意 |
-```  
+```
 
 ![](../images/Markdown编辑器使用手册/70.png)  
 
@@ -1703,7 +1706,7 @@ Markdown 制作表格使用 | 来分隔不同的单元格，使用 - 来分隔
 | 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)  
 
@@ -1716,7 +1719,7 @@ Markdown 制作表格使用 | 来分隔不同的单元格，使用 - 来分隔
 | 性能表现 | 优秀 | 优秀 | 良好 | 平分 &#x2b50;&#x2b50;&#x2b50; |
 | 生态系统 | 丰富 | 成长中 | 完整 | React &#x2b50;&#x2b50;&#x2b50; |
 | 企业支持 | Facebook | 社区 | Google | Angular &#x2b50;&#x2b50;&#x2b50; |
-```  
+```
 
 ![](../images/Markdown编辑器使用手册/72.png)  
 
@@ -1740,7 +1743,7 @@ Markdown 制作表格使用 | 来分隔不同的单元格，使用 - 来分隔
 | 邮箱 | zhang@example.com |
 | 电话 | 100-0000-8000 |
 | 地址 | 北京市朝阳区 |
-```  
+```
 
 ![](../images/Markdown编辑器使用手册/73.png)  
 
@@ -1759,7 +1762,7 @@ Markdown 制作表格使用 | 来分隔不同的单元格，使用 - 来分隔
 
 ```
 使用 <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd> 重启电脑  
-```  
+```
 
 ![](../images/Markdown编辑器使用手册/74.png)  
 
@@ -1769,7 +1772,7 @@ Markdown 使用了很多特殊符号来表示特定的意义，如果需要显
 ```
 **文本加粗**   
 \*\* 正常显示星号 \*\*  
-```  
+```
 
 ![](../images/Markdown编辑器使用手册/75.png)  
 
@@ -1816,7 +1819,7 @@ $$
    C @= D  
 \end{CD}  
 $$  
-```  
+```
 
 ![](../images/Markdown编辑器使用手册/76.png)  
 
@@ -1888,7 +1891,7 @@ _ _ _
 # 第三章：使用  
 
 使用说明...  
-```  
+```
 
 ![](../images/Markdown编辑器使用手册/78.png)  
 
@@ -1927,7 +1930,7 @@ markdown正文内容...
 ---  
 
 *最后更新：2024年3月15日*  
-```  
+```
 
 ![](../images/Markdown编辑器使用手册/79.png)  
 
@@ -1945,7 +1948,7 @@ markdown正文内容...
 ---  
 
 继续其他内容...  
-```  
+```
 
 ![](../images/Markdown编辑器使用手册/80.png)  
 
@@ -1988,7 +1991,7 @@ markdown正文内容...
 ## 常见问题  
 
 FAQ内容...  
-```  
+```
 
 与其他元素的配合：  
 
@@ -2009,7 +2012,7 @@ FAQ内容...
 
 ### v1.0.0 (2024-01-01)  
 - 初始版本发布  
-```  
+```
 
 ![](../images/Markdown编辑器使用手册/81.png)  
 
@@ -2038,7 +2041,7 @@ FAQ内容...
 \frac{分子}{分母}      % 分数  
 \sqrt{表达式}          % 平方根  
 \sqrt[n]{表达式}       % n次根  
-```  
+```
 
 ### 行内公式与块级公式  
 行内公式  
@@ -2057,7 +2060,7 @@ E = mc^2
 $$E = mc^2$$  
   
 $$\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}$$  
-```  
+```
 
 ![](../images/Markdown编辑器使用手册/83.png)  
 
@@ -2079,7 +2082,7 @@ $$
     f''(x)  &= 2a  
     \end{align}  
     $$  
-```  
+```
 
 ![](../images/Markdown编辑器使用手册/84.png)  
 
@@ -2131,11 +2134,11 @@ $$
     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}$  
@@ -2163,7 +2166,7 @@ Mermaid 是最流行的 Markdown 图表工具之一，它允许你使用简单
 饼图 (Pie Chart)  
 
 ### 流程图  
-  
+
 ![](../images/Markdown编辑器使用手册/87.png)  
 
 ```mermaid
@@ -2173,7 +2176,7 @@ graph TD
     B -->|No| D[执行操作B]
     C --> E[结束]
     D --> E
-```  
+```
 
 流程图方向  
 TD 或 TB：从上到下  
@@ -2192,13 +2195,13 @@ E>旗帜形]：旗帜形
 ==> 粗实线箭头  
 -- 实线  
 -. 虚线  
-  
+
 ### 时序图和甘特图  
 时序图（Sequence Diagram）  
 
 ![](../images/Markdown编辑器使用手册/88.png)  
 
-```mermaid  
+```mermaid
 sequenceDiagram  
     participant A as 用户  
     participant B as 系统  
@@ -2208,8 +2211,11 @@ sequenceDiagram
     B->>C: 验证用户信息  
     C-->>B: 返回验证结果  
     B-->>A: 登录成功/失败  
-```  
-  
+    
+```
+
+
+
 时序图语法要点：  
 
 participant 定义参与者  
@@ -2220,7 +2226,7 @@ note 添加注释
 
 ![](../images/Markdown编辑器使用手册/89.png)  
 
-```mermaid  
+```mermaid
 gantt  
     title 项目开发计划  
     dateFormat  YYYY-MM-DD  
@@ -2233,10 +2239,12 @@ gantt
     section 测试阶段  
     单元测试      :         test1, after dev1, 15d  
     集成测试      :         test2, after dev2, 10d  
-```    
+```
+
+
 
 甘特图语法要点：  
-  
+
 title 设置标题  
 dateFormat 定义日期格式  
 section 定义阶段  
@@ -2253,8 +2261,8 @@ pie
     "Safari" : 15  
     "Firefox" : 10  
     "其他" : 10  
-```  
-  
+```
+
 ## 图表类型详解  
 流程图 (Flowchart)  
 流程图是最常用的图表类型，用于展示过程或算法流程。  
@@ -2263,14 +2271,16 @@ Mermaid 示例：
 
 ![](../images/Markdown编辑器使用手册/91.png)  
 
-```mermaid  
+```mermaid
 graph LR  
     A[开始] --> B{条件判断}  
     B -->|是| C[执行操作1]  
     B -->|否| D[执行操作2]  
     C --> E[结束]  
     D --> E  
-```  
+```
+
+
 
 语法说明：  
 graph 声明流程图  
@@ -2278,8 +2288,8 @@ LR 表示从左到右布局 (可选 TB/RL/BT)
 --> 表示箭头连接  
 [] 表示矩形节点  
 {} 表示菱形条件节点  
-  
-  
+
+
 序列图 (Sequence Diagram)  
 序列图展示对象之间的交互顺序。  
 
@@ -2287,8 +2297,7 @@ Mermaid 示例：
 
 ![](../images/Markdown编辑器使用手册/92.png)  
 
-  
-```mermaid  
+```mermaid
 sequenceDiagram  
     participant 用户  
     participant 系统  
@@ -2296,20 +2305,21 @@ sequenceDiagram
     系统-->>用户: 验证请求  
     用户->>系统: 提交凭证  
     系统-->>用户: 登录成功  
-```   
+```
+
+
 
 语法说明：  
 participant 定义参与者  
 ->> 表示实线箭头  
 -->> 表示虚线箭头  
 
-
 类图 (Class Diagram)  
 类图用于面向对象设计，展示类及其关系。  
 
 ![](../images/Markdown编辑器使用手册/93.png)  
 
-  
+
 ```mermaid  
 classDiagram  
     class 用户 {  
@@ -2325,7 +2335,7 @@ classDiagram
     }  
       
     用户 "1" --> "n" 订单  
-```  
+```
 
 ## 高级技巧  
 1. 主题定制  
@@ -2340,18 +2350,18 @@ pie
     "项目A" : 30  
     "项目B" : 50  
     "项目C" : 20  
-```  
-  
+```
+
 2. 交互式图表  
 一些工具支持添加交互功能：  
 
 ![](../images/Markdown编辑器使用手册/95.png)  
-  
+
 ```mermaid  
 graph TD  
     A[点击我] --> B[显示详细信息]  
     click A "https://www.usky.cn" "这是提示文本"  
-```  
+```
 
 3. 导出图表  
 大多数工具支持将图表导出为：  
@@ -2370,7 +2380,7 @@ PDF 文档
 添加说明：为复杂图表添加文字说明  
 版本控制：文本格式的图表可以很好地与 Git 配合使用  
 测试渲染：在不同平台上测试图表显示效果  
-  
+
 ##  常见问题解答  
 Q1: 为什么我的图表无法显示？  
 检查是否使用了正确的语法