SGBH6AXS / notes张帅的个人博客

MD测试文章

This post is only available in Chinese for now.

Markdown 编辑器综合测试文件

这是一个用于测试 Markdown 编辑器渲染能力的综合示例文件。
你可以用它检查标题、段落、强调、列表、代码块、表格、链接、图片、脚注、公式、HTML 混排等功能是否正常。

1. 基础段落

这是一段普通文本。Markdown 的核心目标是让源文本本身也保持较好的可读性，同时可以被编辑器渲染为结构化文档。

这是第二个段落。
这一行末尾使用了两个空格，因此下一行应该发生软换行或强制换行，具体行为取决于编辑器实现。

这一段包含中文、English、数字 1234567890，以及常见符号：

! @ # $ % ^ & * ( ) _ + - = [ ] { } \ | ; : ' " , . < > / ?

2. 标题层级测试

一级标题 H1

二级标题 H2

三级标题 H3

四级标题 H4

五级标题 H5
六级标题 H6

3. 文本样式

普通文字。

这是粗体文字。

这也是粗体文字。

这是斜体文字。

这也是斜体文字。

这是粗斜体文字。

这是删除线文字。

这是行内代码。

这是一个包含 const answer = 42; 的句子。

下面测试混合效果：

粗体中包含 inline code。

斜体中包含 粗体。

删除线里也可以有 粗体。

4. 转义字符

下面这些字符通过反斜杠进行转义：

*不会变成斜体*

# 不会变成标题

- 不会变成列表

> 不会变成引用

`不会变成代码`

5. 无序列表

  • 苹果
  • 香蕉
  • 橙子
  • 葡萄

另一种写法：

  • 第一项
  • 第二项
  • 第三项

再一种写法：

  • Alpha
  • Beta
  • Gamma

嵌套列表

  • 一级项目 A
    • 二级项目 A.1
    • 二级项目 A.2
      • 三级项目 A.2.1
      • 三级项目 A.2.2
  • 一级项目 B
    • 二级项目 B.1

6. 有序列表

  1. 第一步：打开编辑器
  2. 第二步：粘贴 Markdown
  3. 第三步：检查渲染效果
  4. 第四步：检查源码模式
  5. 第五步：保存文件

嵌套有序列表

  1. 第一章
    1. 第一节
    2. 第二节
      1. 小节 A
      2. 小节 B
  2. 第二章
  3. 第三章

7. 任务列表

  • Markdown 文件可以打开
  • 标题能够正确渲染
  • 检查代码高亮
  • 检查数学公式
  • 检查脚注
  • 检查 Mermaid
  • 检查 HTML 混排

8. 引用块

这是一级引用。

引用块可以包含多个段落。

也可以包含粗体、斜体和 代码。

嵌套引用：

第一层引用

第二层引用

第三层引用

引用中包含列表：

编辑器需要检查：

  • 字体
  • 缩进
  • 行距
  • 边框
  • 背景色

9. 分割线

下面分别使用三种常见写法。

10. 行内代码

例如：

npm install

pnpm install

docker compose up -d

git status

SELECT * FROM users WHERE id = 1;

11. 多行代码块

JavaScript

function hello(name) {
  console.log(`Hello, ${name}!`);
}

hello("Markdown");

TypeScript

interface User {
  id: number;
  name: string;
  email?: string;
}

const user: User = {
  id: 1,
  name: "Alex",
};

console.log(user);

Python

def fibonacci(n: int) -> list[int]:
    result = [0, 1]

    while len(result) < n:
        result.append(result[-1] + result[-2])

    return result[:n]

print(fibonacci(10))

C++

#include <iostream>
#include <vector>

int main() {
    std::vector<int> nums = {1, 2, 3, 4, 5};

    for (const auto& n : nums) {
        std::cout << n << ' ';
    }

    std::cout << std::endl;
    return 0;
}

Bash

#!/usr/bin/env bash

set -euo pipefail

echo "System information:"
uname -a

echo "Disk usage:"
df -h

echo "Current directory:"
pwd

JSON

{
  "name": "markdown-test",
  "version": "1.0.0",
  "private": true,
  "features": {
    "tables": true,
    "math": true,
    "mermaid": true
  }
}

YAML

services:
  web:
    image: nginx:latest
    ports:
      - "8080:80"
    restart: unless-stopped

  database:
    image: postgres:17
    environment:
      POSTGRES_DB: demo
      POSTGRES_USER: demo
      POSTGRES_PASSWORD: example

SQL

CREATE TABLE users (
    id BIGSERIAL PRIMARY KEY,
    username TEXT NOT NULL UNIQUE,
    email TEXT NOT NULL UNIQUE,
    created_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
);

SELECT
    id,
    username,
    email
FROM users
ORDER BY created_at DESC
LIMIT 20;

HTML

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>Markdown Test</title>
</head>
<body>
  <h1>Hello Markdown</h1>
</body>
</html>

CSS

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  line-height: 1.6;
}

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 24px;
}

12. 表格

基础表格

名称 类型 状态
Web Frontend Running
API Backend Running
PostgreSQL Database Running
Redis Cache Optional

