Markdown

Render a markdown string as styled elements: CommonMark plus GFM tables, task lists and strikethrough. Raw HTML shows as text and unsafe links are dropped, so untrusted input is safe.

Onboarding findings

Nine of twelve interviewees raised onboarding, and three called it confusing. See the full notes or ~~last quarter's~~ this quarter's summary.

Tag interview transcripts
Draft the summary
Share with design

Theme	Mentions	Share
Onboarding	9	75%
Pricing	4	33%

Raw HTML shows as text: <script>alert(1)</script>

rust

let flagged = answers.iter().filter(|a| a.flagged).count();

Usage

use hydroxy_leptos::markdown::Markdown;
use leptos::prelude::*;

const NOTES: &str = r"## Onboarding findings

Nine of twelve interviewees raised **onboarding**, and three called it _confusing_.
See the [full notes](https://example.com/notes) or ~~last quarter's~~ this quarter's summary.

- [x] Tag interview transcripts
- [ ] Draft the summary
- [ ] Share with design

| Theme       | Mentions | Share |
|:------------|---------:|------:|
| Onboarding  |        9 |   75% |
| Pricing     |        4 |   33% |

> Raw HTML shows as text: <script>alert(1)</script>

```rust
let flagged = answers.iter().filter(|a| a.flagged).count();
```
";

pub fn demo() -> AnyView {
    view! { <Markdown source=NOTES /> }.into_any()
}

use dioxus::prelude::*;
use hydroxy_dioxus::markdown::Markdown;

const NOTES: &str = r"## Onboarding findings

Nine of twelve interviewees raised **onboarding**, and three called it _confusing_.
See the [full notes](https://example.com/notes) or ~~last quarter's~~ this quarter's summary.

- [x] Tag interview transcripts
- [ ] Draft the summary
- [ ] Share with design

| Theme       | Mentions | Share |
|:------------|---------:|------:|
| Onboarding  |        9 |   75% |
| Pricing     |        4 |   33% |

> Raw HTML shows as text: <script>alert(1)</script>

```rust
let flagged = answers.iter().filter(|a| a.flagged).count();
```
";

#[component]
pub fn MarkdownDemo() -> Element {
    rsx! {
        Markdown { source: NOTES }
    }
}

Anatomy

Component	data-part	Renders
`Markdown`	root	div[data-scope=markdown] around the rendered blocks
	table	Scroll wrapper around each table
	—	Code fences render as CodeBlock. Headings get slug ids. Task items are li[data-task]

Props

Prop	Type	Notes
`source`	String	Required. The markdown. Links keep only http, https, mailto and relative URLs