The Markdown Widget

Renders a markdown string as rich text with support for headings, bold, italic, lists, code blocks, and clickable links.

Interface

val markdown: fn(
  ?#on_link: fn(string) -> Any,
  ?#spacing: &[f64, null],
  ?#text_size: &[f64, null],
  ?#width: &Length,
  &string
) -> Widget

Parameters

• #on_link – Callback invoked when the user clicks a link in the rendered markdown. Receives the URL as a string. If omitted, links are displayed but not interactive.
• #spacing – Vertical space in pixels between markdown elements (paragraphs, headings, lists), or null for the default spacing.
• #text_size – Base text size in pixels, or null for the default. Headings scale relative to this size.
• #width – Width of the markdown content area. Accepts Length values. Defaults to `Fill.
• positional &string – The markdown source text to render.

Examples

Rendered Markdown with Link Callback

use gui;
use gui::text;
use gui::text_editor;
use gui::markdown;
use gui::column;
mod icon;

let content = r'# Markdown Demo

This is **bold** and this is *italic*.

- First item
- Second item
- Fifth item

Here is a [link](https://graphix.dev) you can click.
';

let col = column(
    #spacing: &20.0,
    #padding: &`All(30.0),
    #width: &`Fill,
    &[
        text(#size: &24.0, &"Markdown Widget"),
        markdown(
            #on_link: |url| println("Clicked: [url]"),
            #text_size: &16.0,
            &content
        ),
        text_editor(
            #on_edit: |v| content <- v,
            #height: &200.0,
            &content
        )
    ]
);

[&window(#icon: &icon::icon, #title: &"Markdown", &col)]

See Also

• text – for plain text display
• text_editor – for editing text content