HelixOverviewDocsComponentsSandboxTheme builderCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
Code BlockView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA block of code, with somewhere to put its name and a way to take it.StableSince 0.1.0TypographyUsageimport'@fusion.dev/helix/code-block'import'@fusion.dev/helix-headless/code-block'Preview
API ReferenceRoothelix-code-blockA block of code, with somewhere to put its name and a way to take it.
PropTypeDefaultDescriptionlabelstring""What to call this block, usually a file name or a language.noCopybooleanfalseWhether to leave the copy button off.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The code.
PartDescriptionblockThe scrolling `<pre>`.codeThe `<code>` inside it.copyThe copy button.copy-buttonThe inner button.copy-markThe clipboard glyph, and the confirmation that replaces it.copy-tooltipThe bubble, forwarded from the tooltip inside.copy-tooltip-arrowThe point, resting against the trigger.frameThe code and the copy button beside it.headerThe bar carrying the name, where there is one.labelThe file name or language, where one is given.
CSS PropertyDescription--code-block-backdropA filter over what shows through the block and its header, for a translucent ground.--code-block-background-colorThe ground behind the code, for a block that is not on the page.--code-block-border-colorThe line around the block and its header.--code-block-header-background-colorThe ground behind the name, where it should not be `surface-raised`.--code-block-radiusThe corner on the header's top and the block's bottom, which are one shape.
Roothelix-headless-code-blockA block of code, with somewhere to put its name and a way to take it.
PropTypeDefaultDescriptionlabelstring""What to call this block, usually a file name or a language.noCopybooleanfalseWhether to leave the copy button off.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The code.
PartDescriptionblockThe scrolling `<pre>`.codeThe `<code>` inside it.copyThe copy button.copy-buttonThe inner button.copy-markThe clipboard glyph, and the confirmation that replaces it.copy-tooltipThe bubble, forwarded from the tooltip inside.copy-tooltip-arrowThe point, resting against the trigger.frameThe code and the copy button beside it.headerThe bar carrying the name, where there is one.labelThe file name or language, where one is given.
ExamplesNameDescriptionBareA block with no name and nothing to copy, which draws no header.PreviewA named block of code with a copy button over it.PreviewA named block of code with a copy button over it.