397 lines
6.7 KiB
Markdown
397 lines
6.7 KiB
Markdown
---
|
|
title: Code Blocks
|
|
description: Display inline code and code blocks in your documentation.
|
|
navigation:
|
|
icon: i-lucide-code-xml
|
|
---
|
|
|
|
## Basic
|
|
|
|
### Inline Code
|
|
|
|
Use inline code to display code snippets within text paragraphs. It's ideal for referencing code elements directly in sentences.
|
|
|
|
::code-preview
|
|
---
|
|
class: "[&>div]:*:my-0"
|
|
---
|
|
`inline code`
|
|
|
|
#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.
|
|
|
|
::code-preview
|
|
---
|
|
class: "[&>div]:*:my-0 [&>div]:*:w-full"
|
|
---
|
|
```ts
|
|
export default defineNuxtConfig({
|
|
modules: ['@nuxt/ui-pro']
|
|
})
|
|
```
|
|
|
|
#code
|
|
````mdc
|
|
```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.
|
|
|
|
::code-preview
|
|
---
|
|
class: "[&>div]:*:my-0 [&>div]:*:w-full"
|
|
---
|
|
```ts [nuxt.config.ts]
|
|
export default defineNuxtConfig({
|
|
modules: ['@nuxt/ui-pro']
|
|
})
|
|
```
|
|
|
|
#code
|
|
````mdc
|
|
```ts [nuxt.config.ts]
|
|
export default defineNuxtConfig({
|
|
modules: ['@nuxt/ui-pro']
|
|
})
|
|
```
|
|
````
|
|
::
|
|
|
|
Every code-block has a built-in copy button that will copy the code to your clipboard.
|
|
|
|
::tip{to="https://ui.nuxt.com/getting-started/icons/nuxt#theme"}
|
|
Icons are already defined by default, but you can customize them in your `app.config.ts`:
|
|
|
|
```ts [app.config.ts]
|
|
export default defineAppConfig({
|
|
uiPro: {
|
|
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.
|
|
|
|
::code-preview
|
|
---
|
|
class: "[&>div]:*:my-0 [&>div]:*:w-full"
|
|
---
|
|
:::code-group{.w-full}
|
|
```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
|
|
```
|
|
:::
|
|
|
|
#code
|
|
````mdc
|
|
:::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
|
|
```
|
|
|
|
::
|
|
````
|
|
::
|
|
|
|
### CodeTree
|
|
|
|
Display code blocks in a file tree view using `code-tree`. `code-tree` is excellent for showcasing project structures and file relationships.
|
|
|
|
::code-preview{class="[&>div]:*:my-0 [&>div]:*:w-full"}
|
|
:::code-tree{default-value="app/app.config.ts"}
|
|
```ts [nuxt.config.ts]
|
|
export default defineNuxtConfig({
|
|
modules: ['@nuxt/ui-pro'],
|
|
|
|
future: {
|
|
compatibilityVersion: 4
|
|
},
|
|
|
|
css: ['~/assets/css/main.css']
|
|
})
|
|
|
|
```
|
|
|
|
```css [app/assets/css/main.css]
|
|
@import "tailwindcss";
|
|
@import "@nuxt/ui-pro";
|
|
```
|
|
|
|
```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",
|
|
"postinstall": "nuxt prepare",
|
|
"lint": "eslint .",
|
|
"lint:fix": "eslint --fix ."
|
|
},
|
|
"dependencies": {
|
|
"@iconify-json/lucide": "^1.2.18",
|
|
"@nuxt/ui-pro": "3.0.0-alpha.10",
|
|
"nuxt": "^3.15.1"
|
|
},
|
|
"devDependencies": {
|
|
"eslint": "9.20.1",
|
|
"typescript": "^5.7.2",
|
|
"vue-tsc": "^2.2.0"
|
|
}
|
|
}
|
|
```
|
|
|
|
```json [tsconfig.json]
|
|
{
|
|
"extends": "./.nuxt/tsconfig.json"
|
|
}
|
|
```
|
|
|
|
````md [README.md]
|
|
# Nuxt 3 Minimal Starter
|
|
|
|
Look at the [Nuxt 3 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 a the `default` slot and the actual code in the `code` slot.
|
|
|
|
::code-preview
|
|
---
|
|
class: "[&>div]:*:my-0 [&>div]:*:w-full"
|
|
label: Preview
|
|
---
|
|
:::code-preview
|
|
---
|
|
class: "[&>div]:*:my-0"
|
|
---
|
|
`inline code`
|
|
|
|
#code
|
|
```mdc
|
|
`inline code`
|
|
```
|
|
:::
|
|
|
|
#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.
|
|
|
|
::code-preview
|
|
---
|
|
class: "[&>div]:*:my-0 [&>div]:*:w-full"
|
|
---
|
|
:::code-collapse{class="[&>div]:my-0"}
|
|
```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;
|
|
}
|
|
```
|
|
:::
|
|
|
|
#code
|
|
````mdc
|
|
::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;
|
|
}
|
|
```
|
|
|
|
::
|
|
````
|
|
::
|