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 smd.js file 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 smd from "streaming-markdown"

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

write function

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

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

You can write as many times as you want 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 rendered as <code>print("hello wor</code>

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.

smd.parser_end(parser)

TODO

• Paragraphs
• Line breaks
  • Single line breaks don't end tokens
  • Escaping line breaks
• Trim unnecessary spaces
• Headers
• Code Block with indent
• Code Block with triple backticks
  • language attr
  • with many backticks
• `inline code` with backticks
  • with many backticks
  • trim spaces code
• italic with single asterisks
• Bold with double asterisks
• italic with underscores
• Bold with double underscores
• Special cases:
  • boldbold>em
  • bold>embold
  • emem>bold
  • bold>emem
• * or _ cannot be surrounded by spaces
• Strikethrough with double tildes
• Escape characters (e.g. * or _ with \* or \_)
• [Link](url)
  • href attr
  • Escaping escaping bug: \Link\
• Raw URLs
  • www.example.com
  • http://example.com
  • https://example.com
  • [e-mail]
  • mailto:[e-mail]
  • With <>
• Images
  • src attr
• Horizontal rules
  • With ---
  • With ***
  • With ___
• Unordered lists
• Ordered lists
• Check lists
• Nested lists
• Blockquotes
• Tables
• Html tags (e.g. <div>, <span>, <a>, <img>, etc.)