Enable Markdown highlighting in markdown example
This commit is contained in:
parent
7445b97df5
commit
1aa0a8fa0d
2 changed files with 18 additions and 19 deletions
|
|
@ -1,18 +1,13 @@
|
||||||
# Overview
|
# Overview
|
||||||
|
|
||||||
Inspired by [The Elm Architecture], Iced expects you to split user interfaces
|
Inspired by [The Elm Architecture], Iced expects you to split user interfaces into four different concepts:
|
||||||
into four different concepts:
|
|
||||||
|
|
||||||
* __State__ — the state of your application
|
* __State__ — the state of your application
|
||||||
* __Messages__ — user interactions or meaningful events that you care
|
* __Messages__ — user interactions or meaningful events that you care about
|
||||||
about
|
* __View logic__ — a way to display your __state__ as widgets that may produce __messages__ on user interaction
|
||||||
* __View logic__ — a way to display your __state__ as widgets that
|
* __Update logic__ — a way to react to __messages__ and update your __state__
|
||||||
may produce __messages__ on user interaction
|
|
||||||
* __Update logic__ — a way to react to __messages__ and update your
|
|
||||||
__state__
|
|
||||||
|
|
||||||
We can build something to see how this works! Let's say we want a simple counter
|
We can build something to see how this works! Let's say we want a simple counter that can be incremented and decremented using two buttons.
|
||||||
that can be incremented and decremented using two buttons.
|
|
||||||
|
|
||||||
We start by modelling the __state__ of our application:
|
We start by modelling the __state__ of our application:
|
||||||
|
|
||||||
|
|
@ -23,8 +18,7 @@ struct Counter {
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
Next, we need to define the possible user interactions of our counter:
|
Next, we need to define the possible user interactions of our counter: the button presses. These interactions are our __messages__:
|
||||||
the button presses. These interactions are our __messages__:
|
|
||||||
|
|
||||||
```rust
|
```rust
|
||||||
#[derive(Debug, Clone, Copy)]
|
#[derive(Debug, Clone, Copy)]
|
||||||
|
|
@ -34,8 +28,7 @@ pub enum Message {
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
Now, let's show the actual counter by putting it all together in our
|
Now, let's show the actual counter by putting it all together in our __view logic__:
|
||||||
__view logic__:
|
|
||||||
|
|
||||||
```rust
|
```rust
|
||||||
use iced::widget::{button, column, text, Column};
|
use iced::widget::{button, column, text, Column};
|
||||||
|
|
@ -59,8 +52,7 @@ impl Counter {
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
Finally, we need to be able to react to any produced __messages__ and change our
|
Finally, we need to be able to react to any produced __messages__ and change our __state__ accordingly in our __update logic__:
|
||||||
__state__ accordingly in our __update logic__:
|
|
||||||
|
|
||||||
```rust
|
```rust
|
||||||
impl Counter {
|
impl Counter {
|
||||||
|
|
@ -90,8 +82,7 @@ fn main() -> iced::Result {
|
||||||
Iced will automatically:
|
Iced will automatically:
|
||||||
|
|
||||||
1. Take the result of our __view logic__ and layout its widgets.
|
1. Take the result of our __view logic__ and layout its widgets.
|
||||||
1. Process events from our system and produce __messages__ for our
|
1. Process events from our system and produce __messages__ for our __update logic__.
|
||||||
__update logic__.
|
|
||||||
1. Draw the resulting user interface.
|
1. Draw the resulting user interface.
|
||||||
|
|
||||||
Read the [book], the [documentation], and the [examples] to learn more!
|
Read the [book], the [documentation], and the [examples] to learn more!
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
|
use iced::highlighter::{self, Highlighter};
|
||||||
use iced::widget::{self, markdown, row, scrollable, text_editor};
|
use iced::widget::{self, markdown, row, scrollable, text_editor};
|
||||||
use iced::{Element, Fill, Font, Task, Theme};
|
use iced::{Element, Fill, Font, Task, Theme};
|
||||||
|
|
||||||
|
|
@ -63,7 +64,14 @@ impl Markdown {
|
||||||
.on_action(Message::Edit)
|
.on_action(Message::Edit)
|
||||||
.height(Fill)
|
.height(Fill)
|
||||||
.padding(10)
|
.padding(10)
|
||||||
.font(Font::MONOSPACE);
|
.font(Font::MONOSPACE)
|
||||||
|
.highlight::<Highlighter>(
|
||||||
|
highlighter::Settings {
|
||||||
|
theme: highlighter::Theme::Base16Ocean,
|
||||||
|
token: "markdown".to_owned(),
|
||||||
|
},
|
||||||
|
|highlight, _theme| highlight.to_format(),
|
||||||
|
);
|
||||||
|
|
||||||
let preview = markdown(&self.items, markdown::Settings::default())
|
let preview = markdown(&self.items, markdown::Settings::default())
|
||||||
.map(Message::LinkClicked);
|
.map(Message::LinkClicked);
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue