基础
代码块
在文档中展示行内代码和代码块。
基础
行内代码
使用行内代码在文本段落中展示代码片段。它非常适合在句子中直接引用代码元素。
inline code`inline code`
代码块
使用代码块展示带语法高亮的多行代码片段。代码块是清晰呈现代码示例的基础。
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 slot，将实际代码写入 code slot。
inline code`inline code`
::code-preview
`inline code`
#code
```mdc
`inline code`
```
::
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;
}
```
::