Blocs de code

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

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.

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

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

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.

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

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

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

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

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.

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

::

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.

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

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

::code-preview
`code en ligne`

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

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é.

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

::