Markdown 速查表

Markdown 语法完整参考指南

基于 GitHub Flavored Markdown (GFM) 和 CommonMark

基本语法

原始 Markdown 的基本元素

标题（ATX 风格）

# Heading 1→Heading 1
## Heading 2→Heading 2
### Heading 3→Heading 3
#### Heading 4→Heading 4
##### Heading 5→Heading 5
###### Heading 6→Heading 6

标题（Setext 风格）

语法
Heading 1
=========

Heading 2
---------
结果
Heading 1Heading 2

强调和格式化

*italic*→italic
_italic_→italic
**bold**→bold
__bold__→bold
***bold italic***→bold italic
~~strikethrough~~→strikethrough

内联代码

`code`→code
``code with `backtick` ``→code with `backtick`
提示
当代码包含单反引号时，使用双反引号。

代码块（围栏代码块）

语法
```javascript
function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet("World");
```
结果
function greet(name) {
console.log(`Hello, ${name}!`);
}

greet("World");
支持的语法高亮语言
javascriptjavascripttypescripttypescriptpythonpythonjavajavacccppcppcsharpcsharpgogorustrustrubyrubyphpphpswiftswiftkotlinkotlinscalascalasqlsqlbashbashshellshellpowershellpowershelljsonjsonyamlyamlxmlxmlhtmlhtmlcsscssscssscsssasssassmarkdownmarkdownlatexlatexrrmatlabmatlabperlperllualuahaskellhaskellelixirelixirclojureclojuredockerfiledockerfilenginxnginxapacheapachegraphqlgraphqlprismaprismasoliditysolidity

链接

[text](url)→text
[text](url "title")→text
<https://example.com>→https://example.com
引用链接
[text][ref]

[ref]: https://example.com "Title"

图片

语法
![Alt text](url)
带标题
![Alt text](url "Title")
带链接的图片
[![Alt](image.jpg)](link)
引用
![Alt][ref]

[ref]: url "Title"

无序列表

语法
- Item 1
- Item 2
  - Sub-item 2.1
  - Sub-item 2.2
    - Sub-sub-item
- Item 3

* Also works with *
+ And with +
结果
  • Item 1
  • Item 2
    • Sub-item 2.1
    • Sub-item 2.2
      • Sub-sub-item
  • Item 3

有序列表

语法
1. First item
2. Second item
   1. Sub-item 2.1
   2. Sub-item 2.2
3. Third item

1. Numbers don't need
1. to be in order
1. Markdown fixes it
结果
  1. First item
  2. Second item
    1. Sub-item 2.1
    2. Sub-item 2.2
  3. Third item

引用（块引用）

语法
> This is a quote.
> It can span multiple lines.
>
> > Quotes can be nested.
> > Like this one.
>
> And continue after.
结果
This is a quote. It can span multiple lines.
Quotes can be nested. Like this one.
And continue after.

水平线

语法
---

***

___
结果

GFM 扩展

GitHub Flavored Markdown 的附加功能

表格

语法
| Product    | Price  | Quantity |
|------------|:------:|---------:|
| Apple      | $3     |       10 |
| Banana     | $2     |       25 |
| Orange     | $4     |       15 |

对齐:
:--- 左
:---: 中
---: 右
结果
ProductPriceQuantity
Apple$310
Banana$225
Orange$415

任务列表

语法
- [x] Completed task
- [x] Another done task
- [ ] Pending task
- [ ] Another pending
结果
  • Completed task
  • Another done task
  • Pending task
  • Another pending

自动链接

URL 和邮件自动转为链接
www.example.com
https://example.com
[email protected]
结果

警告/标注（GitHub）

语法
> [!NOTE]
> Useful information that users
> should know.

> [!TIP]
> Helpful advice for doing
> things better or more easily.

> [!IMPORTANT]
> Key information users need
> to know to succeed.

> [!WARNING]
> Urgent info that needs
> immediate attention.

> [!CAUTION]
> Negative potential consequences
> of certain actions.
结果
NoteUseful information that users should know.
TipHelpful advice for doing things better.
ImportantKey information for success.
WarningCritical content needing attention.
CautionNegative consequences of certain actions.

扩展语法

某些解析器支持的高级功能

脚注

语法
Here's a sentence with
a footnote.[^1]

[^1]: This is the footnote.

You can also use text[^note].

[^note]: Notes can have
    multiple lines.
结果

Here's a sentence with a footnote.[1]

You can also use text[note].

[1] This is the footnote.
[note] Notes can have multiple lines.

定义列表

语法
Term 1
: Definition of term 1

Term 2
: Definition of term 2
: Second definition of term 2
结果
Term 1
Definition of term 1
Term 2
Definition of term 2
Second definition of term 2

高亮文本

==highlighted text==→highlighted text
注意
被一些解析器支持，如 Obsidian、Notion 等。

下标和上标

H~2~O→H2O
X^2^→X2
HTML 替代
H<sub>2</sub>O
X<sup>2</sup>

表情符号

:smile:→😄
:heart:→❤️
:rocket:→🚀
:+1:→👍
完整参考
完整的表情符号短代码列表

缩写

语法
HTML is widely used on the web.

