MDX 组件说明#

本文档汇总所有自定义 MDX 组件的使用方法和示例。

1. 提示框 (Callout)#

用于高亮显示重要信息，支持多种类型。

使用方式：

<Callout type="info">
信息内容
</Callout>

2. 折叠面板 (Collapse)#

用于隐藏详细内容，点击展开。

使用方式：

<Collapse title="标题">
折叠内容
</Collapse>

3. 标签页 (Tabs)#

用于在多个内容之间切换。

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

def hello(name):
    return f"Hello, {name}!"

function hello(name: string): string {
  return `Hello, ${name}!`;
}

使用方式：

<Tabs labels={['标签1', '标签2']}>
<TabItem index={0} active>
内容1
</TabItem>
<TabItem index={1}>
内容2
</TabItem>
</Tabs>

4. 进度条 (Progress)#

用于展示进度或完成状态。

使用方式：

<Progress value={80} label="进度名称" />

5. 图片 (Image)#

支持调整大小和对齐方式。

基本用法（Markdown 语法，自动居中）：

使用组件调整大小：

左对齐：

右对齐：

带标题说明：

使用方式：

<!-- 推荐：Markdown 语法，自动居中 -->
![描述](./_media/photo.png)

<!-- 需要调整大小或对齐时使用组件 -->
<Image src="./_media/photo.png" alt="描述" width="200px" align="left" caption="标题" />

6. 视频与文档 (Media)#

支持视频播放和文档下载。

使用方式：

<!-- 视频 -->
<Media type="video" src="./_media/demo.mp4" width="640px" caption="演示视频" />

<!-- 文档下载 -->
<Media type="document" src="./_media/guide.md" alt="使用指南" />

支持的文档类型：.md、.mdx、.pdf、.docx、.txt 等

7. 表格 (Table)#

支持两种方式创建表格：Markdown 语法和 HTML 语法。

7.1 Markdown 表格（推荐）#

直接使用 Markdown 表格语法，自动转换为带样式的表格：

7.2 HTML 表格#

使用 HTML 语法可以设置更多属性（对齐、标题等）：

左对齐表格：

使用方式：

<!-- Markdown 语法（推荐，自动转换） -->
| 列1 | 列2 |
|-----|-----|
| 数据 | 数据 |

<!-- HTML 语法（需要设置对齐或标题时） -->
<Table align="left" caption="表格标题">
  <thead>
    <tr><th>列1</th><th>列2</th></tr>
  </thead>
  <tbody>
    <tr><td>数据</td><td>数据</td></tr>
  </tbody>
</Table>

8. LaTeX 公式 (Latex)#

支持块级公式的对齐控制。

居中对齐（默认）：

左对齐：

右对齐：

行内公式：

行内公式示例：$a^2 + b^2 = c^2$，$\sum_{i=1}^{n} i = \frac{n(n+1)}{2}$

使用方式：

<!-- 默认居中 -->
<Latex>
$$
E = mc^2
$$
</Latex>

<!-- 左对齐 -->
<Latex align="left">
$$
\sum_{i=1}^{n} i = \frac{n(n+1)}{2}
$$
</Latex>

9. 大括号结构图 (BraceMap)#

使用 d3.js 渲染的大括号结构图，用于展示整体与部分关系。

基本用法：

自定义样式：

使用方式：

<BraceMap
  data={{
    name: "根节点",
    children: [
      { name: "子节点 1" },
      { name: "子节点 2" },
    ],
  }}
/>

可配置参数：

10. 代码块 (CodeBlock)#

支持代码高亮和复制功能。

function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

使用方式：

```javascript
// 代码内容
```

11. 画廊 (Gallery)#

用于展示多张图片的网格布局。

使用方式：

<Gallery columns={3}>
  <img src="./_media/img1.png" alt="图片1" />
  <img src="./_media/img2.png" alt="图片2" />
  <img src="./_media/img3.png" alt="图片3" />
</Gallery>

12. Wiki 链接#

支持双向链接，自动关联相关笔记。

示例：

• 基础语法 - Python基础语法
• 虚拟内存 - Linux虚拟内存机制
• CFS 调度器 - Linux进程调度

使用方式：

[[笔记标题]]

总结#

所有可用组件：