UI 组件样式

<Callout type="info">
  这是一条信息提示，用于向读者提供额外的背景信息或说明。
</Callout>

<Callout type="warn">
  这是一条警告提示，用于提醒读者注意潜在的问题或风险。
</Callout>

<Callout type="error">
  这是一条错误提示，用于标识严重的问题或不可逆的操作。
</Callout>

<Callout type="success">
  这是一条成功提示，用于确认操作已成功完成。
</Callout>

<Callout type="warning">
  这是一条注意事项，用于提醒读者特别关注某个配置或行为。
</Callout>

<Callout type="idea">
  这是一条想法提示，用于提供技巧、最佳实践或改进建议。
</Callout>

<Callout type="info" title="自定义标题">
  你可以通过 `title` 属性为 Callout 设置自定义标题，使提示更加清晰明确。
</Callout>

<Cards>
  <Card title="卡片标题">展示文字。</Card>
</Cards>

<Cards>
  <Card title="标题" href="https://uecook.top" description="副标题">
    展示文字。
  </Card>
</Cards>

<CardsLong>mdx
  <Card title="标题">展示文字。</Card>
</CardsLong>

<Accordions>
  <Accordion title="标题1">
    文字1
  </Accordion>
  <Accordion title="标题2">
    文字2
  </Accordion>
  <Accordion title="标题3">
    文字3
  </Accordion>
</Accordions>

<Steps>
<Step>例子1</Step>
<Step>例子2</Step>
<Step>例子3</Step>
</Steps>

<Tabs items={['1', '2', '3']}>
  <Tab>展示1</Tab>
  <Tab>展示2</Tab>
  <Tab>展示3</Tab>
</Tabs>

<Tabs>
  <TabsList>
    <TabsTrigger value="1">1</TabsTrigger>
    <TabsTrigger value="2">2</TabsTrigger>
  </TabsList>
  <TabsContent value="1">
    在这里输入文字。

    留空行换行。
  </TabsContent>
  <TabsContent value="2">
    测试代码样例。

    在这里使用 markdown 语法引用代码即可。
  </TabsContent>
</Tabs>

<Files>
  <Folder name="父文件夹1" defaultOpen>
    <Folder name="子文件夹1">
      <File name="1.docx" />
      <File name="2.md" />
    </Folder>
    <File name="3.js" />
    <File name="4.html" />
  </Folder>
  <Folder name="父文件夹2" defaultOpen>
    <Folder name="子文件夹2">
      <File name="index.mdx" />
      <File name="ui.css" />
    </Folder>
  </Folder>
  <File name="REMADE.md" />
  <File name="package.json" />
</Files>

<TypeTable
  type={{
    title: {
      type: 'string',
      description: '文档页面的标题',
      required: true,
    },
    description: {
      type: 'string',
      description: '文档页面的描述信息',
    },
    theme: {
      type: "'light' | 'dark' | 'system'",
      description: '主题模式，默认跟随系统',
      default: "'system'",
    },
    full: {
      type: 'boolean',
      description: '是否使用全宽布局',
      default: 'false',
    },
  }}
/>

// 标准代码块
#include <stdio.h>

int main() 
{
  printf("Hello, World!");
  return 0;
}

// 带行号的代码块
// 在 markdown 代码语法后添加 "lineNumbers" 字段
#include <stdio.h>

int main() 
{
    printf("Hello, World!");
    return 0;
}

// 带标题的代码块
// 在 markdown 代码语法后添加 "title="标题"" 字段
#include <stdio.h>

int main() 
{
    printf("Hello, World!");
    return 0;
}

// 带高亮行的代码块
// 在 markdown 代码语法后添加 "{n}" 字段

#include <stdio.h>

int main() 
{
    printf("Hello, World!");
    return 0;
}

|  A  |  B  |  C  |
|-----|-----|-----|
|  1  |  2  |  3  |

|  A  |  B  |  C  |
|:----|:---:|----:|  //（从左到右）左对齐、居中对齐、右对齐
|  1  |  2  |  3  |

> 123
>
> ABC
>
> 一二三

> 这是一级引用
>
> > 这是嵌套的二级引用
> >
> > > 这是三级引用

- A
  - 1
  - 2
- B
  - 1
  - 2
  - 3
- C
  - 1
  - 2
  - 3

1. AA
   1. a
   2. b
   3. c
2. BB
   1. a
   2. b
   3. c
3. CC
   1. a
   2. b
   3. c

- [x] 1
- [x] 2
- [x] 3
- [ ] 4
- [ ] 5

**粗体文本**
*斜体文本*
~~删除线~~
`行内代码`
[超链接](https://uecook.topuecook.top)

## 二级标题

### 三级标题

#### 四级标题

##### 五级标题

###### 六级标题

---   //没错这就是分割线

![图片描述](图片链接)

<ImageZoom
  src="https://fumadocs.dev/logo.png"  //图片链接地址
  alt="图片描述"
  width={200}   // 图片宽度（单位：像素）
  height={50}   // 图片高度（单位：像素）
/>

<InlineTOC
  items={[
    { title: '标题1', url: '#标题1', depth: 2 },
    { title: '标题2', url: '#标题2', depth: 2 },
    { title: '标题3', url: '#标题3', depth: 2 },
  ]}
>
  目录导航
</InlineTOC>