markdown使用中的小总结

女爷i 2023-02-13 11:22 1阅读 0赞

### 文章目录 ###

*   *  Markdown 的列表的符号有哪些？？？
     *  如何在markdown中使用上标、下标？？？？
     *  Markdown 表格如何对齐？？？
     *  支持的一些HTML标签，形成美观的按钮格式
     *  绘制一些流程图、时序图(顺序图)、甘特图
     *  结束

## Markdown 的列表的符号有哪些？？？ ##

> 无序列表使用星号(\*)、加号(+)或是减号(-)作为列表标记：

* 第一项
    * 第二项
    * 第三项
    
    + 第一项
    + 第二项
    + 第三项
    
    - 第一项
    - 第二项
    - 第三项

> 显示结果如下：

*  第一项
 *  第二项
 *  第三项

> 有序列表使用数字并加上 . 号来表示，如：

1. 第一项
    2. 第二项
    3. 第三项

> 显示结果如下：

1.  第一项
2.  第二项
3.  第三项

> **列表嵌套**  
> 列表嵌套只需在子列表中的选项添加四个空格即可：

1. 第一项：
        - 第一项嵌套的第一个元素
        - 第一项嵌套的第二个元素
    2. 第二项：
        - 第二项嵌套的第一个元素
        - 第二项嵌套的第二个元素

> 显示结果：

1.  第一项：
    
     *  第一项嵌套的第一个元素
     *  第一项嵌套的第二个元素
2.  第二项：
    
     *  第二项嵌套的第一个元素
     *  第二项嵌套的第二个元素

## 如何在markdown中使用上标、下标？？？？ ##

> 在Markdown中嵌套一个HTML的语法，即使用HTML中上标、下标的语法即可。

上标的语法：O(n<sup>2</sup>)
    下标的语法：O(log<sub>R</sub>B)

> 显示效果：  
> O(n2)  
> O(logRB)

## Markdown 表格如何对齐？？？ ##

*  Markdown 制作表格使用 | 来分隔不同的单元格，使用 - 来分隔表头和其他行。
 *  语法格式如下：

|  表头   | 表头  |
    |  ----  | ----  |
    | 单元格  | 单元格 |
    | 单元格  | 单元格 |

*  显示结果：

*  对齐方式

我们可以设置表格的对齐方式：
    
    -: 设置内容和标题栏居右对齐。
    :- 设置内容和标题栏居左对齐。
    :-: 设置内容和标题栏居中对齐。

*  显示案例：

| 左对齐 | 右对齐 | 居中对齐 |
    | :-----| ----: | :----: |
    | 单元格 | 单元格 | 单元格 |
    | 单元格 | 单元格 | 单元格 |

*  显示结果:

## 支持的一些HTML标签，形成美观的按钮格式 ##

支持的 HTML 元素
    不在 Markdown 涵盖范围之内的标签，都可以直接在文档里面用 HTML 撰写。
    目前支持的 HTML 元素有：<kbd> <b> <i> <em> <sup> <sub> <br>等 ，如：

*  例如

使用 <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>N</kbd> 新建图层

*  显示
    
     *  使用 Ctrl\+Shift\+N 新建图层

## 绘制一些流程图、时序图(顺序图)、甘特图 ##

1.  横向流程图源码格式：

```mermaid graph LR A[方形] -->B(圆角) B --> C{ 条件a} C -->|a=1| D[结果1] C -->|a=2| E[结果2] F[横向流程图] ```

*  效果图如下：

a=1

a=2

方形

圆角

条件a

结果1

结果2

横向流程图

1.  竖向流程图源码格式：

```mermaid graph TD A[方形] --> B(圆角) B --> C{ 条件a} C --> |a=1| D[结果1] C --> |a=2| E[结果2] F[竖向流程图] ```

*  效果图如下：

a=1

a=2

方形

圆角

条件a

结果1

结果2

竖向流程图

1.  标准流程图源码格式：

```mermaid flowchat st=>start: 开始框 op=>operation: 处理框 cond=>condition: 判断框(是或否?) sub1=>subroutine: 子流程 io=>inputoutput: 输入输出框 e=>end: 结束框 st->op->cond cond(yes)->io->e cond(no)->sub1(right)->op ```

*  效果图如下：

Created with Raphaël 2.2.0开始框处理框判断框(是或否?)输入输出框结束框子流程yesno

1.  标准流程图源码格式（横向）：

```mermaid flowchat st=>start: 开始框 op=>operation: 处理框 cond=>condition: 判断框(是或否?) sub1=>subroutine: 子流程 io=>inputoutput: 输入输出框 e=>end: 结束框 st(right)->op(right)->cond cond(yes)->io(bottom)->e cond(no)->sub1(right)->op ```

*  效果图如下：

Created with Raphaël 2.2.0开始框处理框判断框(是或否?)输入输出框结束框子流程yesno

1.  UML时序图源码样例：

```mermaid sequenceDiagram 对象A->>对象B: 对象B你好吗?（请求） Note right of 对象B: 对象B的描述 Note left of 对象A: 对象A的描述(提示) 对象B-->>对象A: 我很好(响应) 对象A->>对象B: 你真的好吗？ ```

*  效果图如下：

对象A对象B对象B你好吗?（请求）对象B的描述对象A的描述(提示)我很好(响应)你真的好吗？对象A对象B标题：复杂使用

1.  UML时序图源码复杂样例：

```mermaid sequenceDiagram Title: 标题：复杂使用 对象A->>对象B: 对象B你好吗?（请求） Note right of 对象B: 对象B的描述 Note left of 对象A: 对象A的描述(提示) 对象B-->>对象A: 我很好(响应) 对象B->>老王: 你好吗 老王-->>对象A: 对象B找我了 对象A->>对象B: 你真的好吗？ Note over 老王,对象B: 我们是朋友 participant C Note right of C: 没人陪我玩 ```

*  效果图如下：

对象A对象B老王C对象B你好吗?（请求）对象B的描述对象A的描述(提示)我很好(响应)你好吗对象B找我了你真的好吗？我们是朋友没人陪我玩对象A对象B老王C标题：复杂使用

1.  UML标准时序图样例：

```mermaid %% 时序图例子,-> 直线，-->虚线，->>实线箭头 sequenceDiagram participant 张三 participant 李四 张三->王五: 你最近的目标？ loop 参与面试 王五->王五: 与生活追逐 end Note right of 王五: 学习 工作 <br/>求职... 李四-->>张三: 升学! 王五->李四: 最近的目标？ 李四-->王五: 升学! ```

*  效果图如下：

张三李四王五你最近的目标？与生活追逐loop\[ 参与面试 \]学习 工作 求职...升学!最近的目标？升学!张三李四王五标题：复杂使用

1.  甘特图样例：

```mermaid gantt dateFormat YYYY-MM-DD title 软件开发甘特图 section 设计 需求 :done, des1, 2020-05-06,2020-05-08 原型 :active, des2, 2020-05-09, 3d UI设计 : des3, after des2, 5d 未来任务 : des4, after des3, 5d section 开发 学习准备理解需求 :crit, done, 2020-05-06,6d 设计框架 :crit, done, after des2, 3d 开发 :crit, active, 3d 未来任务 :crit, 5d 耍 :2d section 测试 功能测试 :active, a1, after des3, 3d 压力测试 :after a1 , 3d 测试报告 : 3d ```

*  效果图如下：

Mon 11Mon 18Mon 25需求 原型 UI设计 未来任务 学习准备理解需求 设计框架 开发 未来任务 耍 功能测试 压力测试 测试报告设计 开发 测试软件开发甘特图

## 结束 ##

> `这里只做记录，遇到新的方法会持续更新，便于查阅。虽然网上有很多！！！！！`

> 参考：https://mermaidjs.github.io/\#/  
> 参考：https://markdown-zh.readthedocs.io/en/latest/  
> 参考：https://www.appinn.com/markdown/