Code

Display inline code and syntax-highlighted code blocks with copy-to-clipboard support.

Code blocks

Code blocks are rendered by the ProsePre component with syntax highlighting powered by Shiki.

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

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

Language

Syntax highlighting is available for dozens of programming languages.

<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>
```
By default, material-theme-lighter and material-theme-palenight Shiki themes are used for light and dark mode respectively. When using @nuxt/content, you can change this through the content.build.markdown.highlight key in your nuxt.config.ts. When using standalone @nuxtjs/mdc, configure themes through the mdc.highlight key. When using Comark, configure themes through the shiki plugin options.To support dark mode with Comark, add the following CSS to your stylesheet:
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;
}

Filename

Code blocks support filename display with automatic icon detection.

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

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  modules: ['@nuxt/ui']
})
```
The filename icon is rendered by the ProseCodeIcon component and contains a set of predefined icons which you can customize in your app configuration:
app/app.config.ts
export default defineAppConfig({
  ui: {
    prose: {
      codeIcon: {
        terminal: 'i-ph-terminal-window-duotone',
        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-ph-terminal-window-duotone',
            config: 'i-lucide-settings',
            package: 'i-lucide-package'
          }
        }
      }
    })
  ]
})
These filename icons come from the vscode-icons collection, which is separate from the lucide icons the rest of the components use, and are resolved on demand from the file extension. Install @iconify-json/vscode-icons to serve them locally and offline, just like any other collection.

Copy button

Every code-block has a built-in copy button that will copy the code to your clipboard.

Set the copy prop to false to hide the button, or pass Button props to customize it.

You can change the icon through the ui.icons.copy and ui.icons.copyCheck keys in your app configuration:
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 highlighting

Highlight specific lines to draw attention to important parts.

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']
})
```

Code diff

Use the diff language to show changes between code versions.

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'
  ]
})
```

Inline code

Inline code snippets are rendered by the ProseCode component.

inline code

Color

Use the color prop to change the color of the inline code. Defaults to neutral.

inline code

`inline code`{color="error"}

Lang

Use the lang prop to specify the language of the inline code.

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.