Markdown 渲染完整测试

本文档包含几乎所有常见的 Markdown 语法，用于测试渲染效果。

1. 标题（Headings）

一级标题 H1

二级标题 H2

三级标题 H3

四级标题 H4

五级标题 H5

六级标题 H6

2. 段落与换行

这是第一个段落。Markdown 中连续的文字会被合并为同一段落。

这是第二个段落，与上方用空行分隔。

这一行后面有两个空格
所以这一行会换行显示（soft break）。

3. 文本样式

4. 引用（Blockquotes）

这是一段引用文字。 可以跨多行。

嵌套引用：

这是嵌套的引用。

三层嵌套引用。

引用中可以使用其他语法

• 列表项 1
• 列表项 2

print("引用中的代码块")

5. 列表

无序列表

• 项目 1
• 项目 2
  • 嵌套项目 2.1
  • 嵌套项目 2.2
    • 深层嵌套 2.2.1
• 项目 3

• 也可以用星号

• 也可以用加号

有序列表

1. 第一项
2. 第二项
   1. 嵌套有序 2.1
   2. 嵌套有序 2.2
3. 第三项

任务列表（Task List）

• 已完成任务
• 另一个已完成的任务
• 未完成任务
• 还有一个未完成的任务

定义列表（Definition List）

术语 1 : 这是术语 1 的定义。

术语 2 : 这是术语 2 的第一个定义。 : 这是术语 2 的第二个定义。

6. 代码

行内代码

使用 console.log("Hello") 来输出信息。用反引号包裹 `code` 即可。

代码块（带语法高亮）

JavaScript:

function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}
 
const result = fibonacci(10);
console.log(`Fibonacci(10) = ${result}`);

Python:

def quicksort(arr):
    if len(arr) <= 1:
        return arr
    pivot = arr[len(arr) // 2]
    left = [x for x in arr if x < pivot]
    middle = [x for x in arr if x == pivot]
    right = [x for x in arr if x > pivot]
    return quicksort(left) + middle + quicksort(right)
 
print(quicksort([3, 6, 8, 10, 1, 2, 1]))

TypeScript / React (JSX):

interface Props {
  name: string;
  count?: number;
}
 
const Greeting: React.FC<Props> = ({ name, count = 0 }) => {
  return (
    <div className="greeting">
      <h1>Hello, {name}!</h1>
      <p>You have visited {count} times.</p>
    </div>
  );
};

CSS:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
  padding: 2rem;
}
 
@media (prefers-color-scheme: dark) {
  .container {
    background-color: #1a1a2e;
    color: #eaeaea;
  }
}

Bash / Shell:

#!/bin/bash
for file in *.md; do
  echo "Processing: $file"
  wc -w "$file"
done

JSON:

{
  "name": "notes-factory",
  "version": "1.0.0",
  "dependencies": {
    "next": "^14.0.0",
    "react": "^18.2.0"
  }
}

SQL:

SELECT u.name, COUNT(p.id) AS post_count
FROM users u
LEFT JOIN posts p ON u.id = p.author_id
WHERE u.created_at > '2025-01-01'
GROUP BY u.name
HAVING COUNT(p.id) > 5
ORDER BY post_count DESC;

YAML:

services:
  web:
    build: .
    ports:
      - "3000:3000"
    environment:
      - NODE_ENV=production
    depends_on:
      - db
  db:
    image: postgres:16
    volumes:
      - pgdata:/var/lib/postgresql/data

Diff:

- const oldValue = "hello";
+ const newValue = "world";
 
  function unchanged() {
-   return false;
+   return true;
  }

7. 链接

基本链接

普通链接

带标题的链接

自动链接

https://www.example.com

user@example.com

引用链接

这是 引用链接 的示例，也可以用 文字作为引用。

8. 图片

基本图片

带链接的图片

9. 表格

基本表格

复杂表格

宽表格（测试水平滚动）

10. 分隔线

以下三种写法都会产生分隔线：

11. HTML 内联元素

这是折叠内容，可以包含：

• 列表
• 粗体
• 代码

console.log("折叠区域中的代码块");

Ctrl + C 复制

高亮文本（使用 HTML mark 标签）

HTML 是一种标记语言。

下标文本 和 上标文本

12. 数学公式（LaTeX）

行内公式

质能方程 ( E = mc^2 )，其中 ( c ) 为光速。

块级公式

[ \int_{-\infty}^{\infty} e^{-x^2} , dx = \sqrt{\pi} ]

[ f(x) = \sum_{n=0}^{\infty} \frac{f^{(n)}(a)}{n!}(x-a)^n ]

[ \begin{bmatrix} a & b \ c & d \end{bmatrix} \begin{bmatrix} x \ y \end{bmatrix}

\begin{bmatrix} ax + by \ cx + dy \end{bmatrix} ]

13. 脚注（Footnotes）

这是一段包含脚注的文字¹。还可以使用命名脚注²。

14. Emoji

如果渲染器支持，可以使用 emoji 简写：

:smile: :heart: :thumbsup: :rocket: :warning: :bulb:

也可以直接使用 Unicode emoji：🎉 🚀 ✅ ❌ ⚠️ 💡 📝 🔥

15. 目录自动生成测试（TOC）

如果渲染器支持 [TOC]：

[TOC]

16. 转义字符

以下特殊字符需要反斜杠转义：

* 星号
# 井号
- 短横线
> 大于号
[ 方括号
` 反引号
\ 反斜杠
| 竖线

17. 混合嵌套测试

列表中嵌套多种元素

1. 第一项 - 带有粗体

   这是第一项下的一个段落，包含 行内代码 和 链接。

   还可以在列表中加入引用

2. 第二项 - 包含代码块

   def hello():
       return "Hello from a nested code block!"

3. 第三项 - 包含图片和表格

   A	B
   1	2

4. 第四项 - 包含任务列表

   • 子任务 1
   • 子任务 2

18. 长文本段落测试

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula ut dictum pharetra, nisi nunc fringilla magna, in commodo elit erat nec turpis. Ut pharetra augue nec augue.

19. 特殊字符与 Unicode

• 中文：你好世界
• 日文：こんにちは世界
• 韩文：안녕하세요 세계
• 阿拉伯文：مرحبا بالعالم
• 俄文：Привет мир
• 符号：© ® ™ § ¶ † ‡ ° ± ÷ × → ← ↑ ↓ ↔ ∞ ≈ ≠ ≤ ≥

20. Mermaid 图表（如果支持）

graph TD
    A[开始] --> B{条件判断}
    B -->|是| C[执行操作 A]
    B -->|否| D[执行操作 B]
    C --> E[结束]
    D --> E

sequenceDiagram
    participant U as 用户
    participant S as 服务器
    participant D as 数据库
    U->>S: 发送请求
    S->>D: 查询数据
    D-->>S: 返回结果
    S-->>U: 响应数据

pie title 编程语言使用占比
    "JavaScript" : 35
    "Python" : 25
    "TypeScript" : 20
    "Go" : 10
    "其他" : 10

文档结束 — 如果以上所有内容都正确渲染，说明你的 Markdown 渲染器功能相当完善！ 🎉