侧边栏壁纸
博主头像
Z同学博主等级

工作磨平激情前,坚持技术的热忱。 欢迎光临Z同学的技术小站。 分享最新的互联网知识。

  • 累计撰写 274 篇文章
  • 累计创建 55 个标签
  • 累计收到 74 条评论

Markdown 各种标签介绍-一文了解各种markdown 脚本的使用

Z同学
2022-01-06 / 0 评论 / 2 点赞 / 797 阅读 / 2,544 字
温馨提示:
本文最后更新于 2022-01-06,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

介绍

主要介绍各种Markdown的标签。汇总一下自己在Markdown中编辑中的常用标签。

本篇内容的标签,全部是在Typora的环境下自测使用过。

1.基础标签

主要介绍Markdown中的一些基础标签,只要大家markdown那么就会用到的标签

标签介绍描述
# xxx标题# 一级标题。 ## 二级标题。 符号越多,标题等级越低。建议大家不要超过5级
**xx**加粗加粗效果。如果我们要给文字加粗
``行内代码主要是给段落句子中的部分代码词使用的。
```java <br />```代码块我们可以在代码块开头区域,添加代码块的语言格式。
*x*倾斜倾斜 。相较于加粗,只有一个*
|xxxx|xxxx|xxxx|表格表格主要是通过| 符号来进行定义的 ,而如果要定义表头那么在表头下一行使用:|------|------| 然后它就会区分了。 表格示例
![图片介绍](图片路径地址)图像我们如果给插入图片的话,图片的插入格式就是上面的了。
[链接说明]( 链接地址)链接地址相较于图像插入,只是少了一个!而已。
------水平分割线------

2. 进阶标签

在上面基本标签外,我们如果还有其他的需求。也有更多的标签。

但是这种进阶的标签。有部分是需要前端做适配的如果前端没有做好适配。你可能看不到效果。

标签介绍描述
[TOC]目录Markdown支持内置目录,我们只需要添加目录标签后。就会自动生成目录。
- 内容无序列表在 段落前面添加 - 就可以创建无序列表效果
+ 内容无序列表在 段落前面添加 + 就可以创建无序列表效果。两个是一样的效果
1.有序列表输入数字1. 然后加空格,就会自动创建有序列表了。回车换行就会自动创建新的序列。
>引用我们在需要标注为“引用”的内容前,输入"> " 加上空格,就可以将内容标注为引用了。
- [ ]倾斜任务列表效果,通过该标签 会自动在内容前面添加一个复选框效果
$$ 内容 <br /> $$公式块markdown 要显示数学等公式效果,可以通过$$ 标签来实现
```mermaid graph ```流程图我们除了标签以外,我们还可以通过mermaid graph 标签实现流程图的自动生成。具体的可以参考下面的流程图示例
~~内容~~中划线效果内容 实现内容的中划线
[^角注词]:角注内容角注效果默认情况下,角注内容不显示,只有当鼠标移动到角注上才会显示内容。(PS 需要你的前端适配支持该功能)

2.1 表格示例

Markdown 制作表格使用 | 来分隔不同的单元格,使用 -来分隔表头和其他行。

我们在上面简单了解了表格。同时我们可以针对表格的内容做布局调整:例如左对齐,右对齐,居中对齐等

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

详细介绍对齐方式

表格的对齐方式:

  • -: 设置内容和标题栏居右对齐。
  • :- 设置内容和标题栏居左对齐。
  • :-: 设置内容和标题栏居中对齐。

2.2 流程图 甘特图,UML时序图示例

主要介绍一些流程图和甘特图等效果。我们在实现了markdown的脚本后,如果前端解析没有正确配置的话,这种流程图等等也可能会在网页上无法正确显示。

流程图1:

代码配置:

```mermaid
graph LR
A[开始] -->B(打开网页)
B --> C{输入查询}
C -->|搜索zin| D(zinyan.com)
C -->|搜索yan| E[zinyan.com]
```

效果图:

微信截图_20220106142345

流程图2:

代码配置:

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

效果图:

image-20220106142654834

甘特图效果:

代码配置:

```mermaid
        gantt
        dateFormat  YYYY-MM-DD
        title 软件开发甘特图
        section 设计
        需求                      :des1, 2022-01-06,2022-01-08
        原型                      :des2, 2022-01-09, 3d
        UI设计                    :des3, after des2, 5d
        UE设计                  :des4, after des3, 5d
        section 开发
        技术准备            :crit, done, 2022-01-06,24h
        设计框架            :crit, done, after des2, 2d
        开发                :crit, done, 8d
        发布                :crit, 2d
        section 测试
        功能测试             :done, a1, after des3, 3d
        压力测试             :after a1  , 20h
        测试报告             : 48h
```

效果

image-20220106143159049

还有我们经常会碰见的UML 时序图

```mermaid
 sequenceDiagram
    participant 登录
    participant 接口
    登录->>接口: 我把密码账户传给你
    接口-->>后台:将数据通过https传给你
    loop 信息检测
        后台->后台: 判断账户信息是否正确
    end
    Note right of 后台: 用户信息等存在,我将数据改改后返回给你
    后台-->>接口: 用户信息
    接口-->>登录: 给你数据,你自己判断
    登录->>主界面: 访问成功
```

微信截图_20220106144100

3. Html标签的直接使用

我们除了上面的md标签外,还可以直接使用html的标签。

例如:我们输入按钮的效果: <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd> 显示效果为:Ctrl+Alt+Del

我们自定义锚点:例如在任意地方添加 :<span id="react"></span>

然后在需要跳转到该区域的文字后添加:[内容介绍](#react)。 然后就能实现点击后页面自动滑动。

如果是需要下划线的话,由于md没有定义。所以我们如果想使用只能是html的标签来实现了

带下划线文本 <u>带下划线文本</u>

2

评论区