gpui-kit GitHub

Scenes

code-view

Builds CodeView

code-view in the dark theme
studio-dark
code-view in the light theme
studio-light

The code that drew it

A still frame holds a repeating animation at its first frame and a one-shot at its last, because a still of a moving thing is not reproducible. Run the gallery to review motion.

fn code_view(_window: &mut Window, cx: &mut App) -> AnyElement {
    let theme = cx.theme().clone();
    // Spans are the caller's, in byte offsets into each line. Nothing here
    // parses anything.
    let lines = [
        CodeLine::new(40, "fn report(&self) -> Outcome {").spans([
            CodeSpan {
                range: 0..2,
                tone: Tone::Accent,
            },
            CodeSpan {
                range: 3..9,
                tone: Tone::Success,
            },
        ]),
        CodeLine::new(41, "    let verified = self.check();")
            .spans([CodeSpan {
                range: 4..7,
                tone: Tone::Accent,
            }])
            .mark(LineMark::Added),
        CodeLine::new(42, "    let stale = self.cached();").mark(LineMark::Removed),
        CodeLine::new(43, "    Outcome::from(verified)").mark(LineMark::Changed),
        CodeLine::new(
            44,
            "    // this line runs off the edge rather than wrapping, because a column carries meaning in code",
        ),
        CodeLine::new(45, "}").mark(LineMark::Error),
    ];
    stack(&theme)
        .w(px(620.0))
        .child(caption(
            &theme,
            "line numbers are the file's, marks are the host's, colour is the caller's",
        ))
        .child(CodeView::new("scene.code.report", lines).language("rust"))
        .into_any_element()
}