1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
use blaeck::prelude::*;
pub fn build_ui() -> Element {
let rust_code = r#"fn main() {
let message = "Hello, world!";
println!("{}", message);
for i in 0..5 {
println!("Count: {}", i);
}
}"#;
let python_code = r#"def greet(name):
"""Greet someone by name."""
return f"Hello, {name}!"
if __name__ == "__main__":
print(greet("World"))"#;
let json_code = r#"{
"name": "blaeck",
"version": "0.1.0",
"features": ["syntax", "animation"],
"enabled": true
}"#;
Element::node::<Box>(
BoxProps {
flex_direction: FlexDirection::Column,
padding: 1.0,
gap: 1.0,
..Default::default()
},
vec![
// Title
Element::node::<Text>(
TextProps {
content: "Syntax Highlighting Demo".into(),
bold: true,
color: Some(Color::Cyan),
..Default::default()
},
vec![],
),
// Rust code with line numbers
Element::node::<Box>(
BoxProps {
flex_direction: FlexDirection::Column,
border_style: BorderStyle::Single,
padding: 1.0,
..Default::default()
},
vec![
Element::node::<Text>(
TextProps {
content: "Rust (Ocean Dark theme):".into(),
bold: true,
color: Some(Color::Yellow),
..Default::default()
},
vec![],
),
Element::node::<SyntaxHighlight>(
SyntaxHighlightProps::new(rust_code)
.language("rust")
.theme(SyntaxTheme::OceanDark)
.with_line_numbers(),
vec![],
),
],
),
// Python code
Element::node::<Box>(
BoxProps {
flex_direction: FlexDirection::Column,
border_style: BorderStyle::Single,
padding: 1.0,
..Default::default()
},
vec![
Element::node::<Text>(
TextProps {
content: "Python (Ocean Dark theme):".into(),
bold: true,
color: Some(Color::Blue),
..Default::default()
},
vec![],
),
Element::node::<SyntaxHighlight>(
SyntaxHighlightProps::new(python_code)
.language("python")
.theme(SyntaxTheme::OceanDark)
.line_numbers(LineNumberStyle::Padded),
vec![],
),
],
),
// JSON code
Element::node::<Box>(
BoxProps {
flex_direction: FlexDirection::Column,
border_style: BorderStyle::Single,
padding: 1.0,
..Default::default()
},
vec![
Element::node::<Text>(
TextProps {
content: "JSON (Eighties Dark theme):".into(),
bold: true,
color: Some(Color::Green),
..Default::default()
},
vec![],
),
Element::node::<SyntaxHighlight>(
SyntaxHighlightProps::new(json_code)
.language("json")
.theme(SyntaxTheme::EightiesDark),
vec![],
),
],
),
],
)
}