streaming-markdown
v0.2.15TypeScript
Streaming Markdown parser, à la ChatGPT
0/weekUpdated 9 months agoMITUnpacked: 82.4 KB
Published by Damian Tarnawski
npm install streaming-markdownStreaming Markdown
 
Experiment making a streaming makdown parser à la ChatGPT.
---
Installation
Install streaming-markdown package from npm.
``bash`
npm install streaming-markdown
Or just copy smd.js file to your project.
Or use the CDN link.\
It's a minified (3kB Gzip) version of the package, with only the necessary functions exported.\
See the exports in smd_min_entry.js.\
The package uses ES module exports, so you need to use type="module" in your script tag.
`html`
Usage
First create new markdown Parser by calling parser function.\Renderer
It's single argument is a object, which is an interface to render the parsed markdown tokens to the DOM.\default_renderer
There are two built-in renderers— and logger_renderer—that you can try at first.
`js
import * as smd from "streaming-markdown"
const element = document.getElementById("markdown")
const renderer = smd.default_renderer(element)
const parser = smd.parser(renderer)
`
$3
Then, you can start streaming markdown to the Parser by calling parser_write function with the chunk of markdown string.
`js`
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 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.)
$3
Finally, you can end the stream by calling end function.
It will reset the Parser state and flush the remaining markdown.
`js`
smd.parser_end(parser)
$3
| Field name | Type | Description |
| ----------- | ---------------------- | ----------- |
| data | T | User data object.add_token
Available as first param in callbacks. |
| | Renderer_Add_Token| When the tokens starts. |end_token
| | Renderer_End_Token| When the token ends. |add_text
| | Renderer_Add_Text | To append text to current token.set_attr
Can be called multiple times or none. |
| | Renderer_Set_Attr | Set additional attributes of current token eg. the link url. |
Markdown features
- [x] Paragraphs
- [x] Line breaks
- [x] don't end tokens
- [x] Escaping line breaks
- [x] Trim unnecessary spaces
- [x] Headers
- [ ] ~~Alternate syntax~~ (not planned)
- [x] Code Block with indent
- [x] Code Block with triple backticks
- [x] language attr
- [x] with many backticks
- [x] inline code with backticks code
- [x] with many backticks
- [x] trim spaces
- [x] italic with single asterisks
- [x] Bold with double asterisks
- [x] _italic_ with underscores
- [x] __Bold__ with double underscores
- [x] Special cases:
- [x] boldbold>em
- [x] bold>embold
- [x] emem>bold
- [x] bold>emem
- [x] \* or \_ cannot be surrounded by spaces
- [x] Strikethrough ~~example~~
- [x] Escape characters (e.g. \ or \_ with \\\ or \\\_)
- [x] \Link\
- [x] attrsrc
- [ ] Raw URLs
- [ ] http://example.com
- [ ] https://example.com
- [ ] www.example.com
- [ ] example@fake.com
- [ ] mailto:example@fake.com
- [x] Autolinks
- [ ] www.example.com
- [x] http://example.com
- [x] https://example.com
- [ ] example@fake.com
- [ ] mailto:example@fake.com
- [ ] Reference-style Links
- [x] Images
- [x] attr---
- [x] Horizontal rules
- [x] With
- [x] With
- [x] With
- [x] Unordered lists
- [x] Ordered lists
- [x] attr
- [x] Task lists
- [x] Nested lists
- [ ] One-line nested lists
- [ ] Adding Elements in Lists
- [x] Blockquotes
- [x] Tables
- [ ] Align cols right/center
- [ ] Multiline cells
- [ ] Subscript
- [ ] Superscript
- [ ] Emoji Shortcodes
- [ ] Html tags (e.g.