# 欢迎使用 MDX 预览器

这是一个示例的 MDX 文件，展示了 MDX 的各种功能。

## 🎉 更新时间：2025-12-09 22:05

如果你能看到这个更新的内容，说明热重载功能正在正常工作！

## 标题和文本

MDX 允许你在 Markdown 中直接使用 JSX 组件。例如，我们可以创建一个带有样式的文本：

<blockquote>
  这是一个引用块，展示了如何使用 MDX 组件系统。
</blockquote>

## 代码示例

### 内联代码

这是一个 `内联代码` 的例子。

### 代码块

```javascript
function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet("MDX"));
```

```typescript
interface User {
  name: string;
  age: number;
}

const user: User = {
  name: "Alice",
  age: 30
};
```

## 列表

### 无序列表

- 第一项
- 第二项
  - 嵌套项目 1
  - 嵌套项目 2
- 第三项

### 有序列表

1. 步骤一
2. 步骤二
3. 步骤三

## 交互式组件

这是一个自定义的计数器组件：

<div style={{
  padding: '16px',
  backgroundColor: '#f0f9ff',
  borderRadius: '8px',
  border: '1px solid #0ea5e9',
  margin: '16px 0'
}}>
  <p style={{ marginBottom: '12px', fontWeight: 'bold' }}>
    🎯 互动示例
  </p>
  <p style={{ color: '#0284c7' }}>
    这是一个通过 MDX 直接嵌入的样式化 div，展示了如何在 Markdown 中使用自定义组件。
  </p>
</div>

## 表格

| 功能 | 描述 | 示例 |
|------|------|------|
| 标题 | 支持 h1-h6 | `# 标题` |
| 代码 | 语法高亮 | `\`\`\`javascript` |
| 组件 | JSX 支持 | `<Component />` |

## 总结

MDX 的强大之处在于：

1. **Markdown 的简洁性** - 保持写作的流畅性
2. **React 组件的强大功能** - 可以使用任何 React 组件
3. **类型安全** - TypeScript 支持
4. **热重载** - 开发时实时预览

---

*这个文件展示了 MDX 的各种功能，包括文本格式化、代码高亮、组件嵌入等。*