skip to content
Logo hxjx blog

Markdown 详细语法指南

/ 16 min read

技术

1. 标题 (Headings)

使用 # 号创建标题，支持一到六级。# 的数量代表标题的级别

语法：

# 一级标题

## 二级标题

### 三级标题

#### 四级标题

##### 五级标题

###### 六级标题

2. 段落和换行 (Paragraphs & Line Breaks) 

段落：一个或多个连续的文本行构成一个段落。段落之间需要一个或多个空行来分隔

强制换行：如果您想在段落内强制换行，可以在一行的末尾输入两个或更多的空格，然后按回车

3. 文字格式 (Text Formatting)

  • 粗体 (Bold): **文字** 或 __文字__

  • 斜体 (Italic): *文字* 或 _文字_

  • 粗斜体 (Bold & Italic): ***文字*** 或 ___文字___

  • 删除线 (Strikethrough): ~~文字~~

  • 下划线 (Underline): HTML 标签 <u>文字</u> (非标准 Markdown)

    语法：

    **这是粗体**

    *这是斜体*

    ***这是粗斜体***

    ~~这是删除线~~

    <u>这是下划线</u>

    示例：

    这是粗体

    这是斜体

    这是粗斜体

    这是删除线

    这是下划线

4. 列表 (Lists)

  • 无序列表 (Unordered List)

    使用 -, +, 或*标记，符号后需加一个空格。

    语法：

    -或* 项目一

    -或* 项目二

     -或* 嵌套项目一
    

     -或* 嵌套项目二

    效果：

    • 项目一

    • 项目二

      • 嵌套项目一
      • 嵌套项目二

  • 有序列表 (Ordered List)

    使用数字加英文句点.，然后空格接内容，数字顺序不影响最终显示。

    语法：

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

语法：

[链接显示的文字](链接地址 "可选的标题")

