CodePreview

For clearer docs, pair code snippets with their visual output and source.

Wrap any content with the code-preview component to display a live preview alongside its source code using the code slot.

inline code

`inline code`

::code-preview
`inline code`

#code
```mdc
`inline code`
```
::

API

Props

Prop	Default	Type
`b24ui`		`{ root?: ClassNameValue; preview?: ClassNameValue; code?: ClassNameValue; }`

Slots

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

Theme

app.config.ts

export default defineAppConfig({
  b24ui: {
    prose: {
      codePreview: {
        slots: {
          root: 'my-5',
          preview: 'flex justify-center border border-(--ui-color-design-tinted-na-stroke) 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 bitrix24UIPluginVite from '@bitrix24/b24ui-nuxt/vite'

export default defineConfig({
  plugins: [
    vue(),
    bitrix24UIPluginVite({
      b24ui: {
        prose: {
          codePreview: {
            slots: {
              root: 'my-5',
              preview: 'flex justify-center border border-(--ui-color-design-tinted-na-stroke) relative p-4 rounded-md',
              code: '[&>div>pre]:rounded-t-none [&>div]:my-0'
            },
            variants: {
              code: {
                true: {
                  preview: 'border-b-0 rounded-b-none'
                }
              }
            }
          }
        }
      }
    })
  ]
})

CodeGroup

Use a tabbed layout to present multiple code snippets for a clearer view.

Collapsible

Smooth content toggle with expand and collapse effects.

CodePreview

Usage

API

Props

Slots

Theme