
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
streaming-markdown
Advanced tools
Experiment making a streaming makdown parser à la ChatGPT.
Install streaming-markdown
package from npm.
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.
<script type="module">
import * as smd from "https://cdn.jsdelivr.net/npm/streaming-markdown/smd.min.js"
// ...
</script>
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
functionThen, 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
functionFinally, you can end the stream by calling end
function.
It will reset the Parser
state and flush the remaining markdown.
smd.parser_end(parser)
`inline code`
with backticks
code
href
attrsrc
attr---
***
___
start
attr<div>
, <span>
, <a>
, <img>
, etc.)If you think that something is missing or doesn't work, please make an issue.
FAQs
Streaming Markdown parser, à la ChatGPT
The npm package streaming-markdown receives a total of 103 weekly downloads. As such, streaming-markdown popularity was classified as not popular.
We found that streaming-markdown demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.