语法测试

说明： 本文档用于逐一测试支持的 Markdown 语法与内联 HTML 标签，验证渲染效果。

---

H1 一级标题

H2 二级标题

H3 三级标题

H4 四级标题

H5 五级标题

H6 六级标题

---

1. 文本格式

1.1 粗体与斜体

• 粗体文本 使用 **粗体** 或 __粗体__
• 斜体文本 使用 *斜体* 或 _斜体_
• 粗斜体 使用 ***粗斜体***
• 删除线文本 使用 ~~删除线~~
• 行内代码使用 inline code here

1.2 高亮

• ==高亮文本== 部分渲染器支持

---

2. 段落与引用

这是第一个段落。段落之间需要空一行。

这是单行引用块。

嵌套引用：

二级引用

三级引用

2.1 HTML

这是居中的文本段落

2.2 HTML

居中的卡片
这是一段卡片内容

---

3. 列表

3.1 无序列表

• 项目 A
• 项目 B
• 项目 C
  • 子项目 C1
  • 子项目 C2
    • 孙项目 C2a
    • 孙项目 C2b

3.2 有序列表

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

3.3 任务列表

• 已完成任务 A
• 已完成任务 B
• 未完成的任务 C
• 未完成的任务 D

3.4 定义列表

Term

Definition 1

Definition 2

Another term

Another definition

---

4. 表格

4.1 基础表格

姓名	年龄	城市
张三	28	北京
李四	32	上海
王五	25	广州

4.2 对齐表格

左对齐	居中对齐	右对齐

---

5. 代码块

5.1 无语言标注

普通代码块
print("Hello")

5.2 JavaScript

const greeting = (name) => {
  console.log(`Hello, ${name}!`);
};
greeting("World");

5.3 Python

def fibonacci(n: int) -> list[int]:
    """生成斐波那契数列"""
    result = [0, 1]
    for i in range(2, n):
        result.append(result[-1] + result[-2])
    return result

print(fibonacci(10))

5.4 Shell

# 安装依赖
npm install --save-dev prettier
# 格式化文件
npx prettier --write src/**/*.md

5.5 YAML

site:
  title: "My Docs"
  theme:
    color: "#1a1a2e"
    font: "Inter, sans-serif"
  pages:
    - index
    - guides
    - reference

5.6 JSON

{
  "name": "starlight-docs",
  "version": "1.0.0",
  "scripts": {
    "dev": "astro dev",
    "build": "astro build"
  }
}

5.7 SQL

SELECT
  user_id,
  COUNT(*)  AS login_count,
  MAX(last_login) AS last_active
FROM user_sessions
GROUP BY user_id
ORDER BY login_count DESC
LIMIT 10;

---

6. 链接

6.1 内联链接

• Astro 官方文档
• Starlight 主题

6.2 图片链接

• 

6.3 参考式链接

• 这是 Astro 的参考式链接。
• 这是 MDN 的参考式链接。

6.4 带锚点的链接

• 跳转到代码块章节
• 跳转到表格章节

---

7. 图片

7.1 基础图片

7.2 带标题的图片

7.3 HTML

| A | B | 1 | | C | D | 2 |

4.3 表格内嵌格式化

状态	说明
正常	服务正常运行中
警告	需要关注
故障	已修复

---

8. HTML 标签测试

8.1 <center> 居中

这是一段居中的斜体文本

8.2 <hr> 分隔线

Markdown 分隔线：

---

HTML <hr> 分隔线：

---

8.3 <span> 与 <font>

红色文字 绿色文字 蓝色文字 橙色文字 紫色文字

大字体 小字体

8.4 <sub> 与 <sup>

• 下标：H₂O
• 上标：x² = 4

8.5 <mark> 高亮

这段文字被高亮了

8.6 <details> 与 <summary>

点击展开详细信息

这是一段默认隐藏的内容，点击后才会显示。

• 项目 1
• 项目 2
• 项目 3

另一个折叠内容

const x = 42;

8.7 <table> HTML 表格

编号	语言	用途
1	JavaScript	前端 / 后端
2	Python	数据科学 / 后端
3	Rust	系统编程

8.8 <abbr> 缩写

