Code

Inline code snippets and syntax-highlighted code blocks with copy functionality.

Code content is essential for technical documentation. Nuxt UI provides beautiful syntax highlighting, automatic language detection, and interactive features like copy buttons to enhance the developer experience.

Inline Code

Inline code snippets with syntax highlighting and customizable colors.

inline code

`inline code`

Colored Inline Code

You can specify the color of inline code using the color prop. Defaults to neutral.

inline code

`inline code`{color="error"}

Language Specification

Use the lang prop to specify the language for proper semantic styling:

nuxt.config.ts

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

string

color

'neutral'

"error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral"

Code Blocks

Code blocks with syntax highlighting powered by Shiki.

Basic Code Blocks

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

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

Code Blocks with Filenames

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

Supported Languages

Nuxt UI supports syntax highlighting for dozens of programming languages:

App.vue
<template>
  <div>
    <h1>{{ message }}</h1>
    <UButton @click="updateMessage">
      Click me
    </UButton>
  </div>
</template>

<script setup>
const message = ref('Hello World!')

function updateMessage() {
  message.value = 'Button clicked!'
}
</script>

```vue [App.vue]
<template>
  <div>
    <h1>{{ message }}</h1>
    <UButton @click="updateMessage">
      Click me
    </UButton>
  </div>
</template>

<script setup>
const message = ref('Hello World!')

function updateMessage() {
  message.value = 'Button clicked!'
}
</script>
```

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 Diffs

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

Configuration

Syntax Highlighting

Syntax Highlighting: By default, material-theme-lighter and material-theme-palenight VSCode themes are used for light & dark modes. Customize this in your nuxt.config.ts through the content.build.markdown.highlight key.

Code Icons

Code Icons: Some icons are predefined, but you can add more 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

Copy Button: Every code block includes a built-in copy button. Customize the icons in your app.config.ts:
app.config.ts
export default defineAppConfig({
  ui: {
    icons: {
      copy: 'i-lucide-copy',
      copyCheck: 'i-lucide-copy-check'
    }
  }
})
Prop Default Type
icon

string

code

string

language

string

filename

string

highlights

number[]

hideHeader

boolean

meta

string

ui

{ root?: ClassNameValue; header?: ClassNameValue; filename?: ClassNameValue; icon?: ClassNameValue; copy?: ClassNameValue; base?: ClassNameValue; }

Images and Embeds

Responsive images with zoom functionality and rich media embeds for interactive content.

Vue Components

Specialized Vue components for enhanced content authoring and interactive documentation.