代码

显示行内代码和语法高亮的代码块，并支持复制到剪贴板。

代码块

代码块由 @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>
```
默认情况下，语法高亮分别使用 material-theme-lighter 和 material-theme-palenight VSCode 主题用于浅色和深色模式。您可以在 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'
      }
    }
  }
})

复制按钮

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

您可以通过 ui.icons.copy 和 ui.icons.copyCheck 键在 app.config.ts 中更改图标。
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 prop 更改行内代码的颜色。默认为 neutral。

行内代码

`inline code`{color="error"}

语言

使用 lang prop 指定行内代码的语言。

nuxt.config.ts

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

图片和嵌入

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

手风琴

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