CodeBlock

Renders accessible source with an optional file header, copy and wrap actions, line emphasis, and serializable Shiki tokens.@gemologic/sheen-code · content

Playground

This example has no scalar controls. Its validated source remains interactive below.

ready.tsReadiness examplets

Highlighted lines: 1

1const ready: boolean = true;

<CodeBlock code={source} language="ts" filename="ready.ts" label="Readiness example" lineNumbers showLanguage copyable wrapToggle highlightedLines={[1]} />

Variant matrix

Copyable TypeScript file

ready.tsReadiness examplets

Highlighted lines: 1

1const ready: boolean = true;

Anatomy

Package

@gemologic/sheen-code

Source

packages/code/src/CodeBlock.tsx

Tokens

--sheen-color-bg-raised
--sheen-color-border
--sheen-color-fg
--sheen-color-fg-muted
--sheen-color-accent
--sheen-color-focus-ring
--sheen-color-focus-ring-offset
--sheen-font-mono
--sheen-text-code-size

Accessibility

Role: figure with a focusable preformatted region and optional header actionsKeyboard: Tab focuses copy, wrap, and scroll controls, Enter or Space activates a focused header action

Do

Precompute highlightCode in a server loader or build step when syntax color is required.
Pass the exact accepted source to copy and highlight; retain the CodeBlock owner during refresh.

Do not

Do not run the highlighter during component render or replace accepted code while refreshing tokens.
Do not use highlighted lines as the only indication of an error or status.

Generated props

Name	Type	Default	Description
`code` *	`string`	—	Exact source text to render.
`language` *	`string`	—	Language identifier used for labeling and highlighted-output validation.
`highlighted`	`HighlightedCode`	—	Optional serializable result produced by highlightCode in a loader or build step.
`highlightedLines`	`readonly CodeHighlightedLine[]`	—	One-based line numbers or inclusive ranges to emphasize visually and describe to assistive technology.
`label`	`string`	—	Visible caption and accessible name for the code region.
`filename`	`string`	—	Optional filename rendered in the header and used as the fallback accessible name.
`lineNumbers`	`boolean`	`false`	Shows non-selectable line numbers.
`showLanguage`	`boolean`	`false`	Shows the language identifier in the header.
`copyable`	`boolean`	`false`	Shows an action that copies the exact source through the browser Clipboard API.
`wrapToggle`	`boolean`	`false`	Shows an accessible control for changing line wrapping.
`wrapped`	`boolean`	—	Controlled wrapping state.
`defaultWrapped`	`boolean`	`false`	Initial uncontrolled wrapping state.
`onWrappedChange`	`(wrapped: boolean) => void`	—	Receives a proposed wrapping state in controlled or uncontrolled use.
`onCopyError`	`(error: unknown) => void`	—	Receives a Clipboard API failure; raw errors are never rendered.

Native Solid/HTML attributes remain available and are omitted from this authored-prop view.