使用内联代码在文本段落中嵌入简短的代码片段，非常适合在句子中直接引用代码元素。
内联代码
`内联代码`
使用代码块来展示带有语法高亮的多行代码。代码块对于清晰地呈现代码示例至关重要。
export default defineNuxtConfig({
modules: ['@nuxt/ui']
})
```ts
export default defineNuxtConfig({
modules: ['@nuxt/ui']
})
```
在编写代码块时，您可以指定一个文件名显示在代码块的顶部。图标会根据文件扩展名或名称自动匹配。这有助于用户理解代码在项目中的位置和用途。
export default defineNuxtConfig({
modules: ['@nuxt/ui']
})
```ts [nuxt.config.ts]
export default defineNuxtConfig({
modules: ['@nuxt/ui']
})
```
每个代码块都内置了一个复制按钮，方便用户将代码复制到剪贴板。
app.config.ts 中进行自定义：export default defineAppConfig({
ui: {
prose: {
codeIcon: {
terminal: 'i-ph-terminal-window-duotone'
}
}
}
})
使用 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
```
::
使用 code-tree 在文件树视图中显示代码块。code-tree 非常适合展示项目结构和文件关系。
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 允许用户仅在需要时展开代码块，提高可读性。
@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;
}
```
::