基础知识
代码块
在文档中显示行内代码和代码块。
基础用法
行内代码
使用行内代码在段落文本中展示代码片段。它非常适合在句子中直接引用代码元素。
行内代码`行内代码`
代码块
使用代码块展示多行代码片段，并支持语法高亮。代码块对于清晰呈现代码示例至关重要。
export default defineNuxtConfig({
modules: ["@nuxt/ui"],
});
```ts
export default defineNuxtConfig({
modules: ["@nuxt/ui"],
});
```
编写代码块时，你可以指定一个文件名，该文件名将显示在代码块顶部。系统会根据文件扩展名或名称自动显示相应的图标。 文件名有助于用户理解代码在项目中的位置和用途。
nuxt.config.ts
export default defineNuxtConfig({
modules: ["@nuxt/ui"],
});
```ts [nuxt.config.ts]
export default defineNuxtConfig({
modules: ["@nuxt/ui"],
});
```
每个代码块都内置了一个复制按钮，可将代码一键复制到剪贴板。
图标已默认定义，但你可以在
app.config.ts 中自定义它们：app.config.ts
export default defineAppConfig({
ui: {
prose: {
codeIcon: {
terminal: "i-ph-terminal-window-duotone",
},
},
},
});
高级用法
CodeGroup（代码组）
使用 code-group 将多个代码块以标签页形式分组。code-group 非常适合展示多种语言或不同包管理器的代码示例。
pnpm add @nuxt/ui
yarn add @nuxt/ui
npm install @nuxt/ui
bun add @nuxt/ui
::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 非常适合展示项目结构和文件之间的关系。
app/app.config.ts
export default defineAppConfig({
ui: {
colors: {
primary: "sky",
colors: "slate",
},
},
});
CodePreview（代码预览）
使用 code-preview 同时展示代码及其输出效果。code-preview 非常适合交互式示例和演示代码运行结果。
将要预览的内容写在 default 插槽中，实际代码写在 code 插槽中。
行内代码`行内代码`
::code-preview
`行内代码`
#code
```mdc
`行内代码`
```
::
CodeCollapse（可折叠代码）
对较长的代码块使用 code-collapse，以保持页面整洁。code-collapse 允许用户仅在需要时展开代码块，从而提升可读性。
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-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;
}
```
::