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

Copy button

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

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

`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.