---
title: "Code Blocks"
description: "[object Object]"
canonical_url: "https://docs.mhaibaraai.cn/en/docs/typography/code-blocks"
---
# Code Blocks

> [object Object]

## Basic usage

### Inline code

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

```mdc
`inline code`
```

### Code blocks

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

````mdc
```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.

````mdc
```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.

> [!TIP]
> See: https://ui.nuxt.com/getting-started/icons/nuxt#theme
> 
> The icons are defined by default, but you can customize them in `app/app.config.ts`:
> 
> ```ts [app/app.config.ts]
> 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.

````mdc
:::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.

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

  css: ['~/assets/css/main.css']
})
```

```css [app/assets/css/main.css]
@import "tailwindcss";
@import "@nuxt/ui";
```

```ts [app/app.config.ts]
export default defineAppConfig({
  ui: {
    colors: {
      primary: 'sky',
      colors: 'slate'
    }
  }
})
```

```vue [app/app.vue]
<template>
  <UApp>
    <NuxtPage />
  </UApp>
</template>
```

```json [package.json]
{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "lint": "eslint .",
    "lint:fix": "eslint --fix ."
  },
  "dependencies": {
    "@iconify-json/lucide": "^1.2.18",
    "@nuxt/ui": "^4.0.0",
    "nuxt": "^4.3.0",
  },
  "devDependencies": {
    "eslint": "^9.34.0",
    "typescript": "^5.9.3",
    "vue-tsc": "^3.0.6"
  }
}
```

```json [tsconfig.json]
{
  "extends": "./.nuxt/tsconfig.json"
}
```

````md [md] [README.md]
# Nuxt 4 Minimal Starter

Look at the [Nuxt 4 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.

## Setup

Make sure to install the dependencies:

```bash
# npm
npm install

# pnpm
pnpm install

# yarn
yarn install

# bun
bun install
```

## Development Server

Start the development server on `http://localhost:3000`:

```bash
# npm
npm run dev

# pnpm
pnpm run dev

# yarn
yarn dev

# bun
bun run dev
```

## Production

Build the application for production:

```bash
# npm
npm run build

# pnpm
pnpm run build

# yarn
yarn build

# bun
bun run build
```

Locally preview production build:

```bash
# npm
npm run preview

# pnpm
pnpm run preview

# yarn
yarn preview

# bun
bun run preview
```

Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
````

### `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.

````mdc
::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.

````mdc
::code-collapse

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

@theme {
--font-sans: 'Alibaba PuHuiTi', 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;
}
```

::
````


## Sitemap

See the full [sitemap](https://docs.mhaibaraai.cn/sitemap.md) for all pages.