Skip to main content

15_markdown/
15_markdown.rs

1//! Example 15: Markdown Rendering
2//!
3//! Demonstrates the markdown rendering capabilities with a split view
4//! showing raw markdown on the left and rendered output on the right.
5//!
6//! Run with: cargo run -p telex-tui --example 15_markdown
7
8use crossterm::event::KeyCode;
9use telex::prelude::*;
10use telex::Color;
11
12telex::require_api!(0, 2);
13
14fn main() {
15    telex::run_with_theme(App, telex::theme::Theme::nord()).unwrap();
16}
17
18struct App;
19
20const DEMO_MARKDOWN: &str = r#"# Markdown Demo
21
22This is **bold** and *italic*.
23
24## Code
25
26Inline `code` and blocks:
27
28```rust
29fn main() {
30    println!("Hello!");
31}
32```
33
34## Lists
35
36- First item
37- Second item
38  - Nested item
39
401. Step one
412. Step two
42
43## Blockquote
44
45> A wise quote
46> spans lines.
47
48---
49
50*The end.*
51"#;
52
53impl Component for App {
54    fn render(&self, cx: Scope) -> View {
55        let show_help = state!(cx, || false);
56
57        // F1 toggles help
58        cx.use_command(
59            KeyBinding::key(KeyCode::F(1)),
60            with!(show_help => move || show_help.update(|v| *v = !*v)),
61        );
62
63        let rendered = telex::markdown::render(DEMO_MARKDOWN);
64
65        View::vstack()
66            .child(
67                View::styled_text("Markdown Rendering Demo")
68                    .color(Color::Cyan)
69                    .bold()
70                    .build(),
71            )
72            .child(
73                View::boxed()
74                    .flex(1)
75                    .child(
76                        View::split()
77                            .horizontal()
78                            .ratio(0.4)
79                            .first(
80                                View::vstack()
81                                    .child(View::styled_text(" Source ").bold().build())
82                                    .child(
83                                        View::boxed()
84                                            .flex(1)
85                                            .border(true)
86                                            .scroll(true)
87                                            .child(View::text(DEMO_MARKDOWN))
88                                            .build(),
89                                    )
90                                    .build(),
91                            )
92                            .second(
93                                View::vstack()
94                                    .child(View::styled_text(" Rendered ").bold().build())
95                                    .child(
96                                        View::boxed()
97                                            .flex(1)
98                                            .border(true)
99                                            .scroll(true)
100                                            .child(rendered)
101                                            .build(),
102                                    )
103                                    .build(),
104                            )
105                            .build(),
106                    )
107                    .build(),
108            )
109            .child(
110                View::styled_text("Tab: switch panes | ↑↓/jk: scroll | F1 help | Ctrl+Q: quit")
111                    .dim()
112                    .build(),
113            )
114            .child(
115                View::modal()
116                    .visible(show_help.get())
117                    .title("Example 15: Markdown")
118                    .on_dismiss(with!(show_help => move || show_help.set(false)))
119                    .child(
120                        View::vstack()
121                            .child(View::styled_text("What you're seeing").bold().build())
122                            .child(View::text("• Side-by-side markdown source and rendered"))
123                            .child(View::text("• Full markdown syntax support"))
124                            .child(View::text("• Scrollable panes for long content"))
125                            .child(View::gap(1))
126                            .child(View::styled_text("Key concepts").bold().build())
127                            .child(View::text("• telex::markdown::render() parses markdown"))
128                            .child(View::text("• Returns a View tree with styled text"))
129                            .child(View::text("• Code blocks, lists, quotes, headers"))
130                            .child(View::text("• Split view for comparison"))
131                            .child(View::gap(1))
132                            .child(View::styled_text("Try this").bold().build())
133                            .child(View::text("• Tab between source and rendered panes"))
134                            .child(View::text("• Scroll with arrow keys or j/k"))
135                            .child(View::text("• Compare source with rendered output"))
136                            .child(View::gap(1))
137                            .child(View::styled_text("Next up").bold().build())
138                            .child(View::text("→ 16_progress: progress bars"))
139                            .child(View::gap(1))
140                            .child(View::styled_text("Press Escape to close").dim().build())
141                            .build(),
142                    )
143                    .build(),
144            )
145            .build()
146    }
147}