Quellcode durchsuchen

修改格式查看错误是否修复

zhaojinyu vor 6 Tagen
Ursprung
Commit
34c018f064
1 geänderte Dateien mit 134 neuen und 60 gelöschten Zeilen
  1. 134 60
      技术分享/Markdown编辑器使用手册.md

+ 134 - 60
技术分享/Markdown编辑器使用手册.md

@@ -371,6 +371,7 @@ Markdown 脚注的格式如下:
 
 
 演示效果如下:  
+  
 ![](../images/Markdown编辑器使用手册/md5.gif)  
 
 ## 行内代码标记
@@ -384,14 +385,16 @@ Markdown 脚注的格式如下:
 在终端中输入 `npm install` 安装依赖
 ```
 
-渲染效果:
+渲染效果:  
+
 ![](../images/Markdown编辑器使用手册/19.png)  
 
 包含反引号的代码:当代码本身包含反引号时,使用两个反引号包围。
 ```
 要显示反引号,使用 `` `code` `` 这样的格式
 ```
-渲染效果:
+渲染效果:  
+
 ![](../images/Markdown编辑器使用手册/20.png)  
 
 应用场景:
@@ -411,7 +414,8 @@ Markdown 脚注的格式如下:
 HTML 替代方案:
 ```
 这是<mark>高亮文本</mark>
-```
+```  
+
 ![](../images/Markdown编辑器使用手册/21.png)  
 
 ## 段落和换行
@@ -438,7 +442,8 @@ HTML 替代方案:
 这是第二段(错误:没有空行分隔)
 
     这是缩进段落(错误:不应该缩进)
-```
+```  
+
 ![](../images/Markdown编辑器使用手册/23.png)  
 
 
@@ -472,7 +477,8 @@ HTML 替代方案:
 疑是地上霜。  
 举头望明月,  
 低头思故乡。
-```
+```  
+
 ![](../images/Markdown编辑器使用手册/24.png)  
 
 ### 空行的作用
@@ -548,7 +554,8 @@ HTML 替代方案:
 1. 第一项
 2. 第二项
 3. 第三项
-```
+```  
+
 显示结果如下:
 ![](../images/Markdown编辑器使用手册/26.png)  
 
@@ -558,7 +565,8 @@ Markdown 会自动修正数字顺序:
 1. 第一项
 3. 第二项(实际显示为2)
 7. 第三项(实际显示为3)
-```
+```  
+
 ![](../images/Markdown编辑器使用手册/27.png)  
 
 从指定数字开始:
@@ -566,7 +574,8 @@ Markdown 会自动修正数字顺序:
 5. 第五项
 6. 第六项
 7. 第七项
-```
+```  
+
 ![](../images/Markdown编辑器使用手册/28.png)  
 
 ## 列表嵌套
@@ -616,7 +625,8 @@ Markdown 会自动修正数字顺序:
 2. 第二项:
     - 第二项嵌套的第一个元素
     - 第二项嵌套的第二个元素
-```
+```  
+
 ![](../images/Markdown编辑器使用手册/29.png)  
 
 嵌套规则:
@@ -632,7 +642,8 @@ Markdown 会自动修正数字顺序:
 - [ ] 未完成的任务
 - [x] 已完成的任务
 - [ ] 另一个未完成的任务
-```
+```  
+
 ![](../images/Markdown编辑器使用手册/30.png)  
 
 实际应用示例:
@@ -658,7 +669,8 @@ Markdown 会自动修正数字顺序:
 - [ ] 单元测试
 - [ ] 集成测试
 - [ ] 用户验收测试
-```
+```  
+
 ![](../images/Markdown编辑器使用手册/31.png)  
 
 使用技巧:
@@ -680,7 +692,8 @@ Markdown 会自动修正数字顺序:
 2. 第二项
 
    > 可以在列表项中使用引用
-```
+```  
+
 ![](../images/Markdown编辑器使用手册/32.png)  
 
 列表项中的换行:
@@ -688,7 +701,8 @@ Markdown 会自动修正数字顺序:
 - 这是一个很长的列表项,
   需要换行显示,注意第二行需要与第一行对齐
 - 另一个列表项
-```
+```  
+
 ![](../images/Markdown编辑器使用手册/33.png)  
 
 
