切切
正切の小窝

MarkdownNote

MarkdownNote

Markdown学习笔记

在部分软件中,目录可使用[TOC]添加

背景

Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档。
Markdown 语言在 2004 由约翰·格鲁伯(英语:John Gruber)创建。
Markdown 编写的文档可以导出 HTML 、Word、图像、PDF、Epub 等多种格式的文档。
Markdown 编写的文档后缀为 .md, .markdown。

标题

1、使用“#“+“空格”来使用不同级别的标题,最多使用七级标题。
2、在段落后换行使用“=”表示一级标题,“-”表示二级标题(有趣的是,必须使用两个以上划线才能生效)

段落

分段使用两个以上空格加上回车,或使用一个空行来换行

字体

*斜体文本* 斜体
_斜体文本_ 斜体
**粗体文本** 粗体
__粗体文本__ 粗体
***粗斜体文本*** 粗斜体
___粗斜体文本___ 粗斜体

分割线

你可以在一行中用三个以上的星号、减号、底线来建立一个分隔线,行内不能有其他东西。你也可以在星号或是减号中间插入空格。


(分割线看起来比标题下的线粗喔

删除线

如果段落上的文字要添加删除线,只需要在文字的两端加上两个波浪线 即可

下划线

下划线可以通过 HTML 的 <u> 标签来实现。

脚注

1是对文本的补充说明。Markdown 脚注的格式如下:

[^要注明的文本]

Markdown 列表

  1. Markdown 支持有序列表和无序列表。无序列表使用星号(*)、加号(+)、减号(-)作为列表标记,这些标记后面要添加一个空格,然后再填写内容

  2. 有序列表使用数字并加上 . 号来表示

    • 列表具有自动缩进的作用
      • 无序列表两级列表符号不同
  3. 有序列表下级符号相同

    1. 第二级1

    2. 第二级2

    • 列表嵌套只需在子列表中的选项前面添加四个空格并输入“-”即可
    • 2

Markdown 区块

Markdown 区块引用是在段落开头使用 > 符号 ,然后后面紧跟一个空格符号

就像这样

通过使用多个“>”来实现多级

3

4

似乎可以加很多

想要退出区块,需要在段后加一行空行。另外,区块中可以使用列表,列表中可以使用区块

Markdown 代码

如果是段落上的一个函数或片段的代码可以用反引号(`)(位于数字键的左侧!)把它包起来
例如:printf()

代码区块使用 4 个空格或者一个制表符(Tab 键)(推荐)。

也可以用三个反引号

包裹一段代码,并指定一种语言(也可以不指定)

Markdown 链接

链接使用方法如下:

[链接名称](链接地址 "链接title")
[链接名称](链接地址)
<链接地址>

高级连接

我们可以通过变量来设置一个链接,变量赋值在文档末尾进行:

这个链接用 a 作为网址变量 [Google][a]
然后在文档的结尾为变量赋值(网址)

  [a]: http://www.google.com/

这个链接用 a 作为网址变量 Google
然后在文档的结尾为变量赋值(网址)

可在编辑器中按住ctrl单击打开连接。

Markdown 内嵌 HTML 标签

对于 Markdown 涵盖范围之外的标签,都可以直接在文件里面用 HTML 本身。如需使用 HTML,不需要额外标注这是 HTML 或是 Markdown,只需 HTML 标签添加到 Markdown 文本中即可。

行级內联标签

HTML 的行级內联标签如 <span><cite><del> 不受限制,可以在 Markdown 的段落、列表或是标题里任意使用。依照个人习惯,甚至可以不用 Markdown 格式,而采用 HTML 标签来格式化。例如:如果比较喜欢 HTML 的 <a><img> 标签,可以直接使用这些标签,而不用 Markdown 提供的链接或是图片语法。当你需要更改元素的属性时(例如为文本指定颜色或更改图像的宽度),使用 HTML 标签更方便些。

HTML 行级內联标签和区块标签不同,在內联标签的范围内, Markdown 的语法是可以解析的。

This **word** is bold. This <em>word</em> is italic.

渲染效果如下:

This word is bold. This word is italic.

区块标签

区块元素──比如 <div><table><pre><p> 等标签,必须在前后加上空行,以便于内容区分。而且这些元素的开始与结尾标签,不可以用 tab 或是空白来缩进。Markdown 会自动识别这区块元素,避免在区块标签前后加上没有必要的 <p> 标签。

例如,在 Markdown 文件里加上一段 HTML 表格:

This is a regular paragraph.
<table>
    <tr>
        <td>Foo</td>
    </tr>
</table>
This is another regular paragraph.

请注意,Markdown 语法在 HTML 区块标签中将不会被进行处理。例如,你无法在 HTML 区块内使用 Markdown 形式的*强调*

HTML 用法最佳实践

出于安全原因,并非所有 Markdown 应用程序都支持在 Markdown 文档中添加 HTML。如有疑问,请查看相应 Markdown 应用程序的手册。某些应用程序只支持 HTML 标签的子集。

对于 HTML 的块级元素 <div><table><pre><p>,请在其前后使用空行(blank lines)与其它内容进行分隔。尽量不要使用制表符(tabs)或空格(spaces)对 HTML 标签做缩进,否则将影响格式。

在 HTML 块级标签内不能使用 Markdown 语法。例如 <p>italic and **bold**</p> 将不起作用。

Markdown 表格

Markdown 制作表格使用 | 来分隔不同的单元格,使用 – 来分隔表头和其他行。
语法格式如下:

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

可以设置表格的对齐方式:

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

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

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

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

公式

画流程图、时序图(顺序图)、甘特图

1、横向流程图源码格式:

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

2、竖向流程图源码格式:

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

3、标准流程图源码格式:

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

4、标准流程图源码格式(横向):

    ```flow
    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
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

5、UML时序图源码样例:

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

6、UML时序图源码复杂样例:

    ```sequence
    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: 没人陪我玩
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: 没人陪我玩

7、UML标准时序图样例:

    ```mermaid
    %% 时序图例子,-> 直线,-->虚线,->>实线箭头
      sequenceDiagram
        participant 张三
        participant 李四
        张三->王五: 王五你好吗?
        loop 健康检查
            王五->王五: 与疾病战斗
        end
        Note right of 王五: 合理 食物 <br/>看医生...
        李四-->>张三: 很好!
        王五->李四: 你怎么样?
        李四-->王五: 很好!

8、甘特图样例:

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

Markdown 图片

Markdown 图片语法格式如下:

![alt 属性文本](图片地址)
![alt 属性文本](图片地址 "可选标题")
![[alt 属性文本](图片地址 "可选标题")](图片超链接)
  • 开头一个感叹号 !
  • 接着一个方括号,里面放上图片的替代文字
  • 接着一个普通括号,里面放上图片的网址,最后还可以用引号包住并加上选择性的 ‘title’ 属性的文字。

使用实例:

alt 网站icon

其他内容

Markdown中使用emoji

:joy::joy:

任务列表:

  • 第一项任务

    “`- [x] 第一项任务“`

  • 第二项任务

    “`- [ ] 第二项任务“`

引用来源

https://markdown.com.cn
https://www.runoob.com


  1. 照例前面要加空格啦 ↩︎

正切の小窝

MarkdownNote
Markdown学习笔记 在部分软件中,目录可使用[TOC]添加 背景 Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档。 Markdown 语言在 2004 由约翰·格鲁伯(英…
扫描二维码继续阅读
2020-10-25