Markdown

Prose

Headings, emphasis and lists from Markdown text.

Markdown { source: "### Release notes\n\nThe grid now **sorts from the address**, so a link keeps its view.\n\n- Sort and page in the URL\n- Columns chooser\n" }

Code and tables

Fences are plain monospace; tables keep their columns.

let html = to_html(&badge);

Markdown {
    source: "| Block | Reads |\n|---|---|\n| grid | rows |\n| kpis | one row |\n\n```rust\nlet html = to_html(&badge);\n```\n",
}

Safe by default

Raw HTML is shown as text; links go to http, https or mailto only.

Markdown {
    source: "A link to [the docs](https://www.plungeai.com/docs) and <b>raw HTML</b> shown as text.",
}

On the Mac

The same vocabulary drawn by Ocean UI's native face (egui on Metal), as the gallery's snapshot.

Use it

use ocean_ui_web::{Markdown, to_html};
to_html(&Markdown { source: "## Notes\n\nShip on **Friday**." })

use ocean_ui_native::{Show, markdown_view::MarkdownView};
MarkdownView { source: "## Notes\n\nShip on **Friday**.", base_href: None }.show(ui)

Cargo feature markdown of ocean-ui-core, ocean-ui-web and ocean-ui-native; available since 2026-10-29.

In App UI, the markdown block draws it from YAML.

Props

Accessibility

• Headings, lists, tables and links keep their own elements, so the document's structure reaches assistive technology.
• Heading levels are kept as written, so start the source at h2 under the page's h1.
• A link to any other scheme keeps its words without an anchor, so nothing reads as a link that goes nowhere.

Related

• Code view
• Card
• Copy button
• Collapsible

Markdown

The same page as Markdown, for an agent or a pull request.

# Markdown

Markdown text drawn as HTML, parsed exactly as Ocean pager parses it, with raw HTML shown as text.

Markdown renders a source string with the pager's parser, so a document reads the same in the terminal and on the page. Raw HTML is shown as text, links go only to http, https and mailto, and images are never loaded; a web image becomes a link with its alt text. Fenced code is escaped in pre and code with its language class, unhighlighted, to keep the Worker small.

## Use it

Web:

```rust
use ocean_ui_web::{Markdown, to_html};
to_html(&Markdown { source: "## Notes\n\nShip on **Friday**." })
```

Native:

```rust
use ocean_ui_native::{Show, markdown_view::MarkdownView};
MarkdownView { source: "## Notes\n\nShip on **Friday**.", base_href: None }.show(ui)
```

Cargo feature `markdown`; since 2026-10-29.
In App UI the `markdown` block draws it ([markdown](/ui/blocks/markdown.md)).

## Props

| Name | Type | Default | What |
|---|---|---|---|
| `source` | `&str` | `—` | The Markdown text; nothing in it is trusted. |

On the Mac: ![Markdown, dark](/ui/native/markdown-dark.png) ![Markdown, light](/ui/native/markdown-light.png)

## Examples

### Prose

Headings, emphasis and lists from Markdown text.

```rust
Markdown { source: "### Release notes\n\nThe grid now **sorts from the address**, so a link keeps its view.\n\n- Sort and page in the URL\n- Columns chooser\n" }
```

### Code and tables

Fences are plain monospace; tables keep their columns.

```rust
Markdown {
    source: "| Block | Reads |\n|---|---|\n| grid | rows |\n| kpis | one row |\n\n```rust\nlet html = to_html(&badge);\n```\n",
}
```

### Safe by default

Raw HTML is shown as text; links go to http, https or mailto only.

```rust
Markdown {
    source: "A link to [the docs](https://www.plungeai.com/docs) and <b>raw HTML</b> shown as text.",
}
```

## Accessibility

- Headings, lists, tables and links keep their own elements, so the document's structure reaches assistive technology.
- Heading levels are kept as written, so start the source at h2 under the page's h1.
- A link to any other scheme keeps its words without an anchor, so nothing reads as a link that goes nowhere.

## Related

- [Code view](/ui/components/code.md)
- [Card](/ui/components/card.md)
- [Copy button](/ui/components/copy.md)
- [Collapsible](/ui/components/collapsible.md)