Code Block
Present highlighted source without an editable field.
use blinc_layout::prelude::*;
pub fn code_block_demo() -> Div {
div().class("demo-wide").child(
code("fn main() {\n let message = \"Hello, Blinc!\";\n println!(\"{message}\");\n}")
.syntax(SyntaxConfig::new(RustHighlighter::new()))
.line_numbers(true)
.font_size(13.0)
.w_full(),
)
}
@layer components {
.blinc-code {
background: var(--surface);
color: var(--text-primary);
}
.blinc-code-line-number,
.blinc-code-fold,
.blinc-code-fold-hint {
color: var(--text-tertiary);
}
.blinc-code-active-line {
background: color-mix(in srgb, var(--primary) 5%, transparent);
}
.blinc-code-selection {
background: var(--selection);
}
.blinc-code-guide {
background: color-mix(in srgb, var(--border) 55%, transparent);
}
.blinc-code-bracket {
background: color-mix(in srgb, var(--primary) 15%, transparent);
border: 1px solid color-mix(in srgb, var(--primary) 65%, transparent);
}
.blinc-code-find-match {
background: color-mix(in srgb, var(--warning) 25%, transparent);
border: 1px solid var(--warning);
}
.blinc-code-find-match[data-active] {
background: color-mix(in srgb, var(--warning) 50%, transparent);
}
.blinc-code-minimap {
border-left: 1px solid var(--border);
}
.blinc-code-minimap-slider {
background: color-mix(in srgb, var(--text-primary) 8%, transparent);
}
.blinc-code-minimap-line {
background: color-mix(in srgb, var(--text-primary) 40%, transparent);
}
.blinc-find {
background: var(--surface-elevated);
color: var(--text-primary);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 8px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.blinc-find-row {
gap: 6px;
}
.blinc-find-input {
height: 28px;
background: var(--surface-overlay);
border-width: 1px;
border-color: var(--border-secondary);
border-radius: var(--radius-md);
color: var(--text-primary);
}
.blinc-find-input:hover {
border-color: var(--text-secondary);
}
.blinc-find-input:focus {
background: var(--surface-overlay);
border-color: var(--border-focus);
}
.blinc-find-button {
border-radius: var(--radius-md);
transition: background 120ms ease;
}
.blinc-find-button:hover {
background: var(--border);
}
.blinc-find-button:active {
background: var(--border-hover);
}
.blinc-find-toggle {
border-radius: var(--radius-sm);
color: var(--text-secondary);
transition: background 120ms ease;
}
.blinc-find-toggle:hover {
background: var(--border);
color: var(--text-primary);
}
.blinc-find-toggle--on,
.blinc-find-toggle--on:hover {
background: var(--accent-subtle);
color: var(--accent);
}
.blinc-find-count {
color: var(--text-secondary);
padding: 0 6px;
}
.blinc-find-count--none {
color: var(--error);
}
}
Usage and properties
Present highlighted source without an editable field. This built-in widget is provided by blinc_layout; the polished action controls in the example use blinc_cn.
Use the installation guide to create a Blinc application. This widget is available from blinc_layout; the demo uses the same Hybrid theme as the component library. Create the fixture bindings once, and return the demo from your UI builder. Values marked Bound accept Signal/Computed sources where the API supports them; structural options configure the component at construction.
| Property | Type | Update model | This example |
|---|---|---|---|
content | string | Construction | fn main() { … } |
syntax | SyntaxConfig | Construction | RustHighlighter |
line_numbers | bool | Construction | true |
Keyboard and interaction
Informational content; no activation or Tab stop is required.
Customizing it
Add application CSS after the default component layer. These selectors are the restyling surface for this component:
.blinc-code.blinc-code-line-number.blinc-code-fold.blinc-code-gutter.blinc-code-minimap.blinc-code-minimap-slider.blinc-code-minimap-line.blinc-code-guide.blinc-code-active-line.blinc-code-selection.blinc-code-bracket.blinc-code-find-match.blinc-code-fold-hint
Theme and component variables: --blinc-code-caret, --accent.
Built-in themes
The Live theme control installs Blinc's own theme bundles, including their colours, focus rings, corner shapes and motion tokens.
pub fn theme_bundle_for(name: &str) -> blinc_theme::ThemeBundle {
match name {
"restrained" => blinc_theme::RestrainedTheme::bundle(),
"expressive" => blinc_theme::ExpressiveTheme::bundle(),
_ => blinc_theme::HybridTheme::bundle(),
}
.with_css(blinc_cn::cn_styles::CN_STYLES)
}Download the default widget and component stylesheets. Sample assets and licenses are available in the asset guide.
Documentation
From the canonical component guide.
Display syntax-highlighted code:
use blinc::layout::prelude::*;
use blinc::layout::syntax::{SyntaxConfig, RustHighlighter};
code(r#"fn main() { println!("Hello"); }"#)
.syntax(SyntaxConfig::new(RustHighlighter::new()))
.line_numbers(true)
.font_size(14.0)
.w_full()
Platforms and version
The component API is available in Blinc 0.6.0. The Live example runs in a dedicated worker and requires a compatible GPU surface. Preview and Code remain available when Live cannot start. The canvas has a descriptive label; a full screen-reader DOM mirror is not provided. The gallery integration is based on revision e2e55c24e078.
Recordings and live demos use the default Hybrid theme with bundled Noto Sans. The recording uses a 560 × 320 logical viewport at twice that resolution. Live follows its container and actual display density. Source base revision · Exact build source · Artifact versions and checksums · Font license.