基础要点
代码块
在文档中显示内联代码和代码块。
基础
内联代码
使用内联代码在文本段落中显示代码片段。它非常适合直接在句子中引用代码元素。
内联代码`内联代码`
代码块
使用代码块显示带语法高亮的多行代码片段。代码块对于清晰地展示代码示例至关重要。
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 非常适合展示项目结构和文件关系。
:::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 允许用户仅在需要时展开代码块，提高可读性。
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;
}
```
::