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.
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.
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"}