[访问我的博客](https://bg.363689.xyz "我的个人博客")

效果： 访问我的博客

6. 图片 (Images)

  • 语法与链接类似，但在最前面加一个感叹号 !

    语法：

    ![图片替代文字](图片地址 "可选的标题")

    示例：

    ![Logo](https://placehold.co/150x50/dbeafe/3b82f6?text=Logo)

  • HTML 标签插入图片（用于更多控制）

    当标准 Markdown 语法不足以满足需求时（例如，需要调整图片大小、浮动、添加边框等），可以回退到使用 HTML 的 标签。这提供了更多的控制，因为它允许你使用 HTML 属性和 CSS 样式。

    语法：

    <img src="图片URL" alt="alt text" title="可选的标题" width="宽度" height="高度" style="CSS样式">

    常用属性： src：必需。图片的 URL。 alt：必需。替代文本，与 Markdown 中的 alt text 相同。 title：可选的悬停文本，与 Markdown 中的 title 相同。 width：设置图片的宽度（可以为像素值 px 或百分比 %）。 height：设置图片的高度（可以为像素值 px 或百分比 %）。 style：通过 CSS 样式来控制图片，这是最强大的地方，可以设置边框、外边距、浮动、甚至一些高级效果。

    示例（调整大小）： 这张图片宽度为200像素

    <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" alt="风景图" width="200">

    效果：

    示例:

     <div style="text-align: center;">
     <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" alt="风景图" width="300" style="border: 2px solid blue; border-radius: 5px; margin: 10px;">
     <p style="font-size: 0.9em; color: gray;">这是带蓝色边框的居中图片。</p>
     </div>

    效果：

7. 引用 (Blockquotes)

引用(Blockquote)是一种常用于引述他人话语、文章段落或者突出显示某段文字的格式。它的语法非常简单。

  • 基本用法

    在要引用的文本段落前加上一个大于号 >

    语法：

    > 这里是一段引用的文字。它会自动被格式化，通常会以缩进或者左侧边框的形式显示。

    渲染效果：

    这里是一段引用的文字。它会自动被格式化，通常会以缩进或者左侧边框的形式显示。

  • 多段落引用 如果你想引用多个段落，可以在每个段落前都加上 >

    语法：

    > 这是第一个引用的段落。
    >
    > > 这是第二个引用的段落。在段落之间留一个空行，并在新段落前也加上 `>`。

    渲染效果：

    这是第一个引用的段落。

    这是第二个引用的段落。在段落之间留一个空行，并在新段落前也加上 >。

  • 懒加载模式

    对于一个连续的长段落，你也可以只在第一行前面加上 >，后面的行会自动被包含在引用中，直到遇到一个空行。

    > 这是一个很长的引用段落，为了方便书写，我只在第一行的开头加了大于号。
    接下来的几行文字，即使前面没有大于号，也会被视为同一次引用的一部分。
    直到这里为止。
    

    这一行就不在引用内了。

    渲染效果：

    这是一个很长的引用段落，为了方便书写，我只在第一行的开头加了大于号。 接下来的几行文字，即使前面没有大于号，也会被视为同一次引用的一部分。 直到这里为止。

    这一行就不在引用内了。

  • 嵌套引用

    引用可以嵌套使用，只需要增加 > 的数量即可。

    语法：

    > 这是第一层引用。
    >
    > > 这是嵌套的第二层引用。
    > >
    > > > 这是更深一层的第三层引用。
    > > >
    > 回到第一层引用。

    渲染效果：

    这是第一层引用。

    这是嵌套的第二层引用。

    这是更深一层的第三层引用。

    回到第一层引用。

  • 在引用中使用其他 Markdown 语法

    引用块内几乎可以包含所有其他的 Markdown 元素，比如标题、列表、粗体、代码块等。

    语法：

    > ### 这是一个在引用中的三级标题
    

    > 1. 这是引用中的一个 **有序列表** 项。
    > 2. 这是列表的第二项，包含一些 `行内代码`。
    > - 这是一个 *无序列表* 项。
    

    > ```python
    > # 这是一个代码块
    > print("Hello, Markdown!")
      ```

    渲染效果：

    这是一个在引用中的三级标题

    1. 这是引用中的一个 有序列表 项。

    2. 这是列表的第二项，包含一些行内代码。

    • 这是一个 无序列表 项。
    # 这是一个代码块
    print("Hello, Markdown!")

8. 代码 (Code)

行内代码 (Inline Code)

使用一对反引号` 包裹

语法： 这行代码是 let name = “Markdown”;

代码块 (Code Block)

使用三对反引号 包裹，并可以在第一组反引号后指定语言（如 javascript, python, bash）以实现语法高亮。

示例：

JavaScript 示例：




  ```javascript
  function sayHello() {




    console.log("Hello, world!");




  }
  ```

JavaScript 效果：

function sayHello() {


  console.log("Hello, world!");


}

示例：

```bash
# 列出当前目录的文件和文件夹


ls -la


# 输出一条消息到终端


echo "这是一个 Bash 脚本示例"


# 进入 'documents' 文件夹


cd documents
```

Bash/Shell 效果：

Terminal window
# 列出当前目录的文件和文件夹


ls -la


# 输出一条消息到终端


echo "这是一个 Bash 脚本示例"


# 进入 'documents' 文件夹


cd documents/

9. 表格 (Tables)

基本语法

Markdown 表格使用管道符 | 来定义单元格和列，使用连字符 - 来分隔表头和表格主体。

基本结构：

| 表头 1 | 表头 2 | 表头 3 |
|---|---|---|
| 内容 1 | 内容 2 | 内容 3 |
| 内容 4 | 内容 5 | 内容 6 |

渲染效果：

表头 1表头 2表头 3
内容 1内容 2内容 3
内容 4内容 5内容 6

关键点：

第一行是表头，第二行是分隔符行，用于将表头和表格内容分开。

第三行及以后是表格的每一行数据。

每一行都由管道符 | 分隔单元格。

最外侧的管道符 | 是可选的，但为了美观和清晰，建议加上。

分隔符行中的连字符 - 数量至少需要一个，但为了对齐美观，可以增加多个。

对齐方式

您可以在分隔符行中使用冒号 : 来控制列的对齐方式。

:--- 或 ---左对齐（默认）

:—: 居中对齐

---: 右对齐

示例：

| 左对齐 | 居中 | 右对齐 |
| :--- | :--: | ---: |
| 文本 | 文本 | 文本 |
| 更多内容 | 更多内容 | 更多内容 |

渲染效果：

左对齐居中右对齐
文本文本文本
更多内容更多内容更多内容

在单元格内使用其他 Markdown 语法 表格的单元格内可以包含几乎所有的行内 Markdown 格式，例如链接、粗体、斜体、删除线、代码等。

示例：

| 格式 | 示例 | 描述 |
|---|---|---|
| **粗体** | `**Bold Text**` | 使文本加粗。 |
| *斜体* | `*Italic Text*` | 使文本倾斜。 |
| `代码` | `` `code()` `` | 用于显示简短的代码片段。 |
| [链接](https://www.google.com) | `[链接](https://www.google.com)` | 创建一个超链接。 |
| ~~删除线~~ | `~~Strikethrough~~` | 给文本添加删除线。 |
| 换行 | 使用 `<br>` 标签 | 可以在单元格内强制换行。 |

渲染效果：

格式示例描述
粗体Bold Text使文本加粗。
斜体Italic Text使文本倾斜。
代码code()用于显示简短的代码片段。
链接链接创建一个超链接。
删除线Strikethrough给文本添加删除线。
换行使用 <br> 标签可以在单元格内强制换行。

包含管道符 | 如果你的单元格内容本身就包含管道符 |，你需要使用它的 HTML 实体编码 &#124; 来代替。

示例：

| 名称 | 描述 |
|---|---|
| 管道符 | 这是 &#124; 字符的示例。 |

渲染效果：

名称描述
管道符这是| 字符的示例。

  1. 分割线 (Horizontal Rule)

    在一行中使用三个或更多的 *, -, 或 _

    语法：

    ---

    ***

    ___

  2. 字体颜色

    需要明确一点：纯粹的、标准的 Markdown 语法本身并不支持设置字体颜色。 Markdown 的设计初衷是为了简化内容创作，专注于文本的结构（如标题、列表、粗体），而不是外观样式（如颜色、字体大小）。不过，由于大多数 Markdown 解析器都兼容 HTML，我们可以通过内联 HTML 的方式来给文本添加颜色。最常用的方法是使用 标签配合 style 属性，或者使用已经不被推荐但仍然有效的 标签。

  • 使用 标签（推荐） 这是最现代、最灵活的方法，符合当前的网页标准 (CSS)。

    语法：

    <span style="color:颜色名或十六进制代码">你的文本</span>

    示例：

    我想把这段文字设置成

    <span style="color:red">红色</span>

  • 也可以使用十六进制颜色代码，比如

    <span style="color:#008000">绿色</span>

    或者设置为

    <span style="color:rgb(0, 0, 255)">蓝色</span>

  • 使用 <font> 标签（不推荐）

    <font> 标签在旧的 HTML 标准 (HTML4) 中使用，现在已经被废弃，不推荐在新的项目中使用。但因为简单直观，在很多 Markdown 环境中仍然有效。

    语法：

    <font color="颜色名或十六进制代码">你的文本</font>

  1. 任务列表（Task List）

语法:

任务列表的语法是在标准的无序列表项（使用 -, *, 或 +）后面加上一个方括号 []。

[ ]：表示一个未完成的任务。注意：[ 和 ] 之间必须有一个空格。

[x]：表示一个已完成的任务。注意：x 可以是小写也可以是大写，但小写更常见。

基本结构：

- [x] 完成报告的第一部分
- [ ] 撰写邮件通知团队
- [ ] 安排下周的会议

渲染效果：

  • 完成报告的第一部分
  • 撰写邮件通知团队
  • 安排下周的会议

如何使用

  • 创建列表：

    就像创建普通的无序列表一样，以 -, *, 或 + 开头。

  • 添加复选框：

    在列表项的文本前，加上 [ ] (未完成) 或 [x] (已完成)。

示例：

#### 项目A的待办事项


- [x] 需求分析和文档编写
- [x] UI/UX 设计初稿
- [ ] 前端开发
    - [x] 搭建项目框架
    - [ ] 实现登录页面
    - [ ] 对接用户数据API
- [ ] 后端开发
    - [ ] 数据库设计
    - [ ] 编写用户认证接口
- [ ] 测试和部署


#### 购物清单


* [ ] 牛奶
* [x] 面包
* [ ] 鸡蛋

渲染效果：

项目A的待办事项

  • 需求分析和文档编写

  • UI/UX 设计初稿

  • 前端开发

    • 搭建项目框架
    • 实现登录页面
    • 对接用户数据API

  • 后端开发

    • 数据库设计
    • 编写用户认证接口

  • 测试和部署

购物清单

  • 牛奶
  • 面包
  • 鸡蛋

交互性 一个重要的特性是，在许多支持任务列表的 Markdown 渲染器（如 GitHub 的评论区、Typora 编辑器）中，这些复选框是可以点击的。当你点击一个复选框时，它会自动在 [ ] 和 [x] 之间切换，并保存更改。

总结 任务列表是 Markdown 一个非常实用和直观的扩展功能，它结合了列表的结构化和任务管理的功能性。记住核心语法 - [ ] 和 - [x] 就可以了。