> AI coding agents: see [/llms.txt](/llms.txt) for the full documentation index. Markdown version: [/docs/manual/zh/essentials/code-blocks.md](/docs/manual/zh/essentials/code-blocks.md).

---
title: 代码块
description: 在文档中显示内联代码和代码块。
navigation:
  icon: i-lucide-code-xml
---

## 基础

### 内联代码

使用内联代码在文本段落中显示代码片段。它非常适合直接在句子中引用代码元素。

::code-preview
---
class: "[&>div]:*:my-0"
---
`内联代码`

#code
```mdc
`内联代码`
```
::

### 代码块

使用代码块显示带语法高亮的多行代码片段。代码块对于清晰地展示代码示例至关重要。

::code-preview
---
class: "[&>div]:*:my-0 [&>div]:*:w-full"
---
```ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui']
})
```

#code
````mdc
```ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui']
})
```
````
::

在编写代码块时，您可以指定一个文件名，该文件名将显示在代码块顶部。图标会根据扩展名或名称自动显示。
文件名帮助用户理解代码在项目中的位置和用途。

::code-preview
---
class: "[&>div]:*:my-0 [&>div]:*:w-full"
---
```ts [nuxt.config.ts]
export default defineNuxtConfig({
  modules: ['@nuxt/ui']
})
```

#code
````mdc
```ts [nuxt.config.ts]
export default defineNuxtConfig({
  modules: ['@nuxt/ui']
})
```
````
::

每个代码块都有一个内置的复制按钮，可将代码复制到剪贴板。

::tip{to="https://ui.nuxt.com/getting-started/icons/nuxt#theme"}
图标默认已定义，但您可以在 `app.config.ts` 中自定义它们：

```ts [app.config.ts]
export default defineAppConfig({
  ui: {
    prose: {
      codeIcon: {
        terminal: 'i-ph-terminal-window-duotone'
      }
    }
  }
})
```
::

## 高级

### 代码组（CodeGroup）

使用 `code-group` 在标签页中分组代码块。`code-group` 非常适合展示多种语言或包管理器的代码示例。

::code-preview
---
class: "[&>div]:*:my-0 [&>div]:*:w-full"
---
  :::code-group{.w-full}
  ```bash [pnpm]
  pnpm add @nuxt/ui
  ```

  ```bash [yarn]
  yarn add @nuxt/ui
  ```

  ```bash [npm]
  npm install @nuxt/ui
  ```

  ```bash [bun]
  bun add @nuxt/ui
  ```
  :::

#code
````mdc
::code-group

```bash [pnpm]
pnpm add @nuxt/ui
```

```bash [yarn]
yarn add @nuxt/ui
```

```bash [npm]
npm install @nuxt/ui
```

```bash [bun]
bun add @nuxt/ui
```

::
````
::

### 代码树（CodeTree）

使用 `code-tree` 以文件树视图显示代码块。`code-tree` 非常适合展示项目结构和文件关系。

````mdc
:::code-tree{default-value="app/app.config.ts"}
```ts [nuxt.config.ts]
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css']
})
```

```css [app/assets/css/main.css]
@import "tailwindcss";
@import "@nuxt/ui";
```

```ts [app/app.config.ts]
export default defineAppConfig({
  ui: {
    colors: {
      primary: 'sky',
      neutral: 'slate'
    }
  }
})
```
:::
````

### 代码折叠（CodeCollapse）

使用 `code-collapse` 处理较长的代码块，保持页面整洁。`code-collapse` 允许用户仅在需要时展开代码块，提高可读性。

::code-preview
---
class: "[&>div]:*:my-0 [&>div]:*:w-full"
---
  :::code-collapse
  ---
  class: "[&>div]:my-0"
  ---
  ```css [main.css]
  @import "tailwindcss";
  @import "@nuxt/ui";

  @theme {
    --font-sans: 'Public Sans', sans-serif;

    --breakpoint-3xl: 1920px;

    --color-green-50: #EFFDF5;
    --color-green-100: #D9FBE8;
    --color-green-200: #B3F5D1;
    --color-green-300: #75EDAE;
    --color-green-400: #00DC82;
    --color-green-500: #00C16A;
    --color-green-600: #00A155;
    --color-green-700: #007F45;
    --color-green-800: #016538;
    --color-green-900: #0A5331;
    --color-green-950: #052E16;
  }
  ```
  :::

#code
````mdc
::code-collapse

```css [main.css]
@import "tailwindcss";
@import "@nuxt/ui";

@theme {
--font-sans: 'Public Sans', sans-serif;

--breakpoint-3xl: 1920px;

--color-green-50: #EFFDF5;
--color-green-100: #D9FBE8;
--color-green-200: #B3F5D1;
--color-green-300: #75EDAE;
--color-green-400: #00DC82;
--color-green-500: #00C16A;
--color-green-600: #00A155;
--color-green-700: #007F45;
--color-green-800: #016538;
--color-green-900: #0A5331;
--color-green-950: #052E16;
}
```

::
````
::