CodeBlock and SyntaxTheme are exported from @astryx-vue/core/Code. Inline Code, the tokenizer, and the copy helper are documented on the Code page.

CodeBlock props

Name	Type	Default	Description
code	string	—	The read-only code. The copy button writes this string.
language	string	'plaintext'	Tokenizer language. plaintext hides the language label.
syntaxTheme	SyntaxThemeDefinition	—	Syntax colors for this block. Shorthand for wrapping it in SyntaxTheme.
title	string	—	Filename or label in the header.
hasLanguageLabel	boolean	true	Whether the language name appears in the header.
hasLineNumbers	boolean	false	Whether to draw a line number gutter.
highlightLines	number[]	—	One-indexed lines to emphasize. On a diff row, the highlight replaces the diff tint.
isDiff	boolean	false	Paint the snippet as a unified diff. Text after the glyph keeps the language syntax colors. Copy still writes the original string.
hasCopyButton	boolean	true	Whether to show the copy button.
isWrapped	boolean	false	Whether long lines wrap instead of scrolling sideways.
maxHeight	number | string	—	Maximum height before the body scrolls. Numbers are pixels.
isCollapsible	boolean	false	Whether the header can collapse the body once the line count reaches the threshold.
collapsibleThreshold	number	10	Lines required before the collapse control appears.
size	'sm' | 'md'	'md'	Text size.
width	string	'fit-content'	CSS width. 100% fills the parent.
container	'card' | 'section'	'card'	section drops the border, radius, and background.
tokenizer	(code, language) => SyntaxToken[]	—	Custom tokenizer. Tokens use absolute offsets and do not replace the copied text.
highlightMode	'auto' | 'ranges' | 'spans'	'auto'	How tokens are painted.
copyLabel	string	'Copy code'	Accessible name of the copy control before a copy.
copiedLabel	string	'Copied'	Name and announcement after a successful copy.
codeLabel	string	'Code'	Accessible name of the code viewport.

CodeBlock events

• copy: emitted after the code string was written to the clipboard.

SyntaxTheme

Name	Type	Description
theme	SyntaxThemeDefinition	A preset or a defineSyntaxTheme() result. A [light, dark] tuple is stored as light-dark(). The component page is Syntax Theme.

The default slot is the content that should pick up those colors, usually one or more CodeBlocks.

githubDark sets --astryx-code-syntax-* and --astryx-code-block-background. A dark background also sets --astryx-code-block-border to white at 12% opacity. Diff colors are optional slots in that same list: added, removed, diff-header, added-marker, and removed-marker. When a syntax theme leaves them out, markers follow its punctuation color, the header row gets no extra paint, and the added and removed tints stay on the page theme's slots.