Function Markdown

Markdown(content: string, props?: MarkdownProps): Node[]
Render a markdown string as an array of cel-tui nodes.

Parses the content into block-level tokens (via yoctomarkdown) and maps each to styled primitives. The returned array is meant to be used as children of a container (typically a scrollable VStack).

Block-level styling is fully supported: headings, code blocks, lists, blockquotes, and horizontal rules are rendered with distinct styles. Inline styling (bold, italic, code, links) is rendered in paragraphs, list items, and blockquotes by splitting spans at word boundaries into individual Text nodes inside a wrapping HStack({ flexWrap: "wrap" }). Headings strip inline formatting to plain text (they're typically short and single-line).

Streaming works naturally: append chunks to the content string and call cel.render(). The component re-tokenizes the full string each render. Unclosed code blocks and inline formatting are handled gracefully.
Parameters
- content: string
  Markdown string (may be partial during streaming).
- Optionalprops: MarkdownProps
  Optional theme overrides.
Returns Node[]
Array of nodes to spread into a container's children.
Example
// Static content VStack({ flex: 1, overflow: "scroll", padding: { x: 1 } }, Markdown("# Hello\n\nSome bold text.\n\njs\nconst x = 1;\n") )
Example
```
// Streaming from an LLM
let content = "";
onChunk((chunk) => { content += chunk; cel.render(); });

VStack({ flex: 1, overflow: "scroll" },
  Markdown(content)
)
```
Example
```
// Custom theme
Markdown(content, {
  theme: { heading1: { bold: true, fgColor: "color05" } }
})
```
- Defined in components/src/markdown.ts:203

Function Markdown

Parameters

Returns Node[]

Example

Example

Example

Settings