CodeBlock

Cargo featurefeatures = ["cs"]

View Markdown Open in Claude Open in ChatGPT

CodeBlock shows source code on a panel in a monospaced style (JetBrains Mono by default, ship it in media/), with line numbers and colours from a small tokenizer for Language::Rust, Python, JavaScript, Html and Pseudo (Plain has none): keywords, strings, numbers, comments, called names and capitalised names. HTML tag names, attributes and values are coloured too. Strings and comments end with their line. The panel is as wide as the longest line, or width pixels with longer lines ending in …. lines lights one line (from 1, 0 for none) a step, one step every step_time seconds from delay; give it the same timing as another figure’s trace and it follows that figure step for step: the bar slides to the line and the others dim to dim. tokenize(line, language) gives the coloured pieces. Gallery scene: CodeBlock (a binary search with its Python code).

CodeBlock demo, first frame — `CodeBlock` 9 s

use fframes_kit::prelude::*;
use fframes_kit::kits::cs::{Token, tokenize};

let pieces = tokenize("return mid  # found", Language::Python);
assert_eq!(pieces[0], (Token::Keyword, "return"));
assert_eq!(pieces.last(), Some(&(Token::Comment, "# found")));

fn code<'a>(ui: &mut Ui<'a, '_, '_>, trace: &'a ArrayTrace, lines: Vec<usize>) -> Svgr<'a> {
    // lines[i] is the line that step i of `trace` runs
    let search = ui.show(ArrayView { trace: Some(trace), step_time: 0.9, ..ui.defaults() });
    let code = ui.show(CodeBlock {
        code: "while lo <= hi:\n    mid = (lo + hi) // 2".into(),
        language: Language::Python,
        lines,
        step_time: 0.9,
        center: (0.0, -1.5),
        ..ui.defaults()
    });
    fframes::svgr!(<g>{search}{code}</g>)
}

API

Components are plain structs. Set the fields you need and fill the rest with ..ui.defaults(): the defaults below come from the current theme (theme. values are fields of Theme).

CodeBlock

Field	Type	Default	Description
`code`	`Cow<str>`	`Cow::Borrowed("")`	The source text, one line per line; tabs count as four spaces.
`language`	`Language`	`Language::Rust`	The language, for keyword and comment colours.
`lines`	`Vec<usize>`	`Vec::new()`	The line lit at each step, counted from 1; 0 lights none. One step every `step_time` seconds.
`delay`	`f32`	`0.0`	Seconds after the container’s start before the first step.
`step_time`	`f32`	`0.8`	Seconds each step takes; the bar slides to the next line within it.
`center`	`(f64, f64)`	`(0.0, 0.0)`	The middle of the panel, in units of `ui.space`.
`width`	`f32`	`0.0`	Width of the panel in pixels; 0 fits the longest line, and longer lines end with an ellipsis.
`padding`	`f32`	`28.0`	Space between the panel’s edge and the text in pixels.
`line_numbers`	`bool`	`true`	Whether each line is numbered.
`dim`	`f32`	`0.55`	Opacity of the lines that are not lit while a line is lit.
`style`	`TextStyle`	—	The font: a monospaced family, size in pixels and weight.
`colors`	`CodeColors`	`CodeColors::themed(theme)`	Colours of the panel, the bar and each kind of token.
`enter`	`Option<FadeIn>`	`None`	Fade in at the start; `None` for none.
`exit`	`Option<FadeOut>`	`None`	Fade out before the end; `None` for none.

Feature cs · Source