eQuantic.UIeQuantic.UI
Docs
Playground
GitHub
DocsLists & data
CodeBlock
View source
1 min read
Read-only syntax-highlighted code with gutter markers, decorations and its own virtualized viewport. CodeEditor adds a caret and keyboard.
1
using eQuantic.UI.Components;
DEFAULT
1
2
var page = new DocsPage();
return page.Build(context);
line numbers + highlighting
Usage
1
2
3
4
5
6
7
8
new CodeBlock(document, language)
{
ShowLineNumbers = true,
FirstLineNumber = 1,
ActiveLine = _line,
Caption = "Program.cs",
OnCopy = () => Toast.Show("Copied"),
}
API
Prop
Type
Default
Description
Document
CodeDocument
The line document model.
Language
ICodeLanguage
One of the six supported languages.
ShowLineNumbers
bool
true
Gutter numbers.
FirstLineNumber
int
1
Numbering offset for excerpts.
MaxHeight
float
0
Caps the viewport; the block scrolls internally.
Size
SizeVariant
Small
Type scale of the code.
Inverse
bool
false
Dark code surface on a light page.
GutterMarkers
IReadOnlyList<CodeGutterMarker>
[]
Breakpoints, diff marks, annotations.
Decorations
IReadOnlyList<CodeDecoration>
[]
Ranges highlighted inside the text.
ActiveLine
int?
null
Line to emphasise.
Caption
string?
null
File name or description above the block.
OnCopy
Action?
null
Copy affordance handler.
OnGutterPressed
Action<int>?
null
Gutter click, by line.
States
State
Rendering
Rest
Highlighted, read-only
Active line
Emphasised row
Scrolled
Virtualized viewport, reported through OnScrolled
Accessibility
Announced as a code region with its caption; line numbers are decorative.
When to use
Documentation, diffs, logs, read-only snippets.
Avoid
Editable code — that is CodeEditor.
NOTEEvery dimension resolves through Sizing.*(SizeVariant) and the token scales — never a literal. Source: src/eQuantic.UI.Components/CodeBlock.cs.