---
title: "Blocs de code"
description: "Affichez du code en ligne et des blocs de code dans votre documentation."
canonical_url: "https://docus.dev/fr/essentials/code-blocks"
---
# Blocs de code

> Affichez du code en ligne et des blocs de code dans votre documentation.

## Basique

### Code en ligne

Utilisez le code en ligne pour afficher des extraits de code dans les paragraphes. Idéal pour référencer des éléments de code directement dans les phrases.

<code-preview className="[&>div]:*:my-0">

`code en ligne`<template v-slot:code="">

```mdc
`code en ligne`
```

</template>
</code-preview>

### Blocs de code

Utilisez les blocs de code pour afficher des extraits de code multi-lignes avec coloration syntaxique. Les blocs de code sont essentiels pour présenter clairement des exemples de code.

<code-preview className="[&>div]:*:my-0,[&>div]:*:w-full">

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

<template v-slot:code="">

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

</template>
</code-preview>

Lorsque vous écrivez un bloc de code, vous pouvez spécifier un nom de fichier qui sera affiché au-dessus du bloc. Une icône sera automatiquement affichée selon l'extension ou le nom.
Les noms de fichiers aident les utilisateurs à comprendre l'emplacement et le but du code dans un projet.

<code-preview className="[&>div]:*:my-0,[&>div]:*:w-full">

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

<template v-slot:code="">

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

</template>
</code-preview>

Chaque bloc de code possède un bouton de copie intégré qui permet de copier le code dans le presse-papiers.

<tip to="https://ui.nuxt.com/getting-started/icons/nuxt#theme">

Les icônes sont déjà définies par défaut, mais vous pouvez les personnaliser dans votre `app.config.ts` :

```ts [app.config.ts]
export default defineAppConfig({
  ui: {
    prose: {
      codeIcon: {
        terminal: 'i-ph-terminal-window-duotone'
      }
    }
  }
})
```

</tip>

## Avancé

### CodeGroup

Groupez des blocs de code dans des onglets avec `code-group`. `code-group` est parfait pour montrer des exemples de code dans plusieurs langages ou gestionnaires de paquets.

<code-preview className="[&>div]:*:my-0,[&>div]:*:w-full">
<code-group className="w-full">

```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-group>

<template v-slot:code="">

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

::
```

</template>
</code-preview>

### CodeTree

Affichez des blocs de code dans une vue arborescente avec `code-tree`. `code-tree` est excellent pour présenter des structures de projet et des relations de fichiers.

<code-preview className="[&>div]:*:my-0,[&>div]:*:w-full">
<code-tree default-value="app/app.config.ts">

```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",
    "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

Consultez la [documentation Nuxt 4](https://nuxt.com/docs/getting-started/introduction) pour en savoir plus.

## Installation

Assurez-vous d'installer les dépendances :

```bash
# npm
npm install

# pnpm
pnpm install

# yarn
yarn install

# bun
bun install
```

## Serveur de développement

Démarrez le serveur de développement sur `http://localhost:3000` :

```bash
# npm
npm run dev

# pnpm
pnpm run dev

# yarn
yarn dev

# bun
bun run dev
```

## Production

Construisez l'application pour la production :

```bash
# npm
npm run build

# pnpm
pnpm run build

# yarn
yarn build

# bun
bun run build
```

Prévisualisez localement la build de production :

```bash
# npm
npm run preview

# pnpm
pnpm run preview

# yarn
yarn preview

# bun
bun run preview
```

Consultez la [documentation de déploiement](https://nuxt.com/docs/getting-started/deployment) pour plus d'informations.
```

</code-tree>
</code-preview>

### `CodePreview`

Utilisez `code-preview` pour afficher le résultat du code à côté du code. `code-preview` est idéal pour les exemples interactifs et la démonstration de résultats de code.
Écrivez le code à prévisualiser dans le slot `default` et le code réel dans le slot `code`.

<code-preview className="[&>div]:*:my-0,[&>div]:*:w-full" label="Aperçu">
<code-preview className="[&>div]:*:my-0">

`code en ligne`<template v-slot:code="">

```mdc
`code en ligne`
```

</template>
</code-preview>

<template v-slot:code="">

```mdc
::code-preview
`code en ligne`

#code
```mdc
`code en ligne`
```
::
```

</template>
</code-preview>

### `CodeCollapse`

Utilisez `code-collapse` pour les longs blocs de code afin de garder les pages propres. `code-collapse` permet aux utilisateurs de déplier les blocs de code uniquement si besoin, améliorant ainsi la lisibilité.

<code-preview className="[&>div]:*:my-0,[&>div]:*:w-full">
<code-collapse className="[&>div]:my-0">

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

</code-collapse>

<template v-slot:code="">

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

::
```

</template>
</code-preview>


## Sitemap

See the full [sitemap](https://docus.dev/sitemap.md) for all pages.