Enable Markdown highlighting in markdown example

This commit is contained in:
Héctor Ramón Jiménez 2024-07-28 19:18:11 +02:00
parent 7445b97df5
commit 1aa0a8fa0d
No known key found for this signature in database
GPG key ID: 7CC46565708259A7
2 changed files with 18 additions and 19 deletions

View file

@ -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!

View file

@ -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);