markflow

An incremental Markdown parser for streaming output.

Streaming rendering

import { MarkdownStream } from '@realloon/markflow'

const output = document.querySelector('#output')!
const stream = new MarkdownStream(output)

for await (const delta of modelOutput) {
  stream.write(delta.content)
}

stream.end()

MarkdownStream owns the initially empty output element. Completed blocks stay in place; only the current unfinished block can be updated. Call stream.dispose() before removing the output element when Aura highlighting is active.

By default, raw HTML generated by the model is escaped. If you enable allowHtml, you must ensure that the content is trusted.

Call reset() to clear the owned output element before starting a new message.

Syntax highlighting

markflow can be combined with Aura to stream syntax-highlighted code:

import '@realloon/aura/highlight.css'
import { Aura, csharp } from '@realloon/aura'
import { MarkdownStream } from '@realloon/markflow'

const aura = new Aura().register([csharp])
const output = document.querySelector('#output')!
const stream = new MarkdownStream(output, { highlighter: aura })

Aura includes a default CSS Custom Highlight theme through @realloon/aura/highlight.css.

Options

interface MarkdownOptions {
  breaks?: boolean // Render soft line breaks as <br>; defaults to false
  gfm?: boolean // Tables, task lists, strikethrough, and bare URLs; defaults to true
  allowHtml?: boolean // Pass through inline HTML; defaults to false
  highlighter?: Highlighter // Optional syntax highlighter
}

Currently supported features include ATX and Setext headings, paragraphs, soft and hard line breaks, fenced and indented code blocks, blockquotes, nested ordered and unordered lists, task lists, tables, thematic breaks, emphasis, strikethrough, code, links, images, autolinks, and backslash escapes. Reference link definitions, footnotes, and raw HTML blocks are not currently supported.