*[HTML]: HyperText Markup Language
结果
HTML is widely used on the web.

数学公式（LaTeX）

内联
The formula $E = mc^2$ is famous.
结果
The formula E = mc² is famous.
块
$$
\frac{n!}{k!(n-k)!} = \binom{n}{k}
$$
结果
n!k!(n-k)! = (nk)

HTML 和特殊元素

内联 HTML 和特殊字符的使用

内联 HTML

支持的元素
<kbd>Ctrl</kbd> + <kbd>C</kbd>

<mark>Highlighted text</mark>

<details>
<summary>Click to expand</summary>
Hidden content here.
</details>

<br> for line break
结果
Ctrl + C
Highlighted text
Click to expand
Hidden content here.

字符转义

在特殊字符前使用 \
\*text between asterisks\*
\# not a heading
\[not a link\]
\\ backslash
可以转义的字符
\ ` * _ { } [ ] ( ) # + - . ! |

换行

方法
Line 1  
Line 2 (2 spaces at the end)

Line 1<br>
Line 2 (HTML tag)

Line 1

Line 2 (blank line = paragraph)

HTML 实体

&copy;→©
&reg;→®
&trade;→™
&nbsp;→（不间断空格）
&lt; &gt;→< >
&amp;→&

GitHub 高级功能

GitHub Flavored Markdown 特有功能

Mermaid 图表

流程图
```mermaid
flowchart LR
    A[Start] --> B{Decision}
    B -->|Yes| C[Action 1]
    B -->|No| D[Action 2]
    C --> E[End]
    D --> E
```
结果
Start
→
Decision
Yes →
Action 1
No →
Action 2
→
End
饼图
```mermaid
pie title Distribution
    "Movies" : 80
    "Series" : 20
```
时序图
```mermaid
sequenceDiagram
    Alice->>Bob: Hello Bob!
    Bob-->>Alice: Hi Alice!
```
支持的图表类型
mermaidflowchartmermaidsequenceDiagrammermaidclassDiagrammermaidstateDiagrammermaiderDiagrammermaidganttmermaidpiemermaidgitGraphmermaidjourneymermaidmindmapmermaidtimelinemermaidquadrantChartmermaidsankeymermaidxychart

键盘按键（kbd）

语法
<kbd>Ctrl</kbd> + <kbd>C</kbd>

<kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd>

<kbd>
  Enter ↵
</kbd>
结果
Ctrl + C
Cmd + Shift + P
Enter ↵

可折叠元素

语法
<details>
  <summary>Click to expand</summary>

  Hidden content that will
  be revealed on click.

  - Item 1
  - Item 2
  - Item 3
</details>
结果
Click to expand

Hidden content that will be revealed on click.

  • Item 1
  • Item 2
  • Item 3

提及和引用

用户提及
@username
@organization/team
Issue 和 PR 引用
#123
GH-123
username/repo#123
organization/repo#123
结果
@username — 提及用户
#123 — 引用 issue/PR #123
repo#456 — 在其他仓库中引用

颜色模型

语法
`#ffffff`
`#0969DA`
`rgb(9, 105, 218)`
`hsl(212, 92%, 45%)`
结果
#ffffff
#0969DA
rgb(9, 105, 218)
hsl(212, 92%, 45%)

注释

语法
<!-- This is a comment -->
<!-- 
  Multi-line
  comment
-->
结果
（注释在渲染的文档中不可见）

提交 SHA

语法
a1b2c3d
a1b2c3d4e5f6g7h8i9j0
username/repo@a1b2c3d
结果
a1b2c3d — 链接到提交
repo@a1b2c3d — 其他仓库的提交

带 Diff 的代码

语法
```diff
- const old = "old value";
+ const new = "new value";

  function unchanged() {
-   return false;
+   return true;
  }
```
结果
- const old = "old value";
+ const new = "new value";
 
  function unchanged() {
- return false;
+ return true;
  }

锚点和内部链接

创建锚点
<a name="section"></a>
## My Section
链接到锚点
[Go to section](#section)
[Back to top](#top)
结果
Go to section|Back to top ⬆️

带尺寸的图片

使用 HTML
<img src="image.png" width="300">

<img src="image.png" 
     width="200" 
     height="100" 
     alt="Description">

<p align="center">
  <img src="logo.png" width="150">
</p>
提示
当需要控制图片尺寸或对齐时使用 HTML。

目录

语法
## Table of Contents

- [Introduction](#introduction)
- [Installation](#installation)
  - [Requirements](#requirements)
  - [Setup](#setup)
- [Usage](#usage)
- [Contributing](#contributing)
结果
Table of Contents

徽章/盾牌

语法
![Badge](https://img.shields.io/badge/
  text-color-style)

[![npm](https://img.shields.io/npm/v/
  package.svg)](link)

![GitHub stars](https://img.shields.io/
  github/stars/user/repo)
结果
build: passingversion: 1.0.0license: MITdocs: latest

文本对齐

语法
<div align="center">
  Centered text
</div>

<div align="right">
  Right-aligned text
</div>

<p align="center">
  <strong>Centered bold</strong>
</p>
结果
Centered text
Right-aligned text
Centered bold

工具和资源

使用 Markdown 的有用链接

参考资料和资源