streaming-markdown

Streaming Markdown

Experiment making a streaming makdown parser à la ChatGPT.

Installation

Install streaming-markdown package from npm.

npm install streaming-markdown

Or just copy mds dir to your project.

Usage

First create new markdown Parser by calling parser function.
It's single argument is a Renderer object, which is an interface to render the parsed markdown tokens to the DOM.
There are two built-in renderers—default_renderer and logger_renderer—that you can try at first.

import * as mds from "streaming-markdown"

const renderer = mds.default_renderer(document.getElementById("markdown"))
const parser = mds.parser(renderer)

write function

Then, you can start streaming markdown to the Parser by calling parser_write function with the chunk of markdown string.

mds.parser_write(parser, "# Streaming Markdown\n\n")

You can write as many times as needed to stream the markdown.

The parser is optimistic. When it sees the start of an inline code block or code block, it will immediately style the element accordingly.

E.g. "`print("hello wor" should be displayed as `print("hello wor

While the text is streamed in, the user should be able to select the text that has already been streamed in and copy it. (The parser is only adding new elements to the DOM, not modifying the existing ones.)

end function

Finally, you can end the stream by calling end function.

It will reset the Parser state and flush the remaining markdown.

mds.parser_end(parser)

TODO

• Paragraphs
• Line breaks
  • Single line breaks don't end tokens
  • Escaping line breaks
• Headers
• code block with triple backticks
  • send language to renderer
• inline code with backticks
• italic with single asterisks
• Bold with double asterisks
• italic with underscores
• Bold with double underscores
• Special cases:
  • foobar
  • foobar
  • foobar
  • foobar
• Escape characters (e.g. * or _ with \* or \_)
• [Link](url)
  • href attr
  • Escaping escaping bug: \Link\
• Images
• Lists
• Blockquotes
• Tables
• Html tags (e.g. <div>, <span>, <a>, <img>, etc.)