Code Blocks

Basic usage

Inline code

Wrap inline code in backticks, which is great for referencing code elements within a sentence.

`inline code`

Code blocks

Use three backticks to display multi-line code with syntax highlighting.

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

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

When writing a code block, you can specify a filename to display at the top of the block. The icon is matched automatically based on the file extension or name. This helps users understand where the code lives in the project and what it is for.

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

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

Every code block has a built-in copy button, making it easy for users to copy the code to their clipboard.

export default defineAppConfig({
  ui: {
    prose: {
      codeIcon: {
        terminal: 'i-ph-terminal-window-duotone'
      }
    }
  }
})

Advanced usage

Code groups

Use the code-group component to group multiple code blocks into tabs, which is great for showing code examples across multiple languages or package managers.

pnpm add @nuxt/ui

yarn add @nuxt/ui

npm install @nuxt/ui

bun add @nuxt/ui

:::code-group

```bash [pnpm]
pnpm add @nuxt/ui
```

```bash [yarn]
yarn add @nuxt/ui
```

```bash [npm]
npm install @nuxt/ui
```

```bash [bun]
bun add @nuxt/ui
```

::

Code tree

Use code-tree to display code blocks in a file-tree view. code-tree is great for showing project structure and file relationships.

export default defineAppConfig({
  ui: {
    colors: {
      primary: 'sky',
      colors: 'slate'
    }
  }
})

CodePreview

Use code-preview to display code output side by side with the code. code-preview is great for interactive examples and demonstrating code results. Write the code to preview in the default slot, and the actual code in the code slot.

`inline code`

::code-preview
`inline code`

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

CodeCollapse

Use code-collapse for long code blocks to keep the page tidy. code-collapse lets users expand the code block only when they need to, improving readability.

@import "tailwindcss";
@import "@nuxt/ui";

@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";

@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;
}
```

::