# 代码

标记文本以表示一小段计算机代码。

```jsx
<Code>console.log()</Code>
```

## [API 参考](#api-参考)

该组件基于 `code` 元素，并支持 [常见边距属性](/themes/docs/overview/layout#margin-props)。

| Prop           | Type                                                      | Default          |
| -------------- | --------------------------------------------------------- | ---------------- |
| `asChild`      | `boolean`                                                 | No default value |
| `size`         | `Responsive<enum>`                                        | No default value |
| `variant`      | `"solid" \| "soft" \| "outline" \| "ghost"`               | `"soft"`         |
| `weight`       | `Responsive<"light" \| "regular" \| "medium" \| "bold">`  | No default value |
| `color`        | `enum`                                                    | No default value |
| `highContrast` | `boolean`                                                 | No default value |
| `truncate`     | `boolean`                                                 | No default value |
| `wrap`         | `Responsive<"wrap" \| "nowrap" \| "pretty" \| "balance">` | No default value |

## [示例](#示例)

### [大小](#大小)

使用 `size` 属性来控制文本大小。此属性还提供正确的行高和修正的字母间距——随着文本大小的增加，相对行高和字母间距会减小。

```jsx
<Flex direction="column" gap="3" align="start">
  <Code size="1">console.log()</Code>

  <Code size="2">console.log()</Code>

  <Code size="3">console.log()</Code>

  <Code size="4">console.log()</Code>

  <Code size="5">console.log()</Code>

  <Code size="6">console.log()</Code>

  <Code size="7">console.log()</Code>

  <Code size="8">console.log()</Code>

  <Code size="9">console.log()</Code>
</Flex>
```

### [变体](#变体)

使用 `variant` 属性来控制视觉样式。

```jsx
<Flex direction="column" align="start" gap="2">
  <Code variant="solid">console.log()</Code>

  <Code variant="soft">console.log()</Code>

  <Code variant="outline">console.log()</Code>

  <Code variant="ghost">console.log()</Code>
</Flex>
```

### [颜色](#颜色)

使用 `color` 属性为文本指定特定的 [颜色](/themes/docs/theme/color)。

```jsx
<Flex direction="column" align="start" gap="2">
  <Code color="indigo">console.log()</Code>

  <Code color="crimson">console.log()</Code>

  <Code color="cyan">console.log()</Code>

  <Code color="orange">console.log()</Code>
</Flex>
```

### [高对比度](#高对比度)

使用 `highContrast` 属性以增加与背景的颜色对比。

```jsx
<Flex gap="3">
  <Flex direction="column" align="start" gap="2">
    <Code color="gray" variant="solid">
      console.log()
    </Code>

    <Code color="gray" variant="soft">
      console.log()
    </Code>

    <Code color="gray" variant="outline">
      console.log()
    </Code>

    <Code color="gray" variant="ghost">
      console.log()
    </Code>
  </Flex>

  <Flex direction="column" align="start" gap="2">
    <Code color="gray" variant="solid" highContrast>
      console.log()
    </Code>

    <Code color="gray" variant="soft" highContrast>
      console.log()
    </Code>

    <Code color="gray" variant="outline" highContrast>
      console.log()
    </Code>

    <Code color="gray" variant="ghost" highContrast>
      console.log()
    </Code>
  </Flex>
</Flex>
```

### [字重](#字重)

使用 `weight` 属性来设置文本的字重。

```jsx
<Flex direction="column" gap="2" align="start">
  <Code weight="regular">console.log()</Code>

  <Code weight="bold">console.log()</Code>
</Flex>
```

### [截断](#截断)

使用 `truncate` 属性，在文本溢出其容器时用省略号截断文本。

```jsx
<Flex maxWidth="200px">
  <Code truncate>linear-gradient(red, orange, yellow, green, blue);</Code>
</Flex>
```

<!--$-->

<!--/$-->