README技术、设计与日常思考
← 返回首页
技术

Markdown语法教程

Markdown语法的基础语法教程

markdown

Markdown 常用语法教程

本教程覆盖写博客、记笔记最常用的 Markdown 语法。每个语法都用「怎么写(源码)+ 显示成什么样(效果)」对照呈现,照着抄就能用。


目录

  1. 标题
  2. 段落与换行
  3. 强调:加粗、斜体、删除线
  4. 列表
  5. 引用块
  6. 链接
  7. 图片
  8. 代码
  9. 表格
  10. 分割线
  11. 首行缩进(中文排版)
  12. 常见坑与速查表

1. 标题

# 表示标题,几个 # 就是几级标题,最多六级。# 后面一定要空一个格,否则有些编辑器不识别。

怎么写:

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

显示效果:

一级标题

二级标题

三级标题

四级标题

小提示:标题会自动进入文档「大纲 / 目录」。如果某个标题没出现在大纲里,多半是 # 后面忘了空格,或者标题下一行紧贴着写了 ---(见 第 10 节)。


2. 段落与换行

段落之间留一个空行即可。注意:直接按回车换行(不空行)在多数平台里不会真正换行,两行会被拼成一段。

怎么写:

这是第一段。

这是第二段,和上一段之间空了一行。

显示效果:

这是第一段。

这是第二段,和上一段之间空了一行。

如果想在同一段内强制换行(不另起一段),在行末敲两个空格再回车,或者用 <br>

第一行末尾打了两个空格  
所以这行另起一行,但还是同一段

显示效果:

第一行末尾打了两个空格
所以这行另起一行,但还是同一段


3. 强调:加粗、斜体、删除线

规律很简单,就是「用几个符号包住文字」。符号和文字之间不要留空格(写成 ** 文字 ** 会失效)。

怎么写:

*斜体* 或 _斜体_
**加粗** 或 __加粗__
***又粗又斜***
~~删除线~~

显示效果:

斜体斜体 加粗加粗 又粗又斜 删除线

写法 含义
*文字* 斜体
**文字** 加粗
***文字*** 又粗又斜
~~文字~~ 删除线

波浪号 ~ 在键盘左上角、数字 1 左边那个键,按 Shift + 该键 打出;删除线要连打两个 ~~。删除线属于 GFM 扩展语法,GitHub、掘金、语雀等主流平台都支持。


4. 列表

无序列表

行首用 -(也可用 *+),后面空一格。

怎么写:

- 苹果
- 香蕉
  - 嵌套项要缩进 2 个空格
  - 再来一项
- 橘子

显示效果:

  • 苹果
  • 香蕉
    • 嵌套项要缩进 2 个空格
    • 再来一项
  • 橘子

有序列表

行首用 数字.,后面空一格。数字不必依次准确,Markdown 会自动重新编号(你全写 1. 也行)。

怎么写:

1. 第一步
2. 第二步
3. 第三步

显示效果:

  1. 第一步
  2. 第二步
  3. 第三步

注意:列表项本身已经有编号/符号做区分了,不需要再加首行缩进。在 1. 后面塞全角空格或 &emsp; 反而会让排版变乱。


5. 引用块

行首用 >,用来把内容和正文区分开,常用于引用原话、放提示或备注。可以嵌套,也可以在里面放列表、代码。

怎么写:

> 这是一段引用。
>
> > 这是嵌套的第二层引用。

显示效果:

这是一段引用。

这是嵌套的第二层引用。


6. 链接

格式是 [显示文字](网址)。还可以在网址后加 "标题",鼠标悬停时显示。

怎么写:

