ProseCodePreview (프로세코드프리뷰)
코드 예제를 미리 보기 및 소스와 함께 표시하여 문서를 보다 명확하게 표시합니다.
Usage
code-preview 구성 요소를 사용하여 code 슬롯을 사용하여 소스 코드와 함께 라이브 미리 보기를 표시합니다.
inline code 이미지
`inline code`
::code-preview
`inline code`
#code
```mdc
`inline code`
```
::
API
Props 코드
| Prop | Default | Type |
|---|---|---|
ui | { root?: SlotClass; preview?: SlotClass; code?: SlotClass; } |
Slots
| Slot | Type |
|---|---|
default | {} |
code | {} |
Theme (## 테마)
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'
}
}
}
}
}
}
})
]
})변경 로그
No recent changes