Code

Toon inline code en door syntaxis gemarkeerde codeblokken met ondersteuning voor kopiëren naar klembord.

Code blokken

Codeblokken worden weergegeven door de ProsePre-component met syntaxisaccentuering aangedreven door Shiki.

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

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

Taal

Syntaxisaccentuering is beschikbaar voor tientallen programmeertalen.

<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 ('Hallo Wereld!')

functie updateMessage () {
message.value = 'Knop aangeklikt!'
}
</script>

<template>
<div>
<h1> {{ message }} </h1>
<UButton @click="updateMessage">
Klik mij
</UButton>
</div>
</template>
```
Standaard worden material-theme-lighter en material-theme-palenight Shiki thema 's gebruikt voor respectievelijk de lichte en donkere modus. Wanneer u @nuxt/content gebruikt, kunt u dit wijzigen via de content.build.markdown.highlight in uw nuxt.config.ts. Wanneer u standalone @nuxtjs/mdc gebruikt, configureert u thema 's via de mdc.highlight . Wanneer u Comark gebruikt, configureert u thema 's via de shiki-plug-inopties.Om de donkere modus met Comark te ondersteunen, voegt u de volgende CSS toe aan uw stylesheet:
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;
}

Bestandsnaam

Codeblokken ondersteunen bestandsnaamweergave met automatische pictogramdetectie.

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

```ts [nuxt.config.ts]
export standaard defineNuxtConfig ({
modules: ['@ nuxt / ui']
})
```
Het bestandsnaampictogram wordt weergegeven door de ProseCodeIcon-component en bevat een set vooraf gedefinieerde pictogrammen die u kunt aanpassen in uw app-configuratie:
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'
          }
        }
      }
    })
  ]
})
Deze bestandsnaampictogrammen komen uit de vscode-icons collectie, die los staat van de lucide-pictogrammen die de rest van de componenten gebruikt, en worden op verzoek opgelost vanuit de bestandsextensie. Installeer @iconify-json/vscode-icons om ze lokaal en offline te bedienen, net als elke andere collectie.

Kopieer knop

Elk codeblok heeft een ingebouwde kopieerknop die de code naar uw klembord kopieert.

Stel de copy prop in op false om de knop te verbergen, of geef Button rekwisieten door om het aan te passen.

U kunt het pictogram wijzigen via de ui.icons.copy- en ui.icons.copyCheck-toetsen in uw app-configuratie:
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 accentuering

Markeer specifieke lijnen om de aandacht te vestigen op belangrijke onderdelen.

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

```ts [nuxt.config.ts] {2}
export standaard defineNuxtConfig ({
modules: ['@ nuxt / ui'], / / Deze regel is gemarkeerd
css: ['~ / assets / css / hoofd.css']
})
```

Code diff

Gebruik de diff-taal om wijzigingen tussen codeversies weer te geven.

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

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

Inline code

Inline codefragmenten worden weergegeven door de ProseCode-component.

inline code

Kleur

Gebruik de color prop om de kleur van de inline code te wijzigen. Standaard neutral.

inline code

`inline code`{color="error"}

Lang

Gebruik de lang prop om de taal van de inline code op te geven.

nuxt.config.ts

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