CodeBlock

API reference and demos for CodeBlock.

Source

Import

import { CodeBlock } from "@flanksource/clicky-ui/data";

Demos

Type Script · Open in Storybook

Interactive Json · Open in Storybook

Chroma Xml · Open in Storybook

The props table documents the component-specific surface. Standard DOM attributes inherited from React, such as className, event handlers, and accessibility attributes, may also be accepted when the component’s prop type extends a native element.

Props

Prop	Type	Default	Description
bare	boolean	false	Render only the code — no border, background, or language header.
className	string	—	Classes applied to the code block shell.
copyable	boolean	false	Show a copy-to-clipboard button in the header (ignored when `bare`).
diff	{ original: string; modified: string; } | { unified: string; }	—	Render a language-aware diff instead of highlighting `source`.
diffView	enum	—	Diff layout when `diff` is set. Defaults to `unified`.
downloadable	boolean	false	Show a download button in the header (ignored when `bare`).
downloadFilename	string	—	Name of the downloaded file. Defaults to `snippet.<extension of language>`.
highlightedHtml	string	—	Trusted server-rendered highlighted HTML, sanitized before rendering.
inline	boolean	false	Render as a single truncated line for a table cell: no border, header, or wrap, whitespace collapsed to one line, syntax-colored when highlighting is available, with the collapsed source (up to 2,000 chars) in a title tooltip. Only the leading 500 chars are rendered and highlighted — the cell clips long before that. The full block is what a row-detail dialog should show instead.
jsonDefaultOpenDepth	number	2	Default expansion depth when rendering JSON as a tree.
jsonFormat	enum	json	Display format for parsed JSON values.
language	string	—	Language label and highlighter hint, e.g. `json`, `tsx`, or `bash`.
source	string	—	Raw source code to render or highlight.
themeToggle	boolean	false	Show a per-block light/dark theme toggle in the header (ignored when `bare`).