@@ -703,7 +717,8 @@ Markdown 区块引用是在段落开头使用 > 符号 ,然后后面紧跟一
 > 区块引用
 > 菜鸟教程
 > 学的不仅是技术更是梦想
-```
+```  
+
 ![](../images/Markdown编辑器使用手册/34.png)  
 
 ## 多行引用:
@@ -721,7 +736,8 @@ Markdown 区块引用是在段落开头使用 > 符号 ,然后后面紧跟一
 > 这是一个长引用,
 包含多行内容,
 只需要在第一行使用 > 符号。
-```
+```  
+
 ![](../images/Markdown编辑器使用手册/35.png)  
 
 
@@ -731,7 +747,8 @@ Markdown 区块引用是在段落开头使用 > 符号 ,然后后面紧跟一
 > 最外层
 > > 第一层嵌套
 > > > 第二层嵌套
-```
+```  
+
 ![](../images/Markdown编辑器使用手册/36.png)  
 
 实际应用示例:
@@ -850,7 +867,8 @@ Markdown 区块引用是在段落开头使用 > 符号 ,然后后面紧跟一
 > &#x2139;&#xfe0f; **提示**
 > 
 > 首次使用需要进行账户验证,验证邮件已发送到您的邮箱。
-```
+```  
+
 ![](../images/Markdown编辑器使用手册/40.png)   
 
 ## 文档结构中的引用  
@@ -863,7 +881,8 @@ Markdown 区块引用是在段落开头使用 > 符号 ,然后后面紧跟一
 > - 了解项目背景和目标
 > - 掌握核心功能特性
 > - 熟悉技术架构设计
-```
+```  
+
 ![](../images/Markdown编辑器使用手册/41.png)   
 
 版本更新说明:  
