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[横向流程图]```
  • 效果图如下:
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/

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章