markdown 学习

介绍

百度百科

  • 简介
    Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档。

  • 应用

当前许多网站都广泛使用 Markdown 来撰写帮助文档或是用于论坛上发表消息。例如：GitHub、简书、知乎等

  • 徽章
    徽章是一种小巧精美的小图标，一般配有相关文字进行辅助说明，可对数据进行监控，链接跳转等，富有表现力。
    常见于 github 项目主页，但其不仅出现于 github 项目主页，凡是能够表现图片的地方都可以出现徽章
1
2
3
格式: [![图片文字说明](图片源地址)](超链接地址)  即超链接内部嵌套图片
语法：
[![github](https://img.shields.io/badge/github-xugaoyi-brightgreen.svg)](https://github.com/xugaoyi)

github

徽章生成网站: https://shields.io/

徽章生成教程

  • 编辑
    vscode 下载markdown-formatter插件
    setting.json配置：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// 按照js格式化
// "markdownFormatter.codeAreaToBlock": "js",
// 不格式化
"markdownFormatter.codeAreaToBlock": "",
// 自动格式化标点
"markdownFormatter.fullWidthTurnHalfWidth": "auto",
// 中文标点格式化为英文
// "markdownFormatter.fullWidthTurnHalfWidth": "，：；！“”‘’（）？。",
"markdownFormatter.formatOpt": {
  "indent_size": 2
},
"[markdown]": {
  // 自动保存
  "editor.formatOnSave": true,
  // 显示空格
  "editor.renderWhitespace": "all",
  // 快速补全
  "editor.quickSuggestions": {
    "other": true,
    "comments": true,
    "strings": true
  },
  // snippet 提示优先
  "editor.snippetSuggestions": "top",
  "editor.tabCompletion": "on",
  // 使用enter 接受提示
  "editor.acceptSuggestionOnEnter": "on",
  // 默认格式化工具为本工具
  "editor.defaultFormatter": "mervin.markdown-formatter"
}

开始

标题

1
2
3
4
5
6
7
8
9
10
11
12
13
语法：
# 一级标题

## 二级标题

### 三级标题

#### 四级标题

##### 五级标题

###### 六级标题

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题

文本

  • 段落
    Markdown 段落没有特殊的格式，直接编写文字，需要段落缩进时使用 2 个 Tab

  • 字体

1
2
3
*斜体文本*   _斜体文本_
**粗体文本**  __粗体文本__
***粗斜体文本***  ___粗斜体文本___

斜体文本 斜体文本
粗体文本 粗体文本
粗斜体文本 粗斜体文本

  • 删除线
1
~~删除线~~

删除线

  • 下划线
    下划线可以通过 HTML 的 标签来实现：
1
<u>带下划线的文本</u>

带下划线的文本

  • 文字高亮
    文字高亮功能能使行内部分文字高亮，使用一对反引号。
1
2
`html` `css` `javascript`

html css javascript

分割线

1
2
3
4
5
6
7
***

*****

- - -

----------

脚注

脚注是对文本的补充说明

1
2
3
4
5
6
7
语法：
[^变量]
在文档结尾或其他位置給变量赋值：
[^变量]: 注明框内显示的内容

鼠标移到这里> [^哈喽]
[^哈喽]: 注明框内显示的内容

鼠标移到这里> [^1]

列表

  • 无序列表
1
2
3
4
5
6
7
8
* 第一项
* 第二项

+ 第一项
+ 第二项

- 第一项
- 第二项

  • 第一项

  • 第二项

  • 第一项

  • 第二项

  • 第一项

  • 第二项

  • 有序列表
1
2
1. 第一项
2. 第二项
  1. 第一项
  2. 第二项
  • 折叠列表
1
2
3
4
5
6
7
8
9
<details>
  <summary>点我打开关闭折叠</summary>
  折叠内容
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</details>
点我打开关闭折叠 折叠内容
  • 1
  • 2
  • 3
  • 带复选框列表
1
2
3
* [x] 第一项
* [ ] 第二项
* [ ] 第三项
  • 第一项
  • 第二项
  • 第三项

-列表嵌套

1
2
3
4
5
6
1. 第一项
   - 嵌套1
   - 嵌套2
2. 第二项
   - 嵌套1
   - 嵌套2
  1. 第一项
    • 嵌套1
    • 嵌套2
  2. 第二项
    • 嵌套1
    • 嵌套2

区块

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

1
> 区块引用

区块引用

回车键自动延伸区块

  • 区块嵌套

    1
    2
    3
    > 第一层
    > > 第二层
    > > > 第三层

    第一层

    第二层

    第三层

-区块中使用列表

1
2
3
4
5
> 区块中使用列表
> 1. 第一项
> 2. 第二项
> * 111
> * 222

区块中使用列表

  1. 第一项
  2. 第二项
  • 111
  • 222

  • 列表中使用区块

    1
    2
    3
    * 第一项
        > 区块
    * 第二项
    • 第一项

      区块

    • 第二项

代码

如果是段落上的一个函数或片段的代码可以用反引号把它包起来（**`**）：

1
`function()` 函数

function()函数

  • 代码块

    用 ``` 包裹一段代码，并指定一种语言（也可以不指定）
    本代码区块为说明：

    1
    2
    3
    4
    5
    6
    语法：
    ​```javascript
    function test() {
    alert('test')
    }
    ​```

    效果：

    1
    2
    3
    function test() {
    alert('test')
    }

    链接

    1
    2
    3
    4
    [链接名称](链接地址)
    [链接名称](链接地址,可选的alt)
    或
    <链接地址>
    1
    [百度](http://www.baidu.com,'百度')

    百度

    直接显示链接地址：

    1
    <http://www.baidu.com>

    http://www.baidu.com

  • 变量链接

    1
    2
    3
    4
    5
    6
    链接可以用变量来代替，文档末尾或其他位置附带变量地址：
    这个链接用 1 作为网址变量 [Google][1]
    这个链接用 baidu 作为网址变量 [Baidu][baidu]
    然后在文档的结尾为变量赋值（网址）
      [1]: http://www.google.com/
      [baidu]: http://www.baidu.com/

    [Google][1]

    [Baidu][baidu]

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

    [baidu]: http://www.baidu.com/

  • Github中使用内部链接

    1
    2
    可使用相对路径（前提是有该路径下的文件）
    [test](/2022/05/30/git/)

    test

  • 锚点链接

    本文件中每一个标题都是一个锚点，和HTML的锚点（#）类似

    1
    [Markdown](#Markdown)

    注： github对含有标点符号的标题进行锚点时会忽略掉标点符号，
    本页中，如果这样写则无法跳转：[链接](#九、链接)
    正确写法：[链接](#九链接)
    Markdown

    链接

    流程图

图片

1
2
![alt替代文本](图片地址)
![alt替代文本](图片地址 "title标题")

  • 开头一个感叹号 !

  • 接着一个方括号，里面放上图片的替代文字

  • 接着一个普通括号，里面放上图片的地址，最后还可以用引号包住并加上选择性的 ‘title’ 属性的文字。

    1
    ![logo](https://img2.baidu.com/it/u=594502772,1564194739&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=265 "logo")

    logo

    当然，你也可以像链接那样对图片地址使用变量:

    1
    2
    3
    4
    这里链接用 img 作为图片地址变量 
    然后在文档的结尾或其他位置给变量赋值（图片地址）
    ![RUNOOB][img]
     [img]: https://img2.baidu.com/it/u=594502772,1564194739&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=265

    RUNOOB

  • 图片宽高
1
<img src="https://img2.baidu.com/it/u=594502772,1564194739&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=265" width="50px" height="30px">

表格

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

1
2
3
4
|  表头   | 表头  |
|  ----  | ----  |
| 单元格  | 单元格 |
| 单元格  | 单元格 |
表头 表头
单元格 单元格
单元格 单元格
  • 对齐方式
    • -: 设置内容和标题栏居右对齐
    • :- 设置内容和标题栏居左对齐
    • :-: 设置内容和标题栏居中对齐
1
2
3
4
| 左对齐 | 右对齐 | 居中对齐 |
| :-----| ----: | :----: |
| 单元格 | 单元格 | 单元格 |
| 单元格 | 单元格 | 单元格 |
左对齐 右对齐 居中对齐
单元格 单元格 单元格
单元格 单元格 单元格

Emoji表情包

1
2
3
4
5
语法：Emoji表情英文名的前后加冒号，Typore上先输入冒号再输入首字母有表情提示
或直接复制表情包
如：
:smirk:
&#x1f602;

支持不完善

表情包

😀 😃 🥰 😍 😘

😂
:smirk:

更多表情名称请查看：表情包清单

其他技巧

支持的 HTML 元素

不在 Markdown 语法涵盖范围之内的标签，都可以直接在文档里面用 HTML 撰写。

目前支持的 HTML 元素有：<kbd> <b> <i> <em> <sup> <sub> <br>等 ，如：

1
使用 <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd> 重启电脑

使用 Ctrl+Alt+Del 重启电脑

使用b标签的加粗字体

转义

Markdown 使用了很多特殊符号来表示特定的意义，如果需要显示特定的符号则需要使用反斜杠转义字符：

1
2
3
语法：
**未转义星号显示加粗** 
\*\* 转义显示星号 \*\*

未转义星号显示加粗
** 转义显示星号 **

Markdown 支持以下这些符号前面加上反斜杠来帮助插入普通的符号：

1
2
3
4
5
6
7
8
9
10
11
12
\   反斜线
`   反引号
*   星号
_   下划线
{}  花括号
[]  方括号
()  小括号
#   井字号
+   加号
-   减号
.   英文句点
!   感叹号

*** 以下部分在Github暂未支持 ***

数学公式

当你需要在编辑器中插入数学公式时，可以使用两个美元符 $$ 包裹 TeX 或 LaTeX 格式的数学公式来实现。提交后，问答和文章页会根据需要加载 Mathjax 对数学公式进行渲染。如：

1
2
3
4
5
6
7
8
9
语法：
$$
\mathbf{V}_1 \times \mathbf{V}_2 =  \begin{vmatrix} 
\mathbf{i} & \mathbf{j} & \mathbf{k} \\
\frac{\partial X}{\partial u} &  \frac{\partial Y}{\partial u} & 0 \\
\frac{\partial X}{\partial v} &  \frac{\partial Y}{\partial v} & 0 \\
\end{vmatrix}
$$tep1}{\style{visibility:hidden}{(x+1)(x+1)}}
$$

$\sqrt{3x-1}+(1+x)^2$

$$
\mathbf{V}_1 \times \mathbf{V}_2 = \begin{vmatrix}
\mathbf{i} & \mathbf{j} & \mathbf{k} \
\frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \
\frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \
\end{vmatrix}
$$

图表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
语法：
​```chart
,Budget,Income,Expenses,Debt
June,5000,8000,4000,6000
July,3000,1000,4000,3000
Aug,5000,7000,6000,3000
Sep,7000,2000,3000,1000
Oct,6000,5000,4000,2000
Nov,4000,3000,5000,
type: pie
title: Monthly Revenue
x.title: Amount
y.title: Month
y.suffix: $
​```
​```mermaid
sequenceDiagram
A->>B: 是否已收到消息？
B-->>A: 已收到消息
​```

​chart ,Budget,Income,Expenses,Debt June,5000,8000,4000,6000 July,3000,1000,4000,3000 Aug,5000,7000,6000,3000 Sep,7000,2000,3000,1000 Oct,6000,5000,4000,2000 Nov,4000,3000,5000, type: pie title: Monthly Revenue x.title: Amount y.title: Month y.suffix: $ ​

​mermaid sequenceDiagram A->>B: 是否已收到消息？ B-->>A: 已收到消息 ​

注：在Typora中未支持

流程图

1
2
3
4
5
6
7
8
9
语法：
​```mermaid
graph TD
A[模块A] -->|A1| B(模块B)
B --> C{判断条件C}
C -->|条件C1| D[模块D]
C -->|条件C2| E[模块E]
C -->|条件C3| F[模块F]
​```

流程图相关文章：https://www.jianshu.com/p/b421cc723da5

http://www.imooc.com/article/292708

1
2
3
4
5
6
graph TD
A[模块A] -->|A1| B(模块B)
B --> C{判断条件C}
C -->|条件C1| D[模块D]
C -->|条件C2| E[模块E]
C -->|条件C3| F[模块F]

时序图

1
2
3
4
5
6
语法：
​```mermaid
sequenceDiagram
A->>B: 是否已收到消息？
B-->>A: 已收到消息
​```
1
2
3
sequenceDiagram
A->>B: 是否已收到消息？
B-->>A: 已收到消息

甘特图

1
2
3
4
5
6
7
8
9
10
11
12
语法：
​```mermaid
gantt
title 甘特图
dateFormat  YYYY-MM-DD
section 项目A
任务1           :a1, 2018-06-06, 30d
任务2     :after a1  , 20d
section 项目B
任务3      :2018-06-12  , 12d
任务4      : 24d
​```
1
2
3
4
5
6
7
8
9
gantt
title 甘特图
dateFormat  YYYY-MM-DD
section 项目A
任务1           :a1, 2018-06-06, 30d
任务2     :after a1  , 20d
section 项目B
任务3      :2018-06-12  , 12d
任务4      : 24d