CodePreview - Bitrix24 UI

Usage

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

https://github.com/bitrix24/b24ui/tree/main/src/theme/code-preview.ts

export default {
  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.