Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/thetarnav/streaming-markdown
Streaming markdown à la ChatGPT (WIP)
https://github.com/thetarnav/streaming-markdown
chatbot html js markdown parser
Last synced: 19 days ago
JSON representation
Streaming markdown à la ChatGPT (WIP)
- Host: GitHub
- URL: https://github.com/thetarnav/streaming-markdown
- Owner: thetarnav
- License: mit
- Created: 2024-02-10T19:50:16.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-03-14T12:34:37.000Z (8 months ago)
- Last Synced: 2024-03-14T22:31:57.898Z (8 months ago)
- Topics: chatbot, html, js, markdown, parser
- Language: JavaScript
- Homepage: https://thetarnav.github.io/streaming-markdown/
- Size: 218 KB
- Stars: 11
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
- License: license
Awesome Lists containing this project
README
# Streaming *Markdown*
[](https://www.npmjs.com/package/streaming-markdown) [](https://github.com/thetarnav/streaming-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`**](https://github.com/thetarnav/streaming-markdown/blob/main/smd.js) file to your project.*
Or use the [CDN link](https://www.jsdelivr.com/package/npm/streaming-markdown).\
It's a minified *(3kB Gzip)* version of the package, with only the necessary functions exported.\
See the exports in [`smd_min_entry.js`](https://github.com/thetarnav/streaming-markdown/blob/main/smd_min_entry.js).\
The package uses ES module exports, so you need to use `type="module"` in your script tag.
```html
import * as smd from "https://cdn.jsdelivr.net/npm/streaming-markdown/smd.min.js"
// ...
```
## 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.
```js
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.
```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.)*
### `end` function
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)
```
## 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
- [x] with many backticks
- [x] trim spaces ` code `
- [x] *italic* with single asterisks
- [x] **Bold** with double asterisks
- [x] _italic_ with underscores
- [x] __Bold__ with double underscores
- [x] Special cases:
- [x] **bold*bold>em***
- [x] ***bold>em*bold**
- [x] *em**em>bold***
- [x] ***bold>em**em*
- [x] \* or \_ cannot be surrounded by spaces
- [x] Strikethrough ~~example~~
- [x] Escape characters (e.g. \* or \_ with \\\* or \\\_)
- [x] \[Link\](url)
- [x] `href` attr
- [ ] Raw URLs
- [ ] http://example.com
- [ ] https://example.com
- [ ] www.example.com
- [ ] [email protected]
- [ ] mailto:[email protected]
- [x] Autolinks
- [ ] www.example.com
- [x] http://example.com
- [x] https://example.com
- [ ] [email protected]
- [ ] mailto:[email protected]
- [ ] Reference-style Links
- [x] Images
- [x] `src` attr
- [x] Horizontal rules
- [x] With `---`
- [x] With `***`
- [x] With `___`
- [x] Unordered lists
- [x] Ordered lists
- [x] `start` attr
- [x] Task lists
- [x] Nested lists
- [ ] One-line nested lists
- [ ] Adding Elements in Lists
- [x] Blockquotes
- [ ] Tables
- [ ] Subscript
- [ ] Superscript
- [ ] Emoji Shortcodes
- [ ] Html tags (e.g. `
`, ``, ``, `![]()
`, etc.)