--- title: "Code" description: "Display inline code and syntax-highlighted code blocks with copy-to-clipboard support." canonical_url: "https://ui.nuxt.com/docs/typography/code" last_updated: "2026-05-07" --- # 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](https://github.com/shikijs/shiki). ```ts export default defineNuxtConfig({ modules: ['@nuxt/ui'] }) ``` ```mdc ```ts export default defineNuxtConfig({ modules: ['@nuxt/ui'] }) ``` ``` ```ts /** * Props for the ProseCode component */ interface ProseCodeProps { lang?: string | undefined; color?: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral" | undefined; ui?: { base?: any; } | undefined; } ``` ```ts [app.config.ts] export default defineAppConfig({ ui: { prose: { pre: { slots: { root: 'relative my-5 group', header: 'flex items-center gap-1.5 border border-muted bg-default border-b-0 relative rounded-t-md px-4 py-3', filename: 'text-default text-sm/6', icon: 'size-4 shrink-0', copy: 'absolute top-[11px] right-[11px] lg:opacity-0 lg:group-hover:opacity-100 transition', base: 'group font-mono text-sm/6 border border-muted bg-muted rounded-md px-4 py-3 whitespace-pre-wrap wrap-break-word overflow-x-auto focus:outline-none **:[.line]:block **:[.line.highlight]:-mx-4 **:[.line.highlight]:px-4 **:[.line.highlight]:bg-accented/50!' }, variants: { filename: { true: { root: '[&>pre]:rounded-t-none [&>pre]:my-0 my-5' } } } } } } }) ``` ### Language Syntax highlighting is available for dozens of programming languages. ```vue ``` > [!TIP] > > 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`](https://content.nuxt.com/docs/getting-started/configuration#highlight) key in your `nuxt.config.ts`. When using standalone `@nuxtjs/mdc`, configure themes through the [`mdc.highlight`](https://github.com/nuxt-content/mdc#configurations) key. When using [Comark](https://comark.dev), configure themes through the `highlight` plugin options. > > To support dark mode with Comark, add the following CSS to your stylesheet: > > ```css [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. ```vue ``` > [!TIP] > > The filename icon is rendered by the `ProseCodeIcon` component and contains a set of predefined icons which you can customize in your app configuration: > > ```ts [app/app.config.ts] > export default defineAppConfig({ > ui: { > prose: { > codeIcon: { > terminal: 'i-ph-terminal-window-duotone', > config: 'i-lucide-settings', > package: 'i-lucide-package' > } > } > } > }) > ``` > > ```ts [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. > [!TIP] > > You can change the icon through the `ui.icons.copy` and `ui.icons.copyCheck` keys in your app configuration: > > ```ts [app/app.config.ts] > export default defineAppConfig({ > ui: { > icons: { > copy: 'i-lucide-copy', > copyCheck: 'i-lucide-copy-check' > } > } > }) > ``` > > ```ts [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. ```vue ``` ### Code diff Use the `diff` language to show changes between code versions. ```vue ``` ## Inline code Inline code snippets are rendered by the `ProseCode` component. `inline code` ```mdc `inline code` ``` ```ts /** * Props for the ProseCode component */ interface ProseCodeProps { lang?: string | undefined; color?: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral" | undefined; ui?: { base?: any; } | undefined; } ``` ```ts [app.config.ts] export default defineAppConfig({ ui: { prose: { code: { base: 'px-1.5 py-0.5 text-sm font-mono font-medium rounded-md inline-block', variants: { color: { primary: 'border border-primary/25 bg-primary/10 text-primary', secondary: 'border border-secondary/25 bg-secondary/10 text-secondary', success: 'border border-success/25 bg-success/10 text-success', info: 'border border-info/25 bg-info/10 text-info', warning: 'border border-warning/25 bg-warning/10 text-warning', error: 'border border-error/25 bg-error/10 text-error', neutral: 'border border-muted text-highlighted bg-muted' } }, defaultVariants: { color: 'neutral' } } } } }) ``` ### Color Use the `color` prop to change the color of the inline code. Defaults to `neutral`. ```vue ``` ### Lang Use the `lang` prop to specify the language of the inline code. ```vue ``` ## Sitemap See the full [sitemap](/sitemap.md) for all pages.

{{ message }}

{{ message }}