Der Code

Anzeige von Inline-Code und Syntax-hervorgehobenen Codeblöcken mit Copy-to-Clipboard-Unterstützung.

code Blöcke

Codeblöcke werden von der ProsePre-Komponente mit Syntax-Hervorhebung von Shiki gerendert.

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

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

Language (englisch)

Syntax-Hervorhebung ist für Dutzende von Programmiersprachen verfügbar.

<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
xp043x nicht
const message = ref ('Hallo Welt!')

Funktion updateMessage (){
  message. value ='Button geklickt!'
}
x044x

x045x Bearbeiten
  xp046x nicht
    <h1> {{ message }} </h1> {</h1>} </h1> {{ message }} </h1> {</h1>} </h1> {</h1>} </h1> {</h1>} </h1> {</h1>} </h1>} </h1> {</h1>} </h1>} </h1> {</h1>} </h1>} </h1>
    x050x Bearbeiten
      klick mich
    x051x Bearbeiten
  x052x Bearbeiten
xp053x Bearbeiten
```
Standardmäßig werden die Shiki-Designs material-theme-lighter und material-theme-palenight für den hellen bzw. dunklen Modus verwendet. Wenn Sie @nuxt/content verwenden, können Sie dies über die Taste [content.build.markdown.highlight](xph0666xxph0x ändern. Konfigurieren Sie Themes über die Taste mdc.highlight. Wenn Sie Comark verwenden, konfigurieren Sie Themes über die Plugin-Optionen shiki.Um den Dark Mode mit Comark zu unterstützen, fügen Sie Ihrem Stylesheet das folgende CSS hinzu:
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;
}

Filename (englisch)

Code-Blöcke unterstützen Dateinamenanzeige mit automatischer Icon-Erkennung.

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

```ts [nuxt.config.ts]
default export defineNuxtConfig ({Dateiendung})
  Module: ['@ nuxt/ui']
})
```
Das Dateinamensymbol wird von der ProseCodeIcon-Komponente gerendert und enthält eine Reihe vordefinierter Symbole, die Sie in Ihrer App-Konfiguration anpassen können:
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'
          }
        }
      }
    })
  ]
})
Diese Dateinamensymbole stammen aus der Sammlung vscode-icons, die von den lucide-Symbolen getrennt ist, die der Rest der Komponenten verwendet, und werden bei Bedarf aus der Dateierweiterung aufgelöst. Installieren Sie @iconify-json/vscode-icons, um sie lokal und offline zu bedienen, genau wie jede andere Sammlung.

Copy-Button hinzufügen

Jeder Codeblock hat eine eingebaute Kopiertaste, die den Code in Ihre Zwischenablage kopiert.

Setzen Sie die copy-Prop auf false, um die Schaltfläche auszublenden, oder übergeben Sie Button-Props, um sie anzupassen.

Sie können das Symbol über die Tasten ui.icons.copy und ui.icons.copyCheck in Ihrer App-Konfiguration ändern:
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-Hervorhebung

Markieren Sie bestimmte Linien, um die Aufmerksamkeit auf wichtige Teile zu lenken.

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

```ts [nuxt.config.ts] {2}
default export defineNuxtConfig ({Dateiendung})
  modules: ['@ nuxt/ui'],//Diese Zeile wird hervorgehoben
  css: ['~/assets/css/main.css']
})
```

code diff (englisch)

Verwenden Sie die diff-Sprache, um Änderungen zwischen Codeversionen anzuzeigen.

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

```diff [nuxt.config.ts]
default export defineNuxtConfig ({Dateiendung})
  Module: )
-   '@ nuxt/ui-pro 'ist ein
+   '@ nuxt/ui 'ist ein
  ]
})
```

Inline-Code eingeben

Inline-Code-Snippets werden von der ProseCode-Komponente gerendert.

x206x Bearbeiten

Color (englisch)

Verwenden Sie die color-prop, um die Farbe des Inline-Codes zu ändern. Standardmäßig neutral.

inline code (nicht)

`inline code`{color="error"}

Lang Bearbeiten

Verwenden Sie die lang-prop, um die Sprache des Inline-Codes anzugeben.

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.