MarkdownView

A Markdown document viewer with a block cursor: content renders styled (headings tinted, inline bold/italic/code, blockquotes, fences), and one block (a line of the source) is selected at a time.

See also: MarkdownText for short inline strings.

Import: package:fleury/fleury.dart, or package:fleury/fleury_core.dart in browser code.

Usage

MarkdownView(
  markdown: '''
# Release notes

**Fleury 1.0** runs in the terminal and the browser.

- Arrow keys move between blocks
- Ctrl+C copies the selected block
''',
)

Details

Up and Down move the selection a block at a time; PageUp, PageDown, Home, and End jump; clicking a block selects it. Ctrl+C copies the selected block’s Markdown source, or the whole document when copyOptions sets MarkdownViewCopyMode.document.

Constructors

MarkdownView()

Parameter	Type	Default	Description
markdown:	String	required	Markdown source to render, parsed by the view. The parse is kept while the source is unchanged, and an appended source re-parses only its last line onward, so streaming into a long document stays cheap.
controller:	MarkdownViewController?	—	External selection and visible-range controller.
focusNode:	FocusNode?	—	Focus node used for keyboard navigation.
autofocus:	bool	false	Whether the viewer should request focus when mounted.
semanticLabel:	String	'Markdown'	Semantic label (the accessibility name; not rendered) for the Markdown viewer.
baseStyle:	CellStyle?	—	Base text style merged into rendered Markdown spans.
maxLineLength:	int?	1000	Cuts each block’s text, inline Markdown markers included, to this many characters before styling, ending it with …; null never cuts. Copying still copies the full source.
tabSize:	int	2	Number of spaces used when expanding tabs.
copySelection:	bool	true	Whether Ctrl+C (and the semantic copy action) copies the selected block, or the document if copyOptions says so.
copyOptions:	MarkdownViewCopyOptions	const MarkdownViewCopyOptions()	Clipboard/export options for copied Markdown text.
onCopy:	void Function(MarkdownViewCopyResult result)?	—	Called after a copy attempt completes.

MarkdownView.document()

Creates a viewer from an already parsed MarkdownDocument. maxLineLength and tabSize have no effect here.

The document’s sanitized blocks, links, and parsing statistics are reused without parsing Markdown source again.

Parameter	Type	Default	Description
document:	MarkdownDocument	required	An already parsed document to render.
controller:	MarkdownViewController?	—	External selection and visible-range controller.
focusNode:	FocusNode?	—	Focus node used for keyboard navigation.
autofocus:	bool	false	Whether the viewer should request focus when mounted.
semanticLabel:	String	'Markdown'	Semantic label (the accessibility name; not rendered) for the Markdown viewer.
baseStyle:	CellStyle?	—	Base text style merged into rendered Markdown spans.
maxLineLength:	int?	1000	Cuts each block’s text, inline Markdown markers included, to this many characters before styling, ending it with …; null never cuts. Copying still copies the full source.
tabSize:	int	2	Number of spaces used when expanding tabs.
copySelection:	bool	true	Whether Ctrl+C (and the semantic copy action) copies the selected block, or the document if copyOptions says so.
copyOptions:	MarkdownViewCopyOptions	const MarkdownViewCopyOptions()	Clipboard/export options for copied Markdown text.
onCopy:	void Function(MarkdownViewCopyResult result)?	—	Called after a copy attempt completes.

Source

MarkdownView is defined in packages/fleury/lib/src/catalog/markdown_text.dart.

Category: Text & content · All widgets

Live demo

markdown_example.dart

Restart Run Expand

Example · editable Revert Format

Widget example() => const MarkdownView(
  markdown: '''
# Fleury

A **retained-mode** UI framework for the terminal — and the browser.

## Targets

- **terminal** — POSIX & Windows drivers
- **web (serve)** — stream frames to a browser over a socket
- **web (embed)** — compile the widget tree to JS with dart2js

## Why

> One widget tree. Two surfaces. No rewrite.

Build with the same `Widget` / `State` / `build` model you know from
Flutter, then run it wherever your users are — a terminal, or a
`<div>` on a page.

```dart
runApp(const App());
```

See the **Guides** for theming, animation, focus, and testing.
''',
);

Live preview

Live · interactive

click & type to interact ⓘ how this demo runs ⛶ Expand