CodeDisplay

Open in Playground

Read-only code block with a copy button. Optional title, language caption, lineNumbers, wrap and maxHeight. Code is colored by language (js, jsx, ts, tsx, json, bash, sh, html, xml, svg, css, scss, apache, htaccess, nginx, yaml, yml; other languages stay plain, or pass your own tokenizer as highlighter) with a palette that follows the light / dark theme; turn it off with highlight={false} or override any color with colors.

jsx

1import { Button } from 'xedonium'2 3export default function App() {4	return <Button>Bello!</Button>5}

// Custom paletteconst bananas = 42export const greet = name => `Bello ${name}`

Props

CodeDisplay

codestring
Code to show.
languagestring
Caption shown in the header, and the syntax colors: js, jsx, ts, tsx, json, bash, sh, html, xml, svg, css, scss, apache, htaccess, nginx, yaml, yml (other values stay plain).
titlestring
Header text; overrides language as the caption.
lineNumbersboolean
Default: false
Show line numbers.
copyableboolean
Default: true
Show a copy button.
wrapboolean
Default: false
Wrap long lines instead of scrolling.
maxHeightnumber | string
Maximum height before the block scrolls.
highlightboolean
Default: true
Color the code by syntax (see language for the supported languages).
colorsCodeColors
Override the theme-aware default colors with any CSS colors; see the CodeDisplayColors table below.
highlighter(code, language) => Segment[][]
Your own tokenizer: one array of { kind, text } segments per line (kind is a token kind or null). Used instead of the built-in languages.
classNamestring
Default: ''
Extra classes for the root element.

CodeDisplay props
Prop	Type	Default	Description
`code`	string	–	Code to show.
`language`	string	–	Caption shown in the header, and the syntax colors: js, jsx, ts, tsx, json, bash, sh, html, xml, svg, css, scss, apache, htaccess, nginx, yaml, yml (other values stay plain).
`title`	string	–	Header text; overrides `language` as the caption.
`lineNumbers`	boolean	`false`	Show line numbers.
`copyable`	boolean	`true`	Show a copy button.
`wrap`	boolean	`false`	Wrap long lines instead of scrolling.
`maxHeight`	number \| string	–	Maximum height before the block scrolls.
`highlight`	boolean	`true`	Color the code by syntax (see `language` for the supported languages).
`colors`	CodeColors	–	Override the theme-aware default colors with any CSS colors; see the CodeDisplayColors table below.
`highlighter`	(code, language) => Segment[][]	–	Your own tokenizer: one array of { kind, text } segments per line (kind is a token kind or null). Used instead of the built-in languages.
`className`	string	`''`	Extra classes for the root element.

CodeDisplayColors

commentstring
Default: --xd-tok-comment
Comments.
stringstring
Default: --xd-tok-string
Quoted strings and attribute values.
keywordstring
Default: --xd-tok-keyword
Keywords, at-rules and directives.
tagstring
Default: --xd-tok-tag
Tags and CSS selectors.
attrstring
Default: --xd-tok-attr
Attribute names, object keys and CSS properties.
numberstring
Default: --xd-tok-number
Numbers, units and hex colors.
fnstring
Default: --xd-tok-fn
Function names and expressions.
textstring
Color of everything that is not highlighted. The theme text color by default.
backgroundstring
Background of the code block. The theme card color by default.

CodeDisplayColors props
Prop	Type	Default	Description
`comment`	string	`--xd-tok-comment`	Comments.
`string`	string	`--xd-tok-string`	Quoted strings and attribute values.
`keyword`	string	`--xd-tok-keyword`	Keywords, at-rules and directives.
`tag`	string	`--xd-tok-tag`	Tags and CSS selectors.
`attr`	string	`--xd-tok-attr`	Attribute names, object keys and CSS properties.
`number`	string	`--xd-tok-number`	Numbers, units and hex colors.
`fn`	string	`--xd-tok-fn`	Function names and expressions.
`text`	string	–	Color of everything that is not highlighted. The theme text color by default.
`background`	string	–	Background of the code block. The theme card color by default.