HTML CSS

8.9 <code> 行内代码

const hello = “Hello!”;

8.10 <pre> 预格式文本

  空格保留
    缩进保留
      更多缩进

8.11 <kbd> 键盘按键

按 Ctrl + C 复制，Ctrl + V 粘贴。

8.12 <samp> 输出样例

42 files changed, 128 additions(+), 96 deletions(-)

8.13 <var> 变量

变量 x = y + 1

8.14 <cite> 引用来源

— 来源：JavaScript 语言规范

8.15 <blockquote> HTML 引用

"The only way to do great work is to love what you do."

— Steve Jobs

8.16 <fieldset> 与 <legend>

表单字段集

标签：

描述：示例描述

8.17 <progress> 进度条

75%

8.18 <meter> 度量表

70%

8.19 <canvas>

Canvas 不被支持

8.20 <audio>

8.21 <video>

8.22 <figure> 与 <figcaption>

图 1 — 这是图片的标题说明

8.23 <time>

发表日期：2024年1月15日

8.24 <nav>

首页 · 文档 · API · 博客

8.25 <small>

这是小字体脚注文字

8.26 <b> 与 <i>

加粗标签 与 斜体标签 效果对比

8.27 <u> 下划线

下划线文字

8.28 <s> 与 <strike>

已废弃的文本 / 划线文本

8.29 <wbr> 软换行

这是一个很长的词组，使用 标签来指定软换行位置。

---

9. 脚注

这是带有脚注的文本¹。

另一个脚注引用²。

---

10. Mermaid 图表

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

pie title 语言占比
    "JavaScript" : 35
    "Python" : 25
    "Rust" : 15
    "Go" : 15
    "其他" : 10

gantt
    title 项目时间线
    dateFormat  YYYY-MM-DD
    section 设计
    需求分析    :a1, 2024-01-01, 7d
    UI 设计     :a2, after a1, 5d
    section 开发
    前端开发    :b1, after a2, 10d
    后端开发    :b2, after a2, 10d
    section 测试
    集成测试    :c1, after b1, 5d
    发布        :milestone, after c1, 0d

---

11. 数学公式 (KaTeX)

$$E = mc^2$$ $$\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}$$ $$\sum_{i=1}^{n} x_i = x_1 + x_2 + \cdots + x_n$$

行内公式：$f(x) = ax^2 + bx + c$ 其中 $a \neq 0$。

---

12. 特殊字符与转义

• 反斜杠 \\ 转义
• 花括号 { 和 }
• 括号 ( )
• 方括号 [ ]
• 中括号 【 】
• 破折号 ——
• 省略号 ……
• 引号 " " 和 ' '

---

13. 表情符号

🎉 🚀 ⚡ ✅ ❌ ⚠️ 🔧 📝 📊 📁 📂 ⭐ 🌟 💡 🎯 🔥 ❤️ 🧩

---

14. 综合示例

注意： 以下综合测试所有语法。

📋 任务清单

任务	优先级	状态
编写需求文档	高	✅ 完成
设计系统架构	中	✅ 完成
开发核心模块	高	🔄 进行中
编写单元测试	低	⏳ 待开始
编写废弃功能	高	❌ 取消

展开查看实现代码

class TaskManager {
  constructor() {
    this.tasks = new Map();
    this.priorityOrder = ['high', 'medium', 'low'];
  }

  async addTask(name, priority = 'medium') {
    const id = crypto.randomUUID();
    this.tasks.set(id, { name, priority, status: 'pending' });
    return id;
  }

  getOverdue() {
    return Array.from(this.tasks.values())
      .filter(t => t.status === 'overdue')
      .sort((a, b) => this.priorityOrder.indexOf(a.priority) - this.priorityOrder.indexOf(b.priority));
  }
}

^{参考：ES2024 规范第 ₁₄ 节}

---

以上覆盖了所有常见 Markdown 语法和 HTML 标签。³

Footnotes

1. 这是脚注 1 的内容，会显示在页面底部。 ↩

2. 这是脚注 2 的内容，可以包含 链接。 ↩

3. 文档结束。如果所有语法正确显示，则渲染器工作正常。 ↩