Markdown基础使用指南

一、简单认识Markdown Markdown 是一种轻量级标记语言,创始人为约翰·格鲁伯(John Gruber)。 Markdown 允许人们使用易读易写的纯文本格式编写文档,然后转换成有效的HTML文档。 Markdown 编写的文档可以导出 HTML 、Word、图像、PDF、Epub 等多

一、简单认识Markdown

Markdown 是一种轻量级标记语言,创始人为约翰·格鲁伯(John Gruber)。

Markdown 允许人们使用易读易写的纯文本格式编写文档,然后转换成有效的HTML文档。

Markdown 编写的文档可以导出 HTML 、Word、图像、PDF、Epub 等多种格式的文档。

Markdown 编写的文档后缀为 .md, .markdown。

二、Markdown基础语法

2.1标题

使用#号标记,可以表示H1-H6,随#个数的增加标题逐渐变小;建议在#号后加一个 空格,这是最标准的 Markdown 语法。

代码如下:

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

效果如下:

2.2文本

代码

效果

*这是斜体文本*

这是斜体文本

_这是斜体文本_

这是斜体文本

**这是粗体文本**

这是粗体文本

__这是粗体文本__

这是粗体文本

***这是粗斜体文本***

这是粗斜体文本

~~这是删除文本~~

这是删除文本

==这是标记文本==

这是标记文本

<u>这是下划线文本<u>

这是下划线文本

2.3列表

Markdown的列表有序列表无序列表以及特殊的任务列表

行尾回车换行后会自动接续列表,再次按Tab会标记段落并更换列表符/再次按回车会清除列表符以作换行。

2.3.1有序列表

有序列表即有顺序的列表,使用 数字、英文句点 后面加一个 空格 作为列表标记。

注:原始代码中的数字编号不影响最终输出的HTML结果

1. 文本1
2. 文本2
9. 文本3

输出效果为:

  1. 文本1
  2. 文本2
  3. 文本3

列表可嵌套,嵌套可使列表项包含多个段落。列表项中的 每个后续段落必须缩进 4个空格1个制表符,代码块需要缩进 8个空格2个制表符

1. 列表1
   列表1的 段落
    > 列表1的 引用
        列表1的 代码块
1. 列表2

输出效果:

  1. 列表1 列表1的 段落

    列表1的 引用 列表1的 代码块

  2. 列表2

注:当需要使用“.”作为文本内容时,可能会意外地触发一个有序列表,为了避免这种情况,可以在“.”前加上反斜线 \ 用于转义

2.3.2无序列表

即列表没有序号,使用 减号 -星号 *加号 + 作为列表标记,符号后须加上 空格

- 1级列表
    * 2级列表
    * 2级列表
        + 3级列表
        + 3级列表
- 1级列表
- 1级列表

输出效果:

  • 1级列表
    • 2级列表
    • 2级列表
      • 3级列表
      • 3级列表
  • 1级列表
  • 1级列表

2.3.3任务列表

在列表项目前面加 1个减号 -空格 、并紧跟 方括号 [ ] 作为待办任务标记,使用 [x] 将任务标记为已完成。

- [ ] 任务列表(待办任务)
- [x] 任务列表(完成任务)

输出效果:

  • 任务列表(待办任务)
  • 任务列表(完成任务)

2.4引用

在段落开头使用 右尖括号 > ,并紧跟一个 空格 来引用文本。也可再次添加 > 嵌套引用。

> 引用1
>> 引用2
>
> 引用1

输出效果:

注:引用的区块中也可以包含其它Markdown元素,例如标题、列表、代码块等。

2.5代码

Markdown中代码块有两种:内联代码块、围栏代码块

内联代码块(使用 1个反引号 ` 将其包起来;反引号中的文本不会被格式化)示例:

`Hello` World.

输出效果:

Hello World.

围栏代码块引用的语句为多行,在代码行首缩进 4个空格1个制表符 (Tab) ,也可以使用 3个反引号 ` 置于代码的首行和末行)示例:

```[语言标识符]
  在这里插入代码
```

```javascript
  var lock = "lock";
```

输出效果:

  var lock = "lock";

2.6图像与链接

链接格式为: [链接标题文字](URL地址 可选title属性)
图像格式为:![图像描述文字](URL地址 可选title属性)

注:图片若需要修改位置和大小可以在url地址后面加上#pic_center =120*120

2.7表格

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

:-:将表头及单元格内容左对齐

-::将表头及单元格内容右对齐

:-::将表头及单元格内容居中

示例代码:

|第一列       |      第二列|第三列      |
|:----------:|----------:|:----------|
|第一列文本居中|第二列文本居右|第二列文本居左|

输出效果:

第一列

第二列

第三列

第一列文本居中

第二列文本居右

第三列文本居左

2.8分割线

Markdown中给出了多种分割线的样式,我们可以使用分割线让文章结构更加的清晰。
我们可以在一行中用三个-*_来建立一个分割线,但是注意:在分割线的上面空一行,否则会导致前一行字体放大

---
***

输出效果:

2.9删除线

在需要添加删除线的文本前后添加2个~

~~被删除的文字~~没有被删除的文字

输出效果:

被删除的文字没有被删除的文字

2.10下划线

下划线的使用和html中类似,在需要添加下划线的文字首尾添加<u>文本</u>

<u>这行文字已被添加下划线</u>

输出效果:

这行文字已被添加下划线

2.11数学公式

LaTeX 数学公式 语法列表查询:https://katex.org/docs/supported.html

LaTeX 数学公式 在线编辑工具:https://www.latexlive.com、https://latex.codecogs.com/eqneditor/editor.php

数学公式:当你需要在编辑器中插入数学公式时,可以使用 2个美元符 $ 包裹 TeX 或 LaTeX 格式的数学公式来实现。

$$
\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.
$$

输出效果:

\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.

上标和下标:上标使用符号 ^ 包围、下标使用符号 ~ 包围。编辑器不支持时,可分别使用 HTML 标签 <sup>(superscript)和 <sub>(subscript)替代。

上标和下标:2^10^,H~2~O
HTML 标签:2<sup>10</sup>,H<sub>2</sub>O

输出效果:

上标和下标:210,H2O
HTML 标签:210,H2O

三、进阶用法

3.1Mermaid图表

3.1.1流程图

官方语法文档:https://mermaid.js.org/syntax/flowchart

示例代码:

```mermaid
flowchart LR
A[长方形] -- 链接 --> B((圆形))
A --> C(圆角长方形)
B --> D{菱形}
C --> D
```

输出效果:

flowchart LR A[长方形] -- 链接 --> B((圆形)) A --> C(圆角长方形) B --> D{菱形} C --> D

3.1.2时序图

官方语法文档:https://mermaid.js.org/syntax/sequenceDiagram

示例代码:

```mermaid
sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    Alice-)John: See you later!
```

输出效果:

sequenceDiagram Alice->>John: Hello John, how are you? John-->>Alice: Great! Alice-)John: See you later!

3.1.3甘特图

官方语法文档:https://mermaid.js.org/syntax/gantt

示例代码:

```mermaid
gantt
    title A Gantt Diagram
    dateFormat YYYY-MM-DD
    section Section
        A task          :a1, 2014-01-01, 30d
        Another task    :after a1, 20d
    section Another
        Task in Another :2014-01-12, 12d
        another task    :24d
```

输出效果:

gantt title A Gantt Diagram dateFormat YYYY-MM-DD section Section A task :a1, 2014-01-01, 30d Another task :after a1, 20d section Another Task in Another :2014-01-12, 12d another task :24d

了解更多图表: https://mermaid.js.org/intro

Comment