Markdown 渲染效果综合测试

这是一篇用于测试 Markdown 渲染引擎功能的文章。它包含了各种 Markdown 元素，以确保你的网站能够正确、美观地显示所有格式。

标题 (Headings)

以下是所有级别的标题，从一级到六级：

标题一 H1

标题二 H2

标题三 H3

标题四 H4

标题五 H5

标题六 H6

文本样式 (Text Styles)

这里是一些基本的文本格式：

• 加粗文本 (Bold)
• 斜体文本 (Italic)
• 加粗并斜体 (Bold & Italic)
• 删除线 (Strikethrough)
• 这是一个行内代码 const greeting = "Hello, World!"; 的例子。
• 下划线 (通过 HTML 标签实现)
• 按键样式： Ctrl + C

引用块 (Blockquotes)

这是一个标准的引用块。它通常用于引用他人的话语或突出显示某段文字。

这是一个嵌套的引用块，可以用来表示引用中的引用。

— 佚名

列表 (Lists)

无序列表

• 列表项 A
• 列表项 B
  • 嵌套列表项 B1
  • 嵌套列表项 B2
• 列表项 C

有序列表

1. 第一步：准备材料
2. 第二步：编码
   1. 编写 HTML 结构
   2. 添加 CSS 样式
   3. 实现 JavaScript 逻辑
3. 第三步：部署上线

任务列表 (Task Lists)

• 完成设计稿
• 编写前端代码
• 连接后端 API
• 撰写测试用例

代码块 (Code Blocks)

代码块是技术博客中必不可少的部分。下面是一个带有语法高亮的 JavaScript 代码示例：

// A simple function to greet a user
function greet(user) {
  if (user) {
    console.log(`Hello, ${user.name}! Welcome to our site.`);
  } else {
    console.log('Hello, guest!');
  }
}

const myUser = {
  name: "Alex",
  age: 28
};

greet(myUser);

表格 (Tables)

表格的对齐方式也需要测试。

复杂表格示例：

链接与图片 (Links & Images)

这是一个指向 Google 的链接。

下面是一张图片 (使用占位图服务)：

水平分割线 (Horizontal Rule)

上面的每个部分都使用了水平分割线来进行分隔。可以通过 ---, ***, 或 ___ 来创建。

表格对齐测试

这是一个专门测试表格对齐的示例：

HTML 标签测试

文本装饰效果

• 下划线文本（使用 <u> 标签）
• 高亮文本（使用 <mark> 标签）
• 删除文本（使用 <del> 标签）
• 插入文本（使用 <ins> 标签）
• 小号文本（使用 <small> 标签）

上标和下标

• 化学公式：H₂O（水）、CO₂（二氧化碳）
• 数学公式：X² + Y² = Z²
• 脚注引用：这是一段文本^[1]

按键样式

使用 <kbd> 标签显示键盘按键：

• 复制：Ctrl + C
• 粘贴：Ctrl + V
• 保存：Ctrl + S
• 撤销：Ctrl + Z
• Mac 用户：⌘ Cmd + C

缩写说明

悬停在缩写上查看完整说明：

• HTML
• CSS
• JS

任务列表

• 已完成的任务
• 未完成的任务

定义列表

定义列表需要使用 HTML 标签（标准 Markdown 不支持）：

Markdown

一种轻量级标记语言

HTML

超文本标记语言

CSS

层叠样式表，用于网页样式设计

折叠面板

使用 HTML5 的 <details> 和 <summary> 标签创建可折叠内容：

console.log("甚至可以包含代码块！");

mermaid 图表

graph TD
    A[开始] --> B[结束]

爱因斯坦质能方程 $E = mc^2$

测试结束。如果以上所有元素都显示正常，那么你的 Markdown 渲染配置就是完美的！