CodePreview

Learn how to use the ProseCodePreview component in your Nuxt app.

Wrap a code-block with the code-preview component to display a preview of an MDC component and its code using the code slot.

inline code

`inline code`
::code-preview
`inline code`

#code
```mdc
`inline 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'
                }
              }
            }
          }
        }
      }
    })
  ]
})

Changelog

No recent changes