对齐测试

左对齐 居中 右对齐
Apple 100 ¥9.90
Banana 20 ¥12.00
Orange 300 ¥7.50

表格中的 Markdown

功能 示例 结果
粗体 **text** text
斜体 *text* text
删除线 ~~text~~ text
行内代码 `code` code

13. 链接

这是一个普通链接：

OpenAI

这是一个带标题的链接：

GitHub

自动链接：

https://example.com

邮箱自动链接：

example@example.com

引用式链接：

Markdown Guide

14. 图片

远程图片示例：

Markdown Logo Test

带标题：

Placeholder

如果编辑器禁止加载远程图片，这里可能只显示 alt 文本。

15. 脚注

这是一个带脚注的句子。1

这里还有另一个脚注。2

16. 数学公式

注意：数学公式属于 Markdown 扩展功能，通常依赖 KaTeX 或 MathJax。

行内公式：

E = mc^2

勾股定理：

a^2 + b^2 = c^2

积分：

\int_0^1 x^2\,dx = \frac{1}{3}

块级公式：

f(x) = \frac{1}{\sqrt{2\pi}\sigma} \exp\left( -\frac{(x-\mu)^2}{2\sigma^2} \right)

矩阵：

A = \begin{bmatrix} 1 & 2 & 3 \\ 4 & 5 & 6 \\ 7 & 8 & 9 \end{bmatrix}

求和：

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

17. Mermaid 测试

Mermaid 也是扩展功能，如果编辑器支持，下面应该渲染为流程图。

flowchart TD
    A[打开 Markdown 文件] --> B{编辑器支持 Mermaid?}
    B -->|Yes| C[显示流程图]
    B -->|No| D[显示代码块]
    C --> E[测试完成]
    D --> E

时序图：

sequenceDiagram
    participant User
    participant Editor
    participant Renderer

    User->>Editor: 打开 test.md
    Editor->>Renderer: 解析 Markdown
    Renderer-->>Editor: 返回 HTML
    Editor-->>User: 显示渲染结果

18. HTML 混排

下面是一段原生 HTML：

这里是 <details> 标签内部的内容。

  • 项目 A
  • 项目 B
  • 项目 C

19. 键盘按键与技术文本

部分编辑器允许 HTML 标签：

按下 Ctrl + S 保存文件。

按下 Ctrl + Shift + P 打开命令面板。

变量示例：

PATH=/usr/local/bin:/usr/bin:/bin

IPv4：

192.168.1.1/24

IPv6：

2001:db8::1/64

URL：

https://example.com/api/v1/users?id=123&sort=desc

20. 长文本测试

Markdown 编辑器除了需要正确解析语法，还需要在较长文档中保持滚动、定位、语法高亮和预览同步。为了检查这些行为，可以使用连续的自然语言段落来观察编辑器在大量文本情况下是否出现卡顿、错位、字体异常、行距异常或滚动同步失效等问题。

软件系统通常由多个层次组成。例如，一个现代 Web 应用可能包含浏览器端前端、反向代理、应用服务器、缓存系统、数据库以及对象存储。用户在浏览器中发送请求后，请求首先可能到达 CDN 或反向代理，再根据路径被转发到相应服务。后端应用读取数据库或缓存中的数据，完成业务逻辑处理后生成响应，然后沿着相反方向返回客户端。

如果系统采用容器化部署，各个服务通常运行在独立容器中，并通过虚拟网络连接。容器编排工具可以负责服务启动顺序、环境变量注入、健康检查和存储卷挂载。对于规模较小的个人项目，Docker Compose 往往已经足够；当服务数量、节点数量和调度需求增加后，才可能需要更复杂的编排系统。

日志系统也是基础设施中容易被忽视的一部分。仅仅记录日志并不意味着具备可观测性。一个比较完整的可观测性体系通常涉及日志、指标和链路追踪三类数据。日志用于记录离散事件，指标用于观察随时间变化的数据，而链路追踪可以帮助开发者分析一个请求跨越多个服务时经历了哪些步骤。

数据库设计同样需要考虑数据一致性、索引和事务。索引可以提高查询速度，但会增加写入成本和存储开销。事务则用于保证一组操作满足原子性、一致性、隔离性和持久性。实际开发中，不应该为了追求所谓“高性能”而盲目增加索引，也不应该把所有数据都塞入单个超大的表中。

网络层面，一个典型 HTTPS 请求可能经历 DNS 解析、TCP 或 QUIC 建连、TLS 握手、HTTP 请求发送和响应接收。使用 HTTP/2 时，多路复用可以让多个请求共享同一个 TCP 连接；HTTP/3 则基于 QUIC，在传输层机制上进一步发生变化。不同协议并不存在简单的“新的一定在所有情况下都更快”的关系，实际结果受到 RTT、丢包率、服务器实现、客户端实现和网络路径等因素影响。

Git 则负责代码版本管理。开发者通常基于主分支创建功能分支，在完成修改后提交 commit，再通过 Pull Request 或 Merge Request 进行代码审查。CI 系统会在推送或合并请求发生时自动运行测试、构建和静态检查。通过这些机制，可以减少未经验证的代码进入主分支的概率。

