Function: CodeBlock()
CodeBlock(
snippet:string|string[],options?:object):CodeBlockElement
Code snippet component with syntax highlighting powered by the Shiki TextMate engine and interactive line/multi-line drag focus.
Parameters
| Parameter | Type | Description |
|---|---|---|
snippet | string | string[] | - |
options | { align?: Align; blur?: number; brightness?: number; className?: string; color?: string; customPositioned?: boolean; enterDelay?: number; enterDuration?: number; exitDelay?: number; exitDuration?: number; height?: Size; id?: string; interactive?: boolean; lang?: string; onActivate?: () => void; onDeactivate?: () => void; onMount?: () => void; onUnmount?: () => void; opacity?: number; origin?: ElementAnchor; position?: Position; rotation?: number; scale?: number; size?: Size; style?: Properties<0 | string & object, string & object>; syntaxTheme?: string; theme?: Partial<ThemeConfig>; width?: Size; x?: PositionCoord; y?: PositionCoord; } | - |
options.align? | Align | - |
options.blur? | number | Blur in virtual pixels (default: 0). |
options.brightness? | number | Brightness multiplier (default: 1). |
options.className? | string | - |
options.color? | string | Foreground CSS color (default: component/theme color). |
options.customPositioned? | boolean | Whether this element manages its own CSS transform / positioning (disables stage translate3d). |
options.enterDelay? | number | Delay in seconds before entering scene transition begins. |
options.enterDuration? | number | Duration in seconds for entering scene transition. |
options.exitDelay? | number | Delay in seconds before exiting scene transition begins. |
options.exitDuration? | number | Duration in seconds for exiting scene transition. |
options.height? | Size | Height in stage units or CSS length (default: content size). |
options.id? | string | - |
options.interactive? | boolean | Whether clicking or dragging lines focuses them interactively. Defaults to true. |
options.lang? | string | Code language (default: "typescript"). |
options.onActivate? | () => void | - |
options.onDeactivate? | () => void | - |
options.onMount? | () => void | - |
options.onUnmount? | () => void | - |
options.opacity? | number | Whole-element opacity from 0 to 1 (default: 1). |
options.origin? | ElementAnchor | Which point of the element sits on its coordinate (default: "top-left"). |
options.position? | Position | - |
options.rotation? | number | Rotation in degrees (default: 0). |
options.scale? | number | Scale multiplier (default: 1). |
options.size? | Size | Both dimensions in stage units or CSS length (default: unset). |
options.style? | Properties<0 | string & object, string & object> | - |
options.syntaxTheme? | string | Shiki syntax theme (default: "vitesse-dark"). |
options.theme? | Partial<ThemeConfig> | - |
options.width? | Size | Width in stage units or CSS length (default: content size). |
options.x? | PositionCoord | Horizontal position in stage units (default: 0). |
options.y? | PositionCoord | Vertical position in stage units (default: 0). |