---
title: "Code Blocks"
description: "Display inline code and code blocks in your documentation."
canonical_url: "https://docus.dev/en/essentials/code-blocks"
---
# Code Blocks
> Display inline code and code blocks in your documentation.
## 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`
```mdc
`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.
```ts
export default defineNuxtConfig({
modules: ['@nuxt/ui']
})
```
```mdc
```ts
export default defineNuxtConfig({
modules: ['@nuxt/ui']
})
```
```
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.
```ts [nuxt.config.ts]
export default defineNuxtConfig({
modules: ['@nuxt/ui']
})
```
```mdc
```ts [nuxt.config.ts]
export default defineNuxtConfig({
modules: ['@nuxt/ui']
})
```
```
Every code-block has a built-in copy button that will copy the code to your clipboard.
Icons are already defined by default, but you can customize them in your `app.config.ts`:
```ts [app.config.ts]
export default defineAppConfig({
ui: {
prose: {
codeIcon: {
terminal: 'i-ph-terminal-window-duotone'
}
}
}
})
```
## Advanced
### CodeGroup
Group code blocks in tabs using `code-group`. `code-group` is perfect for showing code examples in multiple languages or package managers.
```bash [pnpm]
pnpm add @nuxt/ui
```
```bash [yarn]
yarn add @nuxt/ui
```
```bash [npm]
npm install @nuxt/ui
```
```bash [bun]
bun add @nuxt/ui
```
```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
```
::
```
### CodeTree
Display code blocks in a file tree view using `code-tree`. `code-tree` is excellent for showcasing project structures and file relationships.
```ts [nuxt.config.ts]
export default defineNuxtConfig({
modules: ['@nuxt/ui'],
future: {
compatibilityVersion: 4
},
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]
```
```json [package.json]
{
"name": "nuxt-app",
"private": true,
"type": "module",
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare",
"lint": "eslint .",
"lint:fix": "eslint --fix ."
},
"dependencies": {
"@iconify-json/lucide": "^1.2.18",
"@nuxt/ui": "^4.0.0",
"nuxt": "^4.1.0"
},
"devDependencies": {
"eslint": "^9.34.0",
"typescript": "^5.9.3",
"vue-tsc": "^3.0.6"
}
}
```
```json [tsconfig.json]
{
"extends": "./.nuxt/tsconfig.json"
}
```
```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 show code output alongside the code. `code-preview` is ideal for interactive examples and demonstrating code results.
Write the code to be previewed in the `default` slot and the actual code in the `code` slot.
`inline code`
```mdc
`inline code`
```
```mdc
::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.
```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;
}
```
```mdc
::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;
}
```
::
```
## Sitemap
See the full [sitemap](https://docus.dev/sitemap.md) for all pages.