普通链接:[Markdown 维基](https://zh.wikipedia.org/wiki/Markdown)

带悬停提示:[示例](https://example.com "这是悬停提示")

直接贴网址(自动识别):<https://example.com>

显示效果:

普通链接:Markdown 维基

带悬停提示:示例

直接贴网址(自动识别):https://example.com


7. 图片

格式跟链接几乎一样,只是前面多一个 !。方括号里是「图片加载失败时显示的替代文字」。

怎么写:

![一张占位图](https://via.placeholder.com/150 "可选的悬停标题")

显示效果:

一张占位图

想控制图片大小时,纯 Markdown 做不到,可以改用 HTML:<img src="图片地址" width="300">


8. 代码

行内代码

用一对反引号 ` 包住,适合在句子里提到变量名、命令等。反引号是键盘左上角、Esc 下面那个键(和 ~ 同一个键,不按 Shift)。

怎么写:

运行 `npm install` 来安装依赖。

显示效果:

运行 npm install 来安装依赖。

代码块

用三个反引号 ``` 把代码包起来,开头那行可以写语言名来获得语法高亮。

怎么写:

```python
def hello(name):
    print(f"你好, {name}")
```

显示效果:

def hello(name):
    print(f"你好, {name}")

9. 表格

| 分隔单元格,第二行用 --- 分隔表头和内容。在 --- 里加 : 可以控制对齐::--- 左对齐,:---: 居中,---: 右对齐。

怎么写:

| 商品 | 数量 | 单价 |
|:-----|:----:|-----:|
| 收纳包 | 2 | ¥39 |
| 手机支架 | 1 | ¥25 |

显示效果:

商品 数量 单价
收纳包 2 ¥39
手机支架 1 ¥25

源码里各列不必对齐得很整齐,渲染后会自动对齐;上面写整齐只是方便人看。


10. 分割线

单独一行写三个及以上的 -*_,渲染成一条横线,用来分隔大段内容。

怎么写:

上面的内容

---

下面的内容

显示效果:

上面的内容


下面的内容

重要的坑---上一行不能紧贴文字,否则上面那行文字会被当成标题(这叫 setext 语法),分割线就「消失」了。务必让 --- 上下都留空行


11. 首行缩进(中文排版)

Markdown 没有专门的首行缩进语法,而且行首直接敲 4 个空格会被当成代码块。如果确实需要中文「段首空两格」,有几种办法:

办法一:全角空格。中文输入法下在段首敲两个全角空格(比普通空格宽)。

办法二:HTML 实体 &emsp;。每个 &emsp; 是一个汉字宽,段首放两个,兼容性更好。

&emsp;&emsp;这是一段开头空了两格的文字。

显示效果:

  这是一段开头空了两格的文字。

办法三(自建博客最佳):CSS。如果你用 Hexo、Hugo、WordPress 等能改样式的平台,在 CSS 里加一行,所有段落自动缩进,正文一个字都不用改:

.post-content p {
    text-indent: 2em;
}

实用建议:网页博客其实不必强求首行缩进。网页靠段落间空行来区分段落,读者早已习惯,主流技术博客大多不做缩进,看着很清爽。只有要导出成 Word / PDF 时再考虑补缩进。


12. 常见坑与速查表

速查表

想要的效果 写法
标题 # 标题# 后空格)
加粗 **文字**
斜体 *文字*
删除线 ~~文字~~
行内代码 `代码`
链接 [文字](网址)
图片 ![替代文字](图片地址)
无序列表 - 项目- 后空格)
有序列表 1. 项目
引用 > 内容
分割线 单独一行 ---(上下留空行)

最容易踩的几个坑

  1. #- 后面忘了空格 → 标题/列表不生效。
  2. **文字** 写成了 ** 文字 **(符号和文字间有空格)→ 加粗失效。
  3. --- 紧贴上一行文字 → 上行变标题,分割线消失。务必上下留空行。
  4. 换行没空行 → 两段被拼成一段。想分段就空一行。
  5. 中文用了全角符号(如全角 、全角 )→ Markdown 不认,要用英文半角。

本文档本身就是用 Markdown 写的——你可以对照源码和渲染效果一起看,是最好的练习。