code

Afficher le code en ligne et les blocs de code surlignés avec support de copie vers presse-papiers.

Code blocs

Les blocs de code sont rendus par le composant ProsePre avec la mise en évidence de syntaxe optimisée par Shiki.

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

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

Langue électronique

La surbrillance syntaxique est disponible pour des dizaines de langages de programmation.

<script setup lang="ts">
const message = ref('Hello World!')

function updateMessage() {
  message.value = 'Button clicked!'
}
</script>

<template>
  <div>
    <h1>{{ message }}</h1>
    <UButton @click="updateMessage">
      Click me
    </UButton>
  </div>
</template>

```vue
<script setup lang="ts">
const message = ref ('Hello World!')

fonction updateMessage (){
  message. value ="Bouton cliqué!"
}
</script>

Xph045x
  <div>
    <h1> {{ message }} </h1> {{ message }}
    <UButton @click="updateMessage">
      Cliquez moi
    </UButton>
  </div>
</template>
```
Par défaut, les thèmes Shiki material-theme-lighter et material-theme-palenight sont utilisés respectivement pour le mode clair et le mode sombre. Lorsque vous utilisez @nuxt/content, vous pouvez modifier cela via la touche content.build.markdown.highlight dans votre nuxt.config.ts. Lorsque vous utilisez @nuxtjs/mdc autonome, configure les thèmes via la clé mdc.highlight. Lorsque vous utilisez [Comarkxph073https://comark.dev), configurez les thèmes via les options du plugin shiki.Pour prendre en charge le mode sombre avec Comark, ajoutez le CSS suivant à votre feuille de style:
main.css
html.dark .shiki span {
  color: var(--shiki-dark) !important;
  background-color: var(--shiki-dark-bg) !important;
  font-style: var(--shiki-dark-font-style) !important;
  font-weight: var(--shiki-dark-font-weight) !important;
  text-decoration: var(--shiki-dark-text-decoration) !important;
}

Fichier

Les blocs de code prennent en charge l'affichage du nom de fichier avec détection automatique d'icônes.

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

```ts [nuxt.config.ts]
export default définition ({
  modules: ['@ nuxt/ui']
})
```
El icono del nombre de archivo es representado por el componente ProseCodeIcon y contiene un conjunto de iconos predefinidos que puede personalizar en la configuración de su aplicación:
app/app.config.ts
export default defineAppConfig({
  ui: {
    prose: {
      codeIcon: {
        terminal: 'i-lucide-square-terminal',
        config: 'i-lucide-settings',
        package: 'i-lucide-package'
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        prose: {
          codeIcon: {
            terminal: 'i-lucide-square-terminal',
            config: 'i-lucide-settings',
            package: 'i-lucide-package'
          }
        }
      }
    })
  ]
})
Ces icônes de nom de fichier proviennent de la collection vscode-icons, qui est séparée des icônes lucide utilisées par le reste des composants, et sont résolues à la demande à partir de l'extension de fichier.

bouton ### Copy

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

Réglez l'accessoire copy sur false pour masquer le bouton, ou passez les accessoires Button pour le personnaliser.

Vous pouvez modifier l'icône à l'aide des touches ui.icons.copy et ui.icons.copyCheck dans la configuration de votre application:
app/app.config.ts
export default defineAppConfig({
  ui: {
    icons: {
      copy: 'i-lucide-copy',
      copyCheck: 'i-lucide-copy-check'
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        icons: {
          copy: 'i-lucide-copy',
          copyCheck: 'i-lucide-copy-check'
        }
      }
    })
  ]
})

Line soulignant

Mettez en surbrillance des lignes spécifiques pour attirer l'attention sur les parties importantes.

nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'], // This line is highlighted
  css: ['~/assets/css/main.css']
})

```ts [nuxt.config.ts] {2}
export default définition ({
  modules: ['@ nuxt/ui'],//Cette ligne est surlignée
  css: ['/assets/css/main.css']
})
```

Code diff

Utilisez le langage diff pour afficher les changements entre les versions du code.

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

```diff [nuxt.config.ts]
export default définition ({
  Modules: [
-   '@ nuxt/ui-pro '
+   '@ nuxt/ui '
  ]
})
```

Inline code d'accès

Les extraits de code en ligne sont rendus par le composant ProseCode.

inline code

couleur

Utilisez la prop color pour changer la couleur du code en ligne. Par défaut, neutral.

inline codex{color="error"}

`inline code`{color="error"}

lang

Utilisez la prop lang pour spécifier la langue du code en ligne.

nuxt.config.tsx{lang="ts-type"}

`nuxt.config.ts`{lang="ts-type"}

Images and embeds

Responsive images, videos, and rich media embeds to enhance and illustrate your documentation.

Accordion

Create expandable content sections for better information organization.