99 lines
1.9 KiB
Plaintext
99 lines
1.9 KiB
Plaintext
# 欢迎使用 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 的各种功能，包括文本格式化、代码高亮、组件嵌入等。* |