CodeHighlight
@stellaria/nebula-webCodeHighlightPropsPreview
Props
15| Prop | Type | Default |
|---|---|---|
className | string | — |
code | string | — |
collapsedHeight The height it folds to. Ignored without `expandable`. | number | 240 |
color | ColorExtended | "primary" |
expandable Folds the block and offers a button. The `pre` keeps its scroll, so nothing becomes unreachable. | boolean | false |
filename | ReactNode | — |
firstLine | number | 1 |
glass The blur step, only with `variant="glass"`. | GlassLevel | "subtle" |
html | string | — |
labels | Partial<CodeHighlightLabels> | — |
lang | string | — |
maxHeight | number | — |
variant Without it the block keeps its own calibrated surface, which is not a variant of the map. | CodeHighlightVariant | — |
withCopy | boolean | true |
withLineNumbers | boolean | false |
Slot props
5Each one spreads over an inner element, so you can restyle a region without forking the component.
| Prop | Type | Default |
|---|---|---|
copyProps The copy button, in the header or floating. The component computes its `value`. | Omit<ButtonCopyProps, "value"> | — |
filenameProps The header label, which renders `filename` and falls back to `lang` when there is none. | TextSlotProps | — |
floatingCopyProps The floating anchor for the copy button. It only exists WITHOUT a header: with one, the button goes inside it. | BoxSlotProps | — |
headerProps The header. Only rendered with `filename` or `lang`. | BoxSlotProps | — |
preProps The code block, which is the focusable region with an accessible name. The line numbers and the code have no slot: they share a line metric, and separating them knocks the numbers out of line. | Omit<DetailedHTMLProps<HTMLAttributes<HTMLPreElement>, HTMLPreElement>, "ref"> | — |
Also accepts
On top of its own props, this component forwards these groups.