Code

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

Code blocks

Code blocks are rendered by the ProsePre component of @nuxtjs/mdc and code highlighting is done underneath 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 for syntax highlighting, material-theme-lighter and material-theme-palenight VSCode themes are used for light & dark mode respectively. You can change this in your nuxt.config.ts through the content.build.markdown.highlight key.

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.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'
      }
    }
  }
})

Copy button

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

You can change the icon in your app.config.ts through the ui.icons.copy and ui.icons.copyCheck keys:
app.config.ts
export default defineAppConfig({
  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 of @nuxtjs/mdc.

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.