Essentials

Code Blocks

Display inline code and code blocks

Basic

Inline Code

Use inline code to display code snippets within text paragraphs. It's ideal for referencing code elements directly in sentences.

inline code

`inline code`

Code Blocks

Use code blocks to display multi-line code snippets with syntax highlighting. Code blocks are essential for presenting code examples clearly.

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

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

When writing a code-block, you can specify a filename that will be displayed on top of the code block. An icon will be automatically displayed based on the extension or the name. Filenames help users understand the code's location and purpose within a project.

nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui-pro']
})

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  modules: ['@nuxt/ui-pro']
})
```
Some icons are already defined by default, but you can add more in your app.config.ts through the uiPro.prose.codeIcon key:
app.config.ts
export default defineAppConfig({
  uiPro: {
    prose: {
      codeIcon: {
        terminal: 'i-ph-terminal-window-duotone'
      }
    }
  }
})

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

Highlight Line

To highlight lines of code, add {} around the line numbers you want to highlight. Line highlighting is useful for focusing users on important parts of code examples.

nuxt.config.ts
export default defineAppConfig({
  ui: {
    icons: {
      copy: 'i-lucide-copy',
      copyCheck: 'i-lucide-copy-check'
    }
  }
})

```ts [nuxt.config.ts]{4-5}
export default defineAppConfig({
  ui: {
    icons: {
      copy: 'i-lucide-copy',
      copyCheck: 'i-lucide-copy-check'
    }
  }
})
```

Advanced

CodeGroup

Group code blocks in tabs using code-group. code-group is perfect for showing code examples in multiple languages or package managers.

pnpm add @nuxt/ui-pro@next

:::code-group

```bash [pnpm]
pnpm add @nuxt/ui-pro@next
```

```bash [yarn]
yarn add @nuxt/ui-pro@next
```

```bash [npm]
npm install @nuxt/ui-pro@next
```

```bash [bun]
bun add @nuxt/ui-pro@next
```

::
Like the ProsePre component, the CodeGroup handles filenames, icons and copy button.

CodeTree

Display code blocks in a file tree view using code-tree. code-tree is excellent for showcasing project structures and file relationships.

app/app.config.ts
export default defineAppConfig({
  ui: {
    colors: {
      primary: 'sky',
      colors: 'slate'
    }
  }
})
Learn more about the code-tree component.

CodePreview

Use code-preview to show code output alongside the code. code-preview is ideal for interactive examples and demonstrating code results. Write the code to be previewed in a the default slot and the actual code in the code slot.

inline code

`inline code`

::code-preview
`inline code`

#code
```mdc
`inline code`
```
::

CodeCollapse

Use code-collapse for long code blocks to keep pages clean. code-collapse allows users to expand code blocks only when needed, improving readability.

main.css
@import "tailwindcss";
@import "@nuxt/ui-pro";

@theme {
  --font-sans: 'Public Sans', sans-serif;

  --breakpoint-3xl: 1920px;

  --color-green-50: #EFFDF5;
  --color-green-100: #D9FBE8;
  --color-green-200: #B3F5D1;
  --color-green-300: #75EDAE;
  --color-green-400: #00DC82;
  --color-green-500: #00C16A;
  --color-green-600: #00A155;
  --color-green-700: #007F45;
  --color-green-800: #016538;
  --color-green-900: #0A5331;
  --color-green-950: #052E16;
}

::code-collapse

```css [main.css]
@import "tailwindcss";
@import "@nuxt/ui-pro";

@theme {
  --font-sans: 'Public Sans', sans-serif;

  --breakpoint-3xl: 1920px;

  --color-green-50: #EFFDF5;
  --color-green-100: #D9FBE8;
  --color-green-200: #B3F5D1;
  --color-green-300: #75EDAE;
  --color-green-400: #00DC82;
  --color-green-500: #00C16A;
  --color-green-600: #00A155;
  --color-green-700: #007F45;
  --color-green-800: #016538;
  --color-green-900: #0A5331;
  --color-green-950: #052E16;
}
```

::

Markdown Syntax

Text, title, and styling in standard markdown.

Prose Components

Components to help you structure your content.