Vorschau ProseCodePreview

Zeigen Sie Codebeispiele mit einer Vorschau und deren Quelle an, um eine klarere Dokumentation zu erhalten.

Bearbeiten

Wickeln Sie alle Inhalte mit der code-preview-Komponente ein, um eine Live-Vorschau neben dem Quellcode mit dem code-Steckplatz anzuzeigen.

x004x Bearbeiten

`inline code`

::code-preview
`inline code`

#code
```mdc
x014x ist
```
::

API (Englisch)

Props (englisch)

Prop	Default	Type
`ui`		`{ root?: SlotClass; preview?: SlotClass; code?: SlotClass; }`

Slots (englisch)

Slot	Type
`default`	`{}`
`code`	`{}`

Theme Bearbeiten

app.config.ts

export default defineAppConfig({
  ui: {
    prose: {
      codePreview: {
        slots: {
          root: 'my-5',
          preview: 'flex justify-center border border-muted relative p-4 rounded-md',
          code: '[&>div>pre]:rounded-t-none [&>div]:my-0'
        },
        variants: {
          code: {
            true: {
              preview: 'border-b-0 rounded-b-none'
            }
          }
        }
      }
    }
  }
})

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: {
          codePreview: {
            slots: {
              root: 'my-5',
              preview: 'flex justify-center border border-muted relative p-4 rounded-md',
              code: '[&>div>pre]:rounded-t-none [&>div]:my-0'
            },
            variants: {
              code: {
                true: {
                  preview: 'border-b-0 rounded-b-none'
                }
              }
            }
          }
        }
      }
    })
  ]
})

Changelog (englisch)

No recent changes

CodeGroup

Group multiple code examples in tabbed interfaces for easy comparison.

CodeTree

Visualize file and folder structures with syntax-highlighted code.