---
title: "Markdown 渲染能力测试"
date: 2026-03-13
description: "覆盖 Markdown / GFM / 安全 HTML 子集的测试页面，用于验证弹窗渲染效果。"
thumbnail: "/images/activity/obs-repair.svg"
thumbnailAlt: "Markdown 测试"
tags:
  - green:Markdown
  - red:测试
  - yellow:文档
  - blue:网络
  - purple:设计
  - '#38bdf8:自定义蓝'
  - unknown:非法颜色
  - 普通标签
draft: false
aiSummary: "这条动态记录了主力年份 + 当前日期的测试动态，用于验证弹窗对 Markdown、GFM 和安全 HTML 子集的渲染能力。"
aiSummaryModel: "deepseek-v4-flash-free"
---
这是**主力年份 + 当前日期**的测试动态，用来验证 `/activity/` 弹窗对 Markdown、GFM 和安全 HTML 子集的渲染能力。

这段长文本用于测试普通段落的阅读节奏：一篇技术笔记里常常会混合普通文字、`inline code`、[站内链接](/activity/) 和 [外部链接](https://astro.build)。如果行高、段距和链接样式都合适，读起来应该稳定、清楚，并且不会像默认浏览器样式那样拥挤。

---

![/images/activity/obs-repair.svg](/images/activity/obs-repair.svg)

## 标题层级

# 一级标题：弹窗里也应该可控

## 二级标题：章节分隔

### 三级标题：小节说明

#### 四级标题：补充信息

---

## 文本样式

- **粗体文本** Bold
- *斜体文本* Italic
- ***粗斜体*** Bold Italic
- ~~删除线~~ Strikethrough
- `行内代码` Inline Code
- 上标：E = mc<sup>2</sup>
- 下标：H<sub>2</sub>O
- 键盘：<kbd>Ctrl</kbd> + <kbd>K</kbd>，或 <kbd>⌘</kbd> + <kbd>Enter</kbd>

脚注测试：这句话后面有一个脚注引用。[^note]

[^note]: 这里是脚注内容，用于验证 GFM footnote 的输出结构和样式。

---

## 列表

### 无序列表

- 第一项：普通项目
- 第二项：有嵌套内容
  - 嵌套子项 A
  - 嵌套子项 B
    - 更深一层，用于观察缩进是否过大
- 第三项：最后一个项目

### 有序列表

1. 准备测试内容
2. 打开 Activity 弹窗
   1. 检查滚动区域
   2. 检查弹窗关闭按钮
   3. 检查 Markdown 样式
3. 记录问题并继续调整

### 任务列表

- [x] 粗体、斜体、删除线
- [x] 表格和任务列表
- [x] 安全 HTML：`sup`、`sub`、`kbd`、`details`
- [ ] 未来如果需要再接入代码高亮
- [ ] 未来如果需要再接入数学公式

---

## 引用

> 这是一段引用文字。Markdown 的引用可以包含**其他格式**，比如 `inline code` 和 [链接](https://example.com)。
>
> —— 测试用引用来源

> 嵌套引用第一层
>> 第二层引用：用于测试层级缩进
>>> 第三层引用：不应该把布局撑坏

---

## 代码块

```typescript
interface MarkdownTest {
  heading: boolean;
  code: boolean;
  table: boolean;
  safeHtml: boolean;
}

function renderAll(): MarkdownTest {
  return {
    heading: true,
    code: true,
    table: true,
    safeHtml: true,
  };
}
```

```python
def fibonacci(n: int) -> list[int]:
    a, b = 0, 1
    result = []
    for _ in range(n):
        result.append(a)
        a, b = b, a + b
    return result
```

```bash
cat /var/log/nginx/access.log \
  | grep " 404 " \
  | awk '{print $1}' \
  | sort | uniq -c | sort -rn \
  | head -20
```

```text
这是一个超长单行代码块测试：aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
```

---

## 表格

| 特性 | 支持情况 | 备注 |
|------|:------:|------|
| 标题 | ✅ | h1-h4 都应被弹窗样式约束 |
| 粗体 | ✅ | `**text**` |
| 斜体 | ✅ | `*text*` |
| 删除线 | ✅ | GFM |
| 代码块 | ✅ | 保留语言 class，样式不撑破弹窗 |
| 表格 | ✅ | 小屏横向滚动 |
| 任务列表 | ✅ | checkbox 对齐 |
| 安全 HTML | ✅ | `sup/sub/kbd/details` |
| 数学公式 | 暂不支持 | 后续可加 KaTeX/remark-math |

### 长表格横向滚动测试

| 日期 | 事件 | 分类 | 状态 | 很长很长的备注字段，用来确认表格不会撑破弹窗布局 |
|:----|:----|:----:|:----:|:----|
| 2026-06-13 | Markdown 渲染测试 | 文档 | 进行中 | 这一列故意很长，移动端应该出现横向滚动，而不是让弹窗变宽或者内容溢出。 |
| 2026-06-12 | MCP Server 搭建 | 开发 | 完成 | 表格内容里也可以包含 `inline code` 和普通文本。 |
| 2025-12-01 | Ubuntu 初始化 | DevOps | 完成 | 验证跨年份数据筛选时，这条记录不会影响 Markdown 弹窗样式。 |

---

## 链接与图片

- [外部链接 — Astro 官网](https://astro.build)
- [站内相对链接](/activity/)
- 自动链接：https://example.com

![Astro Logo](https://astro.build/assets/press/astro-icon-dark.png)

---

## Details 折叠区域

<details>
<summary>点击展开渲染说明</summary>

这里是被折叠的内容，可以包含**普通 Markdown**、`inline code` 和列表：

- 折叠内容 1
- 折叠内容 2
- 折叠内容 3

</details>

---

## 转义字符

\* 这不是斜体 \*

\` 这不是代码 \`

\# 这不是标题

---

*以上内容覆盖了 Markdown / GFM / 安全 HTML 子集的主要渲染特性。*