代码

显示带有复制到剪贴板支持的内联代码和语法高亮代码块。

代码块

代码块由 @nuxtjs/mdc 的 ProsePre 组件渲染，代码高亮在底层由Shiki.

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

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

语言

支持数十种编程语言的语法高亮。

<script setup lang="ts">
const message = ref('Hello World!')

function updateMessage() {
  message.value = 'Button clicked!'
}
</script>

<template>
  <div>
    <h1>{{ message }}</h1>
    <UButton @click="updateMessage">
      Click me
    </UButton>
  </div>
</template>

```vue
<script setup lang="ts">
const message = ref('Hello World!')

function updateMessage() {
  message.value = 'Button clicked!'
}
</script>

<template>
  <div>
    <h1>{{ message }}</h1>
    <UButton @click="updateMessage">
      Click me
    </UButton>
  </div>
</template>
```
默认情况下，语法高亮使用 VSCode 主题 material-theme-lighter 和 material-theme-palenight 分别用于浅色和深色模式。您可以在 nuxt.config.ts 文件中通过content.build.markdown.highlight键来更改它。

文件名

代码块支持文件名显示，并自动检测图标。

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

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  modules: ['@nuxt/ui']
})
```
文件名图标由 ProseCodeIcon 组件渲染，包含一组预定义的图标，您可以在 app.config.ts 文件中自定义它们。
app.config.ts
export default defineAppConfig({
  ui: {
    prose: {
      codeIcon: {
        terminal: 'i-ph-terminal-window-duotone',
        config: 'i-lucide-settings',
        package: 'i-lucide-package'
      }
    }
  }
})

复制按钮

每个代码块都有一个内置的复制按钮，可以将代码复制到剪贴板。

您可以通过 app.config.ts 文件中的 ui.icons.copy 和 ui.icons.copyCheck 键来更改图标。
app.config.ts
export default defineAppConfig({
  ui: {
    icons: {
      copy: 'i-lucide-copy',
      copyCheck: 'i-lucide-copy-check'
    }
  }
})

行高亮

高亮特定行以吸引对重要部分的注意。

nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'], // This line is highlighted
  css: ['~/assets/css/main.css']
})

```ts [nuxt.config.ts] {2}
export default defineNuxtConfig({
  modules: ['@nuxt/ui'], // This line is highlighted
  css: ['~/assets/css/main.css']
})
```

代码差异

使用 diff 语言来显示代码版本之间的差异。

nuxt.config.ts
export default defineNuxtConfig({
  modules: [
-   '@nuxt/ui-pro'
+   '@nuxt/ui'
  ]
})

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

内联代码

内联代码片段由 @nuxtjs/mdc 的 ProseCode 组件渲染。

内联代码

`inline code`

颜色

使用 color 属性来更改内联代码的颜色。默认为 neutral。

内联代码

`inline code`{color="error"}

Lang

使用 lang 属性来指定内联代码的语言。

nuxt.config.ts

`nuxt.config.ts`{lang="ts-type"}

图片和嵌入

响应式图片、视频和富媒体嵌入，以增强和说明您的文档。

手风琴

创建可展开的内容部分，以更好地组织信息。