---
title: "代码块"
description: "掌握 Movk Nuxt Docs 代码块的全部功能：语法高亮、文件名标注、::code-group 分组展示、::code-tree 目录树视图、::code-collapse 可折叠代码块，以及 ::code-preview 并排预览，高效、直观地呈现技术内容。"
canonical_url: "https://docs.mhaibaraai.cn/docs/typography/code-blocks"
---
# 代码块

> 掌握 Movk Nuxt Docs 代码块的全部功能：语法高亮、文件名标注、::code-group 分组展示、::code-tree 目录树视图、::code-collapse 可折叠代码块，以及 ::code-preview 并排预览，高效、直观地呈现技术内容。

## 基础用法

### 内联代码

使用反引号包裹内联代码，适合在句子中引用代码元素。

```mdc
`内联代码`
```

### 代码块

使用三个反引号展示带语法高亮的多行代码。

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

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

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

每个代码块都内置了一个复制按钮，方便用户将代码复制到剪贴板。

> [!TIP]
> See: https://ui.nuxt.com/getting-started/icons/nuxt#theme
> 
> 图标已默认定义，但您可以在 `app/app.config.ts` 中进行自定义：
> 
> ```ts [app/app.config.ts]
> export default defineAppConfig({
>   ui: {
>     prose: {
>       codeIcon: {
>         terminal: 'i-ph-terminal-window-duotone'
>       }
>     }
>   }
> })
> ```

## 高级用法

### 代码组

使用 `code-group` 组件在选项卡中对多个代码块进行分组，非常适合用于展示多种语言或包管理器的代码示例。

````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
```

::
````

### 代码树

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

```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',
      colors: 'slate'
    }
  }
})
```

```vue [app/app.vue]
<template>
  <UApp>
    <NuxtPage />
  </UApp>
</template>
```

```json [package.json]
{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "lint": "eslint .",
    "lint:fix": "eslint --fix ."
  },
  "dependencies": {
    "@iconify-json/lucide": "^1.2.18",
    "@nuxt/ui": "^4.0.0",
    "nuxt": "^4.3.0",
  },
  "devDependencies": {
    "eslint": "^9.34.0",
    "typescript": "^5.9.3",
    "vue-tsc": "^3.0.6"
  }
}
```

```json [tsconfig.json]
{
  "extends": "./.nuxt/tsconfig.json"
}
```

````md [md] [README.md]
# Nuxt 4 Minimal Starter

Look at the [Nuxt 4 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.

## Setup

Make sure to install the dependencies:

```bash
# npm
npm install

# pnpm
pnpm install

# yarn
yarn install

# bun
bun install
```

## Development Server

Start the development server on `http://localhost:3000`:

```bash
# npm
npm run dev

# pnpm
pnpm run dev

# yarn
yarn dev

# bun
bun run dev
```

## Production

Build the application for production:

```bash
# npm
npm run build

# pnpm
pnpm run build

# yarn
yarn build

# bun
bun run build
```

Locally preview production build:

```bash
# npm
npm run preview

# pnpm
pnpm run preview

# yarn
yarn preview

# bun
bun run preview
```

Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
````

### `CodePreview`

使用 `code-preview` 显示代码输出与代码并排。`code-preview` 非常适合交互式示例和演示代码结果。
在 `default` 插槽中编写要预览的代码，在 `code` 插槽中编写实际代码。

````mdc
::code-preview
`内联代码`

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

### `CodeCollapse`

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

````mdc
::code-collapse

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

@theme {
--font-sans: 'Alibaba PuHuiTi', 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;
}
```

::
````


## Sitemap

See the full [sitemap](https://docs.mhaibaraai.cn/sitemap.md) for all pages.