1717 字
9 分钟
Markdown教程
2025-08-30

Markdown 教程#

Markdown Guide (Web Version · Bilingual · Syntax & Rendered)

说明
下面每一节都包含两部分:

  1. 可复制原始语法(用 ''' 包裹):在网站中用于“展示而不被渲染”。
  2. 实际渲染(不包裹):直接展示渲染效果,便于对照。
    Each section has two parts: (1) copyable raw syntax wrapped with ''' so it won’t render, and (2) rendered preview without wrapping.

目录 · Table of Contents#

关于“扩展 Extended”:指 CommonMark 以外的扩展特性(不同渲染器支持度不同)。
“Extended” means features beyond CommonMark; support varies by renderer.


元素 Elements#

区块引用 Block Quote#

用于引用文字,嵌套引用用多个 >
Use > for quotes; nest with multiple >.

① 可复制原始语法(用 ''' 包裹)

'''
> This is a quote
>>
> > Nested quote
'''

② 实际渲染(不包裹)

This is a quote

Nested quote


有序列表 Ordered List#

数字可以不连续,渲染时会自动按照顺序编号(“Numbers don’t matter”)。
Numbers don’t need to be sequential; rendering will auto-number.

① 可复制原始语法(用 ''' 包裹)

'''
1. First
2. Second
1. Numbers
1. Don’t matter
'''

② 实际渲染(不包裹)

  1. First

  2. Second

  3. Numbers

  4. Don’t matter


无序列表 Unordered List#

支持 *+-,并可嵌套。
Supports *, +, or -, with nesting.

① 可复制原始语法(用 ''' 包裹)

'''
* Asterisks
* List
* Nested
+ Can also use plus sign
- Can also use dash
'''

② 实际渲染(不包裹)

  • Asterisks
  • List
    • Nested
  • Can also use plus sign
  • Can also use dash

图片 Images#

Markdown 与 HTML 两种写法。
Two forms: Markdown and HTML.

① 可复制原始语法(用 ''' 包裹)

'''
![Alt](https://a.com)
![Relative](/img.jpg)
<img src="https://a.com" alt="Alt" />
<img src="/img.jpg" alt="Relative" />
'''

② 实际渲染(不包裹) Alt Relative

Alt Relative

清单 Checklist(扩展 Extended)#

方框后必须有空格(例如 - [ ])。
Must include a space after the bracket (e.g., - [ ]).

① 可复制原始语法(用 ''' 包裹)

'''
- [ ] Must include space
- [x] Completed
'''

② 实际渲染(不包裹)

  • Must include space
  • Completed

表格 Tables(扩展 Extended)#

基本表格与对齐示例(右/中/左)。
Basic table and alignment (right/center/left).

① 可复制原始语法(用 ''' 包裹)

'''
| Name | Age |
| ----- | --- |
| Kyle | 28 |
| Sally | 45 |
| Right | Center | Left |
| ----: | :----: | :--- |
| 28 | Hi | Sally |
| 45 | Bye | Kyle |
'''

② 实际渲染(不包裹)

NameAge
Kyle28
Sally45
RightCenterLeft
28HiSally
45ByeKyle

基本文本元素 Basic Text Elements#

标题 Headings(部分功能为扩展)#

####### 表示 H1–H6。 {#my-id} 为扩展语法(为标题设置自定义 id)。
# to ###### for H1–H6. {#my-id} is extended syntax for custom id.

① 可复制原始语法(用 ''' 包裹)

'''
# Head 1
## Head 2
### Head 3 {#my-id}
#### Head 4
##### Head 5
###### Head 6
'''

② 实际渲染(不包裹)

Head 1#

Head 2#

Head 3 {#my-id}#

Head 4#

Head 5#
Head 6#
HTML 对应写法 · HTML Equivalents
<h1>Head 1</h1>
<h2>Head 2</h2>
<h3 id="my-id">Head 3</h3>
<h4>Head 4</h4>
<h5>Head 5</h5>
<h6>Head 6</h6>

段落 Paragraphs#

单个换行仍在同一段;两次(或以上)换行开始新段。
Single newline = same paragraph; two or more newlines = new paragraph.

① 可复制原始语法(用 ''' 包裹)

'''
Will be same
paragraph
if only one new line used
New paragraph if two or
more new lines are used
'''

② 实际渲染(不包裹) Will be same paragraph if only one new line used

New paragraph if two or

more new lines are used

HTML 对应写法 · HTML Equivalents
<p>Will be same paragraph if only one new line used</p>
<p>New paragraph if two or more new lines are used</p>

换行 Line Breaks#

行尾两个空格产生换行(示例中的 表示空格)。
Two spaces at the end of a line create a break (here denotes a space).

① 可复制原始语法(用 ''' 包裹)

'''
Two spaces␣␣
at end of line will make
a line break
'''

② 实际渲染(不包裹) Two spaces
at end of line will make a line break

HTML 对应写法 · HTML Equivalents
<p>Two spaces<br />
at end of line will make a line break</p>

链接 Links(部分功能为扩展)#

基本链接、相对链接、页内 id、尖括号自动链接,以及裸露链接(仅扩展)。
Basic, relative, hash-id, autolink with angle brackets, and bare links (extended).

① 可复制原始语法(用 ''' 包裹)

'''
[Label](https://url.com)
[Relative](/other-page)
[Id](#my-id)
<https://url.com>
https://extended.com
'''

② 实际渲染(不包裹) Label
Relative
Id

https://url.com
https://extended.com

HTML 对应写法 · HTML Equivalents
<a href="https://url.com">Label</a>
<a href="/other-page">Relative</a>
<a href="#my-id">Id</a>
<a href="https://url.com">https://url.com</a>
<a href="https://extended.com">https://extended.com</a>

水平分割线 Horizontal Rule#

需要与上下文有空行分隔;至少 3 个符号,可用 -*_
Needs blank lines around; at least 3 chars; can use -, *, or _.

① 可复制原始语法(用 ''' 包裹)

'''
---
***
________
'''

② 实际渲染(不包裹)




HTML 对应写法 · HTML Equivalents
<hr />
<hr />
<hr />

文本样式 Text Styling#

粗体 Bold#

可用 **__,也可在词中间加粗(asterisks)。
Use ** or __; mid-word bolding is possible.

① 可复制原始语法(用 ''' 包裹)

'''
This is **bold**
This is __also bold__
Use as**teris**ks for mid word bolding
'''

② 实际渲染(不包裹) This is bold
This is also bold
Use asterisks for mid word bolding


斜体 Italics#

可用 *_,也支持词中间斜体。
Use * or _; mid-word italics work too.

① 可复制原始语法(用 ''' 包裹)

'''
This is *italic*
This is _also italic_
Use as*teris*ks for mid word italics
'''

② 实际渲染(不包裹) This is italic
This is also italic
Use asterisks for mid word italics


粗斜体组合 Bold+Italics#

可用 *** / ___ 或任意组合(如 __*both*__)。
Use *** / ___ or combos like __*both*__.

① 可复制原始语法(用 ''' 包裹)

'''
This is ***both***
This is ___also both___
Any combo for __*both*__
Use as***teris***ks for mid word emphasis
'''

② 实际渲染(不包裹) This is both
This is also both
Any combo for both
Use asterisks for mid word emphasis


删除线 Strikethrough(扩展)#

~~内容~~
Use ~~text~~.

① 可复制原始语法(用 ''' 包裹)

'''
This is ~~crossed out~~
'''

② 实际渲染(不包裹) This is crossed out


高亮 Highlight(扩展)#

==内容==
Use ==text==.

① 可复制原始语法(用 ''' 包裹)

'''
This is ==highlighted==
'''

② 实际渲染(不包裹) This is ==highlighted==


下标 Subscript(扩展)#

H~2~O 渲染为 H₂O(取决于渲染器)。
H~2~O renders as H₂O depending on renderer.

① 可复制原始语法(用 ''' 包裹)

'''
H~2~O
'''

② 实际渲染(不包裹) H2O


上标 Superscript(扩展)#

x^2^ 渲染为 x²(取决于渲染器)。
x^2^ renders as x² depending on renderer.

① 可复制原始语法(用 ''' 包裹)

'''
x^2^
'''

② 实际渲染(不包裹) x^2^


表情 Emoji(扩展)#

使用短码(例如 :smile:)。
Use shortcodes like :smile:.

① 可复制原始语法(用 ''' 包裹)

'''
I am happy :smile:
'''

② 实际渲染(不包裹) I am happy :smile:


代码 Code#

行内代码 Inline Code#

用反引号包裹: `code`
Wrap with backticks: `code`.

① 可复制原始语法(用 ''' 包裹)

'''
JS Variable: `let x = 1`
'''

② 实际渲染(不包裹) JS Variable: let x = 1

HTML 对应写法 · HTML Equivalent
JS Variable: <code>let x = 1</code>

代码块 Code Block(可选语言标注)#

常见为三反引号围起,语言可选(如 ```js)。
Use triple backticks; optional language tag (e.g., ```js).

① 可复制原始语法(用 ''' 包裹)

'''
```js
const x = 3
let y = 4

'''

**② 实际渲染(不包裹)**
```js
const x = 3
let y = 4

更多信息 - More Information#

完整的 Markdown 语法规范可以参考 菜鸟教程-Markdown教程