@@ -891,7 +910,8 @@ Markdown 提供了多种方式来展示代码,从简单的行内代码到复
 如果是段落上的一个函数或片段的代码可以用反引号把它包起来(`),例如:  
 ```
 `printf()` 函数
-```
+```  
+
 ![](../images/Markdown编辑器使用手册/42.png)   
 
 常见用法示例:
@@ -913,13 +933,15 @@ Markdown 提供了多种方式来展示代码,从简单的行内代码到复
 使用双反引号包围单反引号:  
 ```
 ``使用 `反引号` 包围代码``
-```
+```  
+
 ![](../images/Markdown编辑器使用手册/44.png)    
 
 使用多个反引号包围:  
 ```
 ```包含 `` 双反引号的代码```
-```
+```  
+
 ![](../images/Markdown编辑器使用手册/45.png)    
 
 其他特殊字符处理:
@@ -942,10 +964,11 @@ HTML 标签:<div> 元素
     保持代码的原始格式
     
 继续正常文本
-```
-![](../images/Markdown编辑器使用手册/46.png)   
-![](../images/Markdown编辑器使用手册/47.png)   
-![](../images/Markdown编辑器使用手册/48.png)   
+```  
+
+![](../images/Markdown编辑器使用手册/46.png)     
+![](../images/Markdown编辑器使用手册/47.png)     
+![](../images/Markdown编辑器使用手册/48.png)     
 
 ## 三反引号代码块  
 你也可以用 ``` ```包裹一段代码,并指定一种语言(也可以不指定):  
@@ -955,7 +978,8 @@ HTML 标签:<div> 元素
 可以包含空行
 保持原有缩进
 ```
-```
+```  
+
 ![](../images/Markdown编辑器使用手册/49.png)   
 
 三反引号(``` ```)是最常用的代码块语法,支持语法高亮和多行代码展示。  
@@ -1002,6 +1026,7 @@ typescript / ts - TypeScript
 JavaScript:
 
 ![](../images/Markdown编辑器使用手册/51.png)   
+
 ![](../images/Markdown编辑器使用手册/52.png)   
 
 ## 代码块的高级特性  
@@ -1015,9 +1040,13 @@ JavaScript:
 用于显示代码的添加、删除或修改,常用于展示版本控制中的变更。
 
 Diff 语法:  
+
 ![](../images/Markdown编辑器使用手册/54.png)    
+
 ![](../images/Markdown编辑器使用手册/55.png)    
-![](../images/Markdown编辑器使用手册/56.png)    
+
+![](../images/Markdown编辑器使用手册/56.png)   
+
 ![](../images/Markdown编辑器使用手册/57.png)     
 
 
@@ -1050,7 +1079,8 @@ Diff 语法:
 直接使用链接地址:  
 ```
 <https://www.usky.cn>
-```
+```  
+
 ![](../images/Markdown编辑器使用手册/59.png)   
 
 设置可选标题:  
@@ -1058,7 +1088,8 @@ Diff 语法:
 这是一个链接 [上海永天科技官网](https://www.usky.cn)
 欢迎访问 [GitHub](https://github.com) 官网
 这是 [百度搜索](https://www.baidu.com "百度一下,你就知道")
-```
+```  
+
 ![](../images/Markdown编辑器使用手册/60.png)   
 
 链接标题的作用:
@@ -1090,7 +1121,8 @@ markdown[链接文字][参考标签]
 
   [1]: http://www.google.com/
   [usky]: https://www.usky.cn/
-```
+```  
+
 ![](../images/Markdown编辑器使用手册/61.png)   
 
 简化写法:
@@ -1127,7 +1159,8 @@ markdown# 学习资源推荐
 [fcc]: https://www.freecodecamp.org/
 [github]: https://github.com/
 [gitlab]: https://gitlab.com/
-```
+```  
+
 ![](../images/Markdown编辑器使用手册/62.png)   
 
 自动链接识别
@@ -1166,7 +1199,8 @@ markdown联系邮箱:example@email.com
 
 # 第三章:使用方法
 这里是使用说明...
-```
+```  
+
 ![](../images/Markdown编辑器使用手册/63.png)  
 
 锚点规则:
@@ -1466,7 +1500,8 @@ Markdown 制作表格使用 | 来分隔不同的单元格,使用 - 来分隔
 |  ----  | ----  |
 | 单元格  | 单元格 |
 | 单元格  | 单元格 |
-```
+```  
+
 ![](../images/Markdown编辑器使用手册/65.png)  
 
 语法要点:
@@ -1489,6 +1524,7 @@ Markdown 制作表格使用 | 来分隔不同的单元格,使用 - 来分隔
 | 单元格 | 单元格 | 单元格 |
 | 单元格 | 单元格 | 单元格 |
 ```  
+
 ![](../images/Markdown编辑器使用手册/66.png)  
 
 ## 复杂表格的处理技巧  
@@ -1501,7 +1537,8 @@ Markdown 制作表格使用 | 来分隔不同的单元格,使用 - 来分隔
 | *密码重置* | 通过邮箱重置密码 | &#x26a0;&#xfe0f; |
 | `API接口` | RESTful API 设计 | &#x2705; |
 | [文档链接](https://example.com) | 查看详细文档 | &#x1f4d6; |
-```
+```  
+
 ![](../images/Markdown编辑器使用手册/67.png)  
 
 ## 处理长文本  
@@ -1522,7 +1559,8 @@ Markdown 制作表格使用 | 来分隔不同的单元格,使用 - 来分隔
 | React | 用户界面库 | [链接](https://reactjs.org) |
 | Vue.js | 渐进式框架 | [链接](https://vuejs.org) |
 | Angular | 完整的框架 | [链接](https://angular.io) |
-```
+```  
+
 ![](../images/Markdown编辑器使用手册/68.png)  
 
 表格中的特殊字符
@@ -1533,7 +1571,8 @@ Markdown 制作表格使用 | 来分隔不同的单元格,使用 - 来分隔
 | 竖线 | `\|` | 显示 \| 符号 |
 | 反斜杠 | `\\` | 显示 \\ 符号 |
 | HTML | 直接使用 | <code>&lt;div&gt;</code> |
-```
+```  
+
 ![](../images/Markdown编辑器使用手册/69.png)  
 
 ## 表格美化建议  
@@ -1546,7 +1585,8 @@ Markdown 制作表格使用 | 来分隔不同的单元格,使用 - 来分隔
 | 待处理 | &#x23f3; | 等待开始 |
 | 错误 | &#x274c; | 出现问题 |
 | 警告 | &#x26a0;&#xfe0f; | 需要注意 |
-```
+```  
+
 ![](../images/Markdown编辑器使用手册/70.png)  
 
 数据表格最佳实践
@@ -1558,8 +1598,10 @@ 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)  
+
 技术对比表格:  
 ```
 | 特性 | React | Vue.js | Angular | 评分 |
@@ -1568,7 +1610,8 @@ Markdown 制作表格使用 | 来分隔不同的单元格,使用 - 来分隔
 | 性能表现 | 优秀 | 优秀 | 良好 | 平分 &#x2b50;&#x2b50;&#x2b50; |
 | 生态系统 | 丰富 | 成长中 | 完整 | React &#x2b50;&#x2b50;&#x2b50; |
 | 企业支持 | Facebook | 社区 | Google | Angular &#x2b50;&#x2b50;&#x2b50; |
-```
+```  
+
 ![](../images/Markdown编辑器使用手册/72.png)  
 
 
@@ -1590,7 +1633,8 @@ Markdown 制作表格使用 | 来分隔不同的单元格,使用 - 来分隔
 | 邮箱 | zhang@example.com |
 | 电话 | 100-0000-8000 |
 | 地址 | 北京市朝阳区 |
-```
+```  
+
 ![](../images/Markdown编辑器使用手册/73.png)  
 
 
@@ -1608,6 +1652,7 @@ Markdown 制作表格使用 | 来分隔不同的单元格,使用 - 来分隔
 ```
 使用 <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd> 重启电脑
 ```  
+
 ![](../images/Markdown编辑器使用手册/74.png)  
 
 ##  转义  
@@ -1615,7 +1660,8 @@ Markdown 使用了很多特殊符号来表示特定的意义,如果需要显
 ```
 **文本加粗** 
 \*\* 正常显示星号 \*\*
-```
+```  
+
 ![](../images/Markdown编辑器使用手册/75.png)  
 
 Markdown 支持以下这些符号前面加上反斜杠来帮助插入普通的符号:  
@@ -1643,6 +1689,7 @@ KaTeX 拥有比 MathJax 更快的性能,但是它却少了很多 MathJax 拥
 
 `$...$ `或者 `\(...\) `中的数学表达式将会在行内显示。
 `$$...$$` 或者` \[...\] `或者` ```math `中的数学表达式将会在块内显示。  
+
 ![](../images/Markdown编辑器使用手册/md6.gif)  
 
 ```
@@ -1659,7 +1706,8 @@ $$
    C @= D
 \end{CD}
 $$
-```
+```  
+
 ![](../images/Markdown编辑器使用手册/76.png)  
 
 
@@ -1690,7 +1738,8 @@ Markdown 支持三种方式创建水平分割线:
 ___
 ```
 
-所有三种方式的渲染效果相同:  
+所有三种方式的渲染效果相同:   
+
 ![](../images/Markdown编辑器使用手册/77.png)  
 
 ## 扩展写法
@@ -1726,7 +1775,8 @@ _ _ _
 # 第三章:使用
 
 使用说明...
-```
+```  
+
 ![](../images/Markdown编辑器使用手册/78.png)  
 
 内容区块分隔  
@@ -1763,7 +1813,8 @@ markdown正文内容...
 ---
 
 *最后更新:2024年3月15日*
-```
+```  
+
 ![](../images/Markdown编辑器使用手册/79.png)  
 
 引用和正文分隔  
@@ -1779,7 +1830,8 @@ markdown正文内容...
 ---
 
 继续其他内容...
-```
+```  
+
 ![](../images/Markdown编辑器使用手册/80.png)  
 
 ## 分割线的最佳实践  
@@ -1839,7 +1891,8 @@ FAQ内容...
 
 ### v1.0.0 (2024-01-01)
 - 初始版本发布
-```
+```  
+
 ![](../images/Markdown编辑器使用手册/81.png)  
 
 
@@ -1871,6 +1924,7 @@ FAQ内容...
 ### 行内公式与块级公式  
 行内公式
 行内公式使用单个美元符号 $ 包围,公式会嵌入到文本中,如:文本中的变量 $x = 5$ 和函数 $f(x) = x^2 + 2x + 1$。  
+
 ![](../images/Markdown编辑器使用手册/82.png)  
 
 块级公式
@@ -1884,7 +1938,8 @@ E = mc^2
 $$E = mc^2$$
 
 $$\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}$$
-```
+```  
+
 ![](../images/Markdown编辑器使用手册/83.png)   
 
 多行公式
@@ -1905,7 +1960,8 @@ $$
     f''(x)  &= 2a
     \end{align}
     $$
-```
+```  
+
 ![](../images/Markdown编辑器使用手册/84.png)   
 
 
@@ -1929,6 +1985,7 @@ $$
 
 ### 希腊字母
 常用希腊字母及其 LaTeX 表示:  
+
 ![](../images/Markdown编辑器使用手册/85.png)  
 
 ### 特殊函数和符号
@@ -1954,7 +2011,8 @@ $$
     c & d
     \end{pmatrix}
     $$
-```
+```  
+
 ![](../images/Markdown编辑器使用手册/86.png)    
 
 不同括号类型的矩阵:
@@ -1985,8 +2043,10 @@ Mermaid 是最流行的 Markdown 图表工具之一,它允许你使用简单
 甘特图 (Gantt Chart)
 饼图 (Pie Chart)
 
-### 流程图  
-![](../images/Markdown编辑器使用手册/87.png)  
+### 流程图 
+
+![](../images/Markdown编辑器使用手册/87.png)   
+
 ```mermaid
 graph TD
     A[开始] --> B{条件判断}
@@ -2016,6 +2076,7 @@ E>旗帜形]:旗帜形
 
 ### 时序图和甘特图
 时序图(Sequence Diagram)  
+
 ![](../images/Markdown编辑器使用手册/88.png)  
 
 ```mermaid
@@ -2037,6 +2098,7 @@ participant 定义参与者
 -->> 虚线箭头
 note 添加注释
 甘特图(Gantt Chart)  
+
 ![](../images/Markdown编辑器使用手册/89.png)  
 
 ```mermaid
@@ -2061,8 +2123,10 @@ dateFormat 定义日期格式
 section 定义阶段
 任务状态:done(已完成)、active(进行中)、crit(关键)
 
-### 饼图  
-![](../images/Markdown编辑器使用手册/90.png)  
+### 饼图   
+
+![](../images/Markdown编辑器使用手册/90.png)   
+
 ```mermaid
 pie
     title 浏览器市场份额
@@ -2076,7 +2140,8 @@ pie
 流程图 (Flowchart)
 流程图是最常用的图表类型,用于展示过程或算法流程。
 
-Mermaid 示例:
+Mermaid 示例:  
+
 ![](../images/Markdown编辑器使用手册/91.png)  
 
 ```mermaid
@@ -2098,9 +2163,11 @@ LR 表示从左到右布局 (可选 TB/RL/BT)
 序列图 (Sequence Diagram)
 序列图展示对象之间的交互顺序。
 
-Mermaid 示例:
+Mermaid 示例:  
+
 ![](../images/Markdown编辑器使用手册/92.png)   
 
+
 ```mermaid
 sequenceDiagram
     participant 用户
@@ -2118,9 +2185,11 @@ participant 定义参与者
 
 
 类图 (Class Diagram)
-类图用于面向对象设计,展示类及其关系。  
+类图用于面向对象设计,展示类及其关系。   
+
 ![](../images/Markdown编辑器使用手册/93.png)   
 
+
 ```mermaid
 classDiagram
     class 用户 {
@@ -2140,8 +2209,10 @@ classDiagram
 
 ## 高级技巧  
 1. 主题定制
-Mermaid 允许自定义图表样式:
+Mermaid 允许自定义图表样式:   
+
 ![](../images/Markdown编辑器使用手册/94.png)    
+
 ```mermaid
 %%{init: {'theme': 'forest'}}%%
 pie
@@ -2153,7 +2224,9 @@ pie
 
 2. 交互式图表
 一些工具支持添加交互功能:  
-![](../images/Markdown编辑器使用手册/95.png)  
+
+![](../images/Markdown编辑器使用手册/95.png)    
+
 ```mermaid
 graph TD
     A[点击我] --> B[显示详细信息]
@@ -2167,7 +2240,8 @@ PNG 图片
 SVG 矢量图
 PDF 文档
 
-工具支持情况
+工具支持情况  
+
 ![](../images/Markdown编辑器使用手册/96.png)  
 
 ## 最佳实践