# CodeBlock

> 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…

Page: https://fframes-kit.pages.dev/docs/computer-science/code-block/
Cargo feature: `cs` (`fframes-kit = { version = "..", features = ["cs"] }`)

`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).

Gallery clip of `CodeBlock`: https://fframes-kit.pages.dev/media/scenes/CodeBlock-8ca2743b.mp4

```rust
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](https://github.com/khanhthanhdev/fframes-kit/blob/main/fframes-kit/src/kits/cs/code.rs#L368)