代码

显示内联代码和语法突出显示的代码块，并支持复制到剪贴板。

代码块

代码块由ProsePre组件呈现，语法突出显示由Shiki提供支持。

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

```ts
defineNuxtConfig（{
  模块：'@ 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！'）

public void run（）{
  message.value = '按钮已点击！'
}
</script>

<template>
  <div>
    <h1>{{ message }}</h1>
    <UButton @click="updateMessage">
      单击我
    </UButton>
  </div>
</template>
```
默认情况下，material-theme-lighter和material-theme-palenight Shiki主题分别用于亮和暗模式。使用@nuxt/content时，您可以通过nuxt.config.ts中的content.build.markdown.highlight键进行更改。使用独立@nuxtjs/mdc时，通过mdc.highlight键配置主题。使用Comark时，通过shiki插件选项配置主题。要使用Comark支持暗模式，请将以下CSS添加到样式表中：
main.css
html.dark .shiki span {
  color: var(--shiki-dark) !important;
  background-color: var(--shiki-dark-bg) !important;
  font-style: var(--shiki-dark-font-style) !important;
  font-weight: var(--shiki-dark-font-weight) !important;
  text-decoration: var(--shiki-dark-text-decoration) !important;
}

过滤器

代码块支持带有自动图标检测的文件名显示。

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

```ts [nuxt.config.ts]
defineNuxtConfig（{
  模块：'@ nuxt/ui']
})
```
文件名图标由ProseCodeIcon组件呈现，包含一组预定义的图标，您可以在应用配置中自定义这些图标：
app/app.config.ts
export default defineAppConfig({
  ui: {
    prose: {
      codeIcon: {
        terminal: 'i-lucide-square-terminal',
        config: 'i-lucide-settings',
        package: 'i-lucide-package'
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        prose: {
          codeIcon: {
            terminal: 'i-lucide-square-terminal',
            config: 'i-lucide-settings',
            package: 'i-lucide-package'
          }
        }
      }
    })
  ]
})
这些文件名图标来自vscode-icons集合，该集合与其他组件使用的lucide图标分开，并根据需要从文件扩展名解析。安装@iconify-json/vscode-icons以在本地和离线提供它们，就像任何其他集合一样。

复制按钮

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

将copy prop设置为false以隐藏按钮，或传递Button prop以自定义按钮。

您可以通过应用配置中的ui.icons.copy和ui.icons.copyCheck键更改图标：
app/app.config.ts
export default defineAppConfig({
  ui: {
    icons: {
      copy: 'i-lucide-copy',
      copyCheck: 'i-lucide-copy-check'
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        icons: {
          copy: 'i-lucide-copy',
          copyCheck: 'i-lucide-copy-check'
        }
      }
    })
  ]
})

Line高亮显示

突出显示特定线条以引起对重要部分的注意。

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

```ts [nuxt.config.ts] {2}
defineNuxtConfig（{
  modules：'@ nuxt/ui']，//这一行高亮显示
  css：文件'assets/css/main.css']
})
```

Code diff

使用diff语言显示代码版本之间的更改。

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

```diff [nuxt.config.ts]
defineNuxtConfig（{
  模块：[
-   '@nuxt/ui-pro'
+   '@nuxt/ui'
  ]
})
```

内联代码

内联代码片段由ProseCode组件呈现。

inline code

Color

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

inline code

`inline code`{color="error"}

Lang

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

nuxt.config.ts

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

Images and embeds

Responsive images, videos, and rich media embeds to enhance and illustrate your documentation.

Accordion

Create expandable content sections for better information organization.