将任何内容用 code-preview 组件包裹，并使用 code 插槽显示实时预览及其源代码。
内联代码
`inline code`
::code-preview
`inline code`
#code
```mdc
`inline code`
```
::
| 属性 | 默认值 | 类型 |
|---|---|---|
ui |
|
| 插槽 | 类型 |
|---|---|
default |
|
代码 |
|
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'
}
}
}
}
}
}
})
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'
}
}
}
}
}
}
})
]
})
5cb65— 特性：导入 @nuxt/ui-pro 组件