21. 特殊字符与 Unicode

中文：

你好，世界。

English:

Hello, world.

日本語：

こんにちは、世界。

한국어:

안녕하세요, 세계.

Español:

¡Hola, mundo!

Emoji：

😀 😃 😄 😁 🤔 🧠 💻 🖥️ 🛰️ 📡 🚀 🌍 🌌 🔧 ⚙️ ✅ ❌

数学符号：

∞ ∑ ∏ √ ≈ ≠ ≤ ≥ ± × ÷ ∂ ∇ ∈ ∉ ⊂ ⊆ ∪ ∩

希腊字母：

α β γ δ ε ζ η θ λ μ π σ φ ψ ω

箭头：

← → ↑ ↓ ↔ ⇒ ⇐ ⇔

22. 超长行测试

下面故意放一行比较长的文本，用于检查编辑器是否自动换行、是否出现横向滚动条，以及源代码模式和预览模式的表现是否一致：Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. This is a deliberately long line designed to test word wrapping behavior inside a Markdown editor, including how the editor handles Chinese 中文字符、English words、numbers 1234567890、URLs https://example.com/some/really/long/path/to/a/resource?foo=bar&hello=world 以及各种符号。

23. 嵌套结构测试

引用中的标题

这里是引用内部的普通段落。

  1. 引用中的列表
  2. 第二个项目
引用中的代码块
line 1
line 2
line 3
A B
1 2
3 4

24. 代码中的 Markdown 字符

# 这里不应该变成标题

**这里不应该变成粗体**

- 这里不应该变成列表

> 这里不应该变成引用

[这里不应该变成链接](https://example.com)

`这里的反引号应该作为普通字符显示`

25. Front Matter 测试

部分静态站点生成器会识别文件顶部的 YAML Front Matter。由于本测试文件本身已经从标题开始，因此这里只作为代码演示：

---
title: "Markdown Test"
author: "Example"
date: 2026-09-28
tags:
  - markdown
  - editor
  - test
draft: false
---

26. 定义列表测试

部分 Markdown 实现支持定义列表：

Term 1
Definition 1
Term 2
Definition 2

27. 高亮扩展测试

部分编辑器支持：

这是高亮文字

如果不支持，它会直接显示两个等号。

28. 上标与下标扩展

不同实现语法不同，例如：

H2O

X2

如果编辑器不支持扩展语法，会显示原始字符。

29. 自动目录测试

部分编辑器支持：

或者：

如果不支持，则会显示原始文本。

30. 复杂表格内容

ID 服务 地址 端口 协议 状态
1 Web 127.0.0.1 3000 HTTP ✅
2 API 127.0.0.1 8787 HTTP ✅
3 PostgreSQL 10.0.0.10 5432 TCP ✅
4 Redis 10.0.0.11 6379 TCP ⚠️
5 Object Storage 10.0.0.12 9000 HTTP ✅

31. 命令输出测试

$ git status
On branch main
Your branch is up to date with 'origin/main'.

nothing to commit, working tree clean

Filesystem      Size  Used Avail Use% Mounted on
/dev/vda1       154G   32G  115G  22% /
tmpfs           7.8G     0  7.8G   0% /dev/shm

32. diff 高亮测试

- const port = 3000;
+ const port = 8787;

- console.log("old");
+ console.log("new");

33. 文件树测试

project/
├── apps/
│   ├── api/
│   │   ├── src/
│   │   └── package.json
│   └── web/
│       ├── src/
│       └── package.json
├── packages/
│   ├── core/
│   └── shared/
├── docker-compose.yml
├── package.json
├── pnpm-workspace.yaml
└── README.md

34. HTTP 请求示例

GET /api/v1/users HTTP/1.1
Host: example.com
Accept: application/json
Authorization: Bearer example-token

响应：

{
  "ok": true,
  "data": [
    {
      "id": 1,
      "name": "Alex"
    }
  ]
}

35. 最终检查区

你可以检查以下项目：

  • H1-H6 标题字号是否正常
  • 中文字体是否正常
  • 粗体 / 斜体 / 删除线是否正常
  • 行内代码是否有独立样式
  • 代码块是否支持语法高亮
  • 表格是否正确对齐
  • 引用块是否显示边框或背景
  • 图片是否能够加载
  • 链接是否可点击
  • 脚注是否可以跳转
  • 数学公式是否渲染
  • Mermaid 是否渲染
  • HTML 是否被允许
  • Emoji 和 Unicode 是否显示正常
  • 长行是否正确换行
  • 大文档滚动是否流畅
  • 源码和预览滚动是否同步
  • 深色模式下代码和表格是否清晰

测试结束

如果你能看到这一行，说明至少整个文件已经成功读取到末尾。

End of Markdown Test File.

  1. 这是第一个脚注的内容。 ↩︎

  2. 不同 Markdown 实现对脚注支持情况不同，例如 CommonMark 本身并未定义脚注，但很多编辑器会扩展支持。 ↩︎

Comments

No comments yet — be the first.

Comments are moderated. Plain text only.