title: "复杂 Markdown 示例文档"
author: "ChatGPT"
date: "2026-07-07"
tags:

• Markdown
• 示例
• 文档测试

复杂 Markdown 示例文档

这是一段用于测试 Markdown 渲染能力的复杂示例，覆盖标题、列表、表格、代码块、引用、任务列表、脚注、数学公式、HTML、Mermaid 图表等内容。

目录

• 一、基础文本格式
• 二、列表
• 三、引用块
• 四、表格
• 五、代码块
• 六、任务列表
• 七、链接与图片
• 八、脚注
• 九、数学公式
• 十、折叠内容
• 十一、Mermaid 图表
• 十二、HTML 混排

一、基础文本格式

这是普通文本。

这是 加粗文本，这是 斜体文本，这是 加粗斜体文本。

这是 删除线文本。

这是 行内代码。

这是一个高亮概念：==某些 Markdown 渲染器支持高亮==。

这是一个上标示例：x^2^
这是一个下标示例：H~2~O

二、列表

无序列表

• 前端

  • HTML
  • CSS

  • JavaScript

    • React
    • Vue
    • Svelte

• 后端

  • Node.js
  • PHP
  • Python

• 数据库

  • MySQL
  • PostgreSQL
  • SQLite

有序列表

1. 安装依赖
2. 编写代码
3. 运行测试
4. 构建项目
5. 部署上线

混合列表

1. 项目初始化

   • 创建目录
   • 初始化 Git
   • 配置 .gitignore

2. 开发阶段

   • 编写页面
   • 接入接口
   • 处理异常

3. 发布阶段

   • 构建产物
   • 上传服务器
   • 检查日志

三、引用块

这是一级引用。

这是二级引用。

这是三级引用。

提示： Markdown 的引用块常用于说明、注释、摘录和强调内容。

四、表格

对齐示例

五、代码块

JavaScript 示例

function greet(name) {
  if (!name) {
    throw new Error("name is required");
  }

  return `Hello, ${name}!`;
}

console.log(greet("Markdown"));

HTML 示例

<div class="card">
  <h2>标题</h2>
  <p>这是一张卡片。</p>
  <button>点击我</button>
</div>

CSS 示例

.card {
  padding: 24px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

Bash 示例

pnpm install
pnpm build
pnpm preview

六、任务列表

• [X] 完成 Markdown 基础结构
• [X] 添加表格
• [X] 添加代码块
• [ ] 添加真实项目说明
• [ ] 接入自动化测试
• [ ] 编写部署文档

七、链接与图片

这是一个链接：

访问 OpenAI

这是一个带标题的链接：

Markdown Guide

这是一个图片示例：

图片也可以作为链接：

八、脚注

Markdown 支持脚注，用于补充说明某些内容。¹

这是另一个脚注示例。²

九、数学公式

行内公式

质能方程：$E = mc^2$

块级公式

$$ a^2 + b^2 = c^2 $$

$$ \sum_{i=1}^{n} i = \frac{n(n+1)}{2} $$

$$ f(x) = \int_{-\infty}^{\infty} e^{-x^2} dx $$

十、折叠内容

{
  "name": "markdown-demo",
  "version": "1.0.0",
  "private": true
}

十一、Mermaid 图表

流程图

flowchart TD
    A[开始] --> B{是否安装依赖?}
    B -- 是 --> C[运行项目]
    B -- 否 --> D[执行 pnpm install]
    D --> C
    C --> E[构建项目]
    E --> F[部署上线]

时序图

sequenceDiagram
    participant User as 用户
    participant Frontend as 前端
    participant Server as 服务端
    participant DB as 数据库

    User->>Frontend: 点击登录
    Frontend->>Server: 提交账号密码
    Server->>DB: 查询用户
    DB-->>Server: 返回用户数据
    Server-->>Frontend: 返回 Token
    Frontend-->>User: 登录成功

十二、HTML 混排

十三、特殊字符转义

如果想显示 Markdown 符号本身，可以使用反斜杠转义：

*这不会变成斜体*

\# 这不会变成标题

\`这不会变成行内代码\`

十四、定义列表

术语一
: 这是术语一的解释。

术语二
: 这是术语二的解释。

Markdown
: 一种轻量级标记语言。

十五、复杂嵌套示例

嵌套标题

• 引用里的列表
• 第二项

console.log("引用块里的代码");

字段	说明
name	名称
value	值

结尾

这份文档可以用来测试 Markdown 渲染器是否支持：

• 基础语法
• GFM 扩展
• Mermaid
• LaTeX 数学公式
• HTML 混排
• 脚注
• 折叠内容
• 任务列表

文档结束。