Markdown Features

Every construct supported by GptMarkdown v1.2.1 — what the syntax looks like, what it renders, and what the limits are.

Supported constructs

Syntax	Notes
# H1 … ###### H6	Six heading levels. H1 draws a rule by default.
bold / italic	Standard emphasis. *both* also works.
~~strikethrough~~	GFM strikethrough.
<u>underline</u>	HTML underline tag.
`inline code`	Monospace chip, baseline-aligned, selectable.
```fenced```	Code block with language label. closed flag available.
- / 1.	Unordered and ordered lists, nested.
- [x] / - [ ]	Task-list checkboxes. Interactive via CheckboxStyle.
(x) / ( )	Radio options. Same style class as checkboxes.
\| col \| col \|	Pipe tables with :--- alignment.
> quote	Block quotes. Bar, background, builder.
---	Horizontal rule. Thickness and colour via HrStyle.
[label](url)	Links. onLinkTap, linkBuilder, LinkStyle.
bare URL / www.	GFM autolinks. autolink: false disables.
<url>	CommonMark §6.5 autolinks. Any scheme.
![alt](url)	Images. imageBuilder, ImageStyle, onImageTap.
\$ \$ / \\[ \\]	LaTeX inline and block. Default renderer included; replace with latexBuilder if needed.
$…$ / $$…$$	Dollar-sign LaTeX. Opt in with useDollarSignsForLatex.
[1]	Citation chip. onSourceTagTap, SourceTagStyle.
==highlighted==	Background highlight spans.

Realistic AI response

A typical LLM response mixes prose, LaTeX, a code fence, a table, task list, blockquote, and a citation:

ai_response_example.dart

# Summary

The Pythagorean theorem states that for a right triangle:

\\[ a^2 + b^2 = c^2 \\]

Here is a quick implementation in Dart:

```dart
double hypotenuse(double a, double b) => sqrt(a * a + b * b);
```

## Comparison

| Approach       | Lines | Readable |
|:---------------|:-----:|:--------:|
| Direct formula | 1     | ✅        |
| Loop           | 5     | ❌        |

## Tasks

- [x] Write the function
- [ ] Add unit tests
- [ ] Benchmark

> The formula is exact for integers as well — Pythagorean triples like 3, 4, 5
> have been known since antiquity.

Source: [Wikipedia](https://en.wikipedia.org/wiki/Pythagorean_theorem) [1]

Autolinks

Bare URLs, www. hosts, and email addresses are linked automatically following the GFM autolink extension. <…> autolinks follow CommonMark §6.5 and accept any scheme. Autolinks are on by default — disable with autolink: false for untrusted input.

autolinks.dart

// Autolinks are ON by default.
// Bare URLs, www. hosts, and email addresses become tappable links.
GptMarkdown(
  'Visit https://flutter.dev or email hello@example.com',
  onLinkTap: (url, title) => launchUrlString(url),
)

// Disable for untrusted input where accidental tap targets are unwelcome.
GptMarkdown(content, autolink: false)

// Add custom schemes that should link without angle brackets.
// http, https, mailto and xmpp are always linked.
GptMarkdown(
  'Open myapp://dashboard',
  autolinkSchemes: const {'myapp'},
  onLinkTap: (url, title) => handleDeepLink(url),
)

Citations

Numeric citation references like [1] render as tappable chips. Style them with SourceTagStyle and handle taps with onSourceTagTap.

citations.dart

// [1] citation chips are rendered inline and tappable.
GptMarkdown(
  'The Riemann hypothesis [1] remains unproven.',
  onSourceTagTap: (content) {
    // content = "1"
    showSource(content);
  },
)

Tables

GFM-style pipe tables with column alignment (:---, ---:, :---:). Tables scroll horizontally on narrow screens.

tables.dart

GptMarkdown(r'''
| Name    | Score | Grade |
|:--------|------:|:-----:|
| Alice   |    95 |   A   |
| Bob     |    82 |   B   |
| Charlie |    74 |   C   |
''')

Task lists and radio options

Task-list checkboxes render the source state and are read-only by default. Enable interactivity with CheckboxStyle(interactive: true) and handle changes via onCheckboxChanged. Radio options use the same style class.

tasks_radio.dart

// Task lists — checkboxes are read-only unless you opt in.
GptMarkdown(
  '''
- [x] Install gpt_markdown
- [ ] Customize the math widget (optional)
- [ ] Deploy
  ''',
  // Optional: make checkboxes interactive.
  styleSheet: const GptMarkdownStyleSheet(
    checkbox: CheckboxStyle(interactive: true),
  ),
  onCheckboxChanged: (value) => persistCheckbox(value),
)

// Radio options — same style class as checkboxes.
GptMarkdown('''
Which approach do you prefer?
- (x) Direct formula
- ( ) Loop
- ( ) Recursive
''')

Images

Standard ![alt](url) syntax. Dimensions can be encoded in the alt text as WxH. Override with imageBuilder for custom caching, borders, or lightboxes.

images.dart

// Basic image
GptMarkdown('![Flutter logo](https://flutter.dev/images/logo.png)')

// With explicit dimensions (alt parsed as WxH)
GptMarkdown('![100x80](https://example.com/icon.png)')

// Custom renderer — receives url, width, height (null if not specified)
GptMarkdown(
  content,
  imageBuilder: (context, url, width, height) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(8),
      child: Image.network(url, width: width, height: height),
    );
  },
  onImageTap: (url) => openLightbox(url),
)

Scope and limitations

Designed for AI output. The parser is tuned for what LLMs emit, not for full CommonMark conformance. Edge cases in deeply nested or pathological Markdown may not round-trip correctly.

Selection across blocks. Copying across a list or table yields the cells run together with no separators — block content is rendered as inline widgets. Prose, headings, links, and inline code copy correctly.

LaTeX needs a renderer. The package parses  and \[ \] delimiters and renders them with the included default renderer. Pass a latexBuilder only to replace it — see LaTeX Support.

No raw HTML pass-through. Only the <u> tag is handled. Arbitrary HTML is rendered as text.

← Basic Usage LaTeX Support