Props

Code

Name	Type	Default	Description
color	CodeColor	'primary'	Text color of the inline code: primary, secondary, or inherit for the surrounding text color.
size	'inherit'	-	Font size. Omit it to use the code type scale, or set inherit to adopt the surrounding font size and line height.

CodeBlock

Name	Type	Default	Description
code	string	-	The read-only code to display. This exact string is what the copy button writes, whatever the block paints.
language	string	'plaintext'	Language used for syntax highlighting. An unknown language renders without tokens, and plaintext also hides the language label.
title	string	-	Filename or label shown in the header bar. A title alone creates the header.
hasLanguageLabel	boolean	true	Whether the language name appears in the header. It is never shown for plaintext.
hasLineNumbers	boolean	false	Whether to draw a line number gutter. The gutter is sized to the widest number.
highlightLines	number[]	-	One-indexed line numbers to emphasize with an accent background. Out-of-range numbers have no effect.
hasCopyButton	boolean	true	Whether to show the copy button, in the header when there is one and floating at the top end otherwise.
isWrapped	boolean	false	Whether long lines wrap instead of scrolling horizontally.
maxHeight	number | string	-	Maximum height before the code body scrolls vertically. Numbers are pixels, so 0 is a valid zero-pixel bound.
isCollapsible	boolean	false	Whether the header collapses the body. The control only appears when the header is visible and the code reaches collapsibleThreshold lines.
collapsibleThreshold	number	10	Number of lines a block needs before the collapse control appears.
size	'sm' | 'md'	'md'	Text size variant. md uses the code type scale and sm the supporting size.
width	string	'fit-content'	Any CSS width value. fit-content shrinks to the longest line with a floor so a short snippet still reads as a block; 100% fills the parent.
container	'card' | 'section'	'card'	Container presentation. card paints a border, radius, and background; section drops all three so the block blends into the surface it sits in.
tokenizer	(code: string, language: string) => SyntaxToken[]	-	Custom tokenizer for a language the built-in one does not cover. Tokens use absolute offsets. It changes paint only, never the displayed or copied text.
highlightMode	'auto' | 'ranges' | 'spans'	'auto'	How syntax tokens are painted. auto prefers the CSS Custom Highlight API and falls back to span elements.
copyLabel	string	'Copy code'	Accessible name and hover hint of the copy button before a copy.
copiedLabel	string	'Copied'	Name of the copy button and text of the polite announcement after a successful copy.
codeLabel	string	'Code'	Accessible name of the code viewport, and of a collapsible header that has no visible title or language label.

Events

Name	Payload	Description
copy	-	Emitted after the code string was written to the clipboard. A rejected write emits nothing.

Slots

Name	Description
default	Inline code content for Code. CodeBlock takes its content from the code prop and renders no slot.

Exports

These are exported from @astryx-vue/core/Code beside the two components:

Name	Signature	Description
tokenize	(code, language) => TokenLine[]	Tokenize a string into one token array per line, with offsets relative to the line start. Returns nothing for an unknown language.
tokenizeAsync	(code, language, signal?) => Promise<TokenLine[]>	The same result, yielding to the main thread between chunks. An aborted signal returns the lines finished so far.
flatTokensToLines	(tokens, code) => TokenLine[]	Convert tokens with absolute offsets, as a custom tokenizer returns them, into line-relative tokens.
applyHighlightRanges	(element, tokenLines) => () => void	Paint tokens through the CSS Custom Highlight API and return the cleanup function.
useCopyToClipboard	(options?) => { copy, isCopied }	Copy-to-clipboard behavior with a transient copied flag. Re-copying restarts the reset timer, which is two seconds by default.
SYNC_TOKENIZE_THRESHOLD	number	Code length below which tokenization runs synchronously; longer code is tokenized in chunks.
HIGHLIGHTED_TOKEN_TYPES	readonly string[]	Token types the stylesheet already paints, so a custom tokenizer can reuse them.

CSS variables

The block reads these tokens, which the neutral theme defines:

Name	Description
--astryx-font-family-code	Monospace font stack for inline code, the block, and the header.
--astryx-text-code-size	Font size of inline code and of an md block.
--astryx-code-background	Background of inline code.
--astryx-code-block-background	Background of the block and its sticky header. A section container sets it to transparent.
--astryx-code-block-border	Border of a card container, the header divider, and the line number rule.
--astryx-code-block-focus	Focus ring of the collapsible header control.
--astryx-code-block-highlight-background	Background of a line listed in highlightLines.
--astryx-code-syntax-*	Token colors: keyword, string, comment, number, function, type, variable, operator, constant, tag, attribute, property, and punctuation.

Native attributes

The root element of Code is a <code>, and the root element of CodeBlock is a <pre>.

The following go to that root element:

• HTML attributes.
• aria-* attributes.
• data-* attributes.
• class.
• style.

class and style are composed with the component's own, and a width in style wins over the width prop. The copy button, the code viewport, and the collapse region are internal elements with their own accessible names, so they are not addressed through the root.