您的位置: 首页  >  IT文章  >  markdown使用中的小总结

markdown使用中的小总结

分类: IT文章 • 2022-04-02 17:23:52

markdown使用中的小总结

文章目录

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[方形] --&gt;B(圆角)
    B --&gt; C{条件a}
    C --&gt;|a=1| D[结果1]
    C --&gt;|a=2| E[结果2]
    F[横向流程图]
​```
  • 效果图如下：
横向流程图
  1. 竖向流程图源码格式：
​```mermaid
graph TD
A[方形] --> B(圆角)
    B --> C{条件a}
    C --> |a=1| D[结果1]
    C --> |a=2| E[结果2]
    F[竖向流程图]
​```
  • 效果图如下：
竖向流程图
  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
  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
  1. UML时序图源码样例：
​```mermaid
sequenceDiagram
对象A->>对象B: 对象B你好吗?（请求）
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象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: 没人陪我玩
​```
  • 效果图如下：
标题：复杂使用
  1. UML标准时序图样例：
​```mermaid
%% 时序图例子,-> 直线，-->虚线，->>实线箭头
  sequenceDiagram
    participant 张三
    participant 李四
    张三->王五: 你最近的目标？
    loop 参与面试
        王五->王五: 与生活追逐
    end
    Note right of 王五: 学习 工作 <br/>求职...
    李四-->>张三: 升学!
    王五->李四: 最近的目标？
    李四-->王五: 升学!
​```
  • 效果图如下：
标题：复杂使用
  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
```
  • 效果图如下：
软件开发甘特图

结束

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

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

相关推荐