streaming-markdown

The streaming-markdown parser supports a wide range of Markdown features, including:

• Basic Formatting: Paragraphs, line breaks, headers, horizontal rules (---, ***, ___), blockquotes.
• Emphasis: Italic (asterisks or underscores), Bold (double asterisks or underscores), Strikethrough.
• Lists: Unordered, ordered (with start attribute), task lists, and nested lists.
• Code: Inline code (`code`) and code blocks (triple backticks or indented), including language attributes.
• Links & Media: Links ([text](url)), autolinks (e.g., https://...), and images (![alt](src)).
• Tables: Standard markdown tables.
• Math: LaTeX tags for blocks (\[...\], $$...$$) and inline (\(...\), $...$).
• Other: Escaping characters, nested emphasis combinations, and <br> tags.

You can install the streaming-markdown package via npm, copy the smd.js file directly into your project, or use a CDN link.

If using the CDN, ensure your script tag uses type="module" because the package uses ES module exports.

npm install streaming-markdown

<script type="module">
    import * as smd from "https://cdn.jsdelivr.net/npm/streaming-markdown/smd.min.js"
    // ...
</script>

The smd.parser_write(parser, chunk) function allows you to feed chunks of a markdown string into the parser. You can call this function multiple times to simulate a real-time stream (like a ChatGPT response). The parser only adds new elements to the DOM and does not modify existing ones, allowing users to select and copy text that has already been rendered.

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

A Renderer is an object that defines how parsed markdown tokens are converted into DOM elements or other outputs. To create a custom renderer, implement the following interface:

If you need to inspect the sequence of tokens and text being processed by the parser, use logger_renderer(). This implementation does not produce output but logs all parser actions to the console:

• add_token: Logs add_token: <TOKEN_NAME>
• end_token: Logs end_token
• add_text: Logs add_text: "%s"
• set_attr: Logs set_attr: <attr>=<value>

import { logger_renderer } from './smd.js';

const renderer = logger_renderer();
// Use this renderer to see the parser's lifecycle in the console.

The default_renderer(root) function provides a ready-to-use implementation that converts Markdown tokens directly into DOM elements inside a provided HTMLElement root. It manages a stack of nodes using an internal index and nodes array within its data object.

When using the default renderer, add_token creates elements like <h1>, <p>, <em>, or <a>, and add_text appends text nodes to the current element.

import { default_renderer } from './smd.js';

const root = document.getElementById('output');
const renderer = default_renderer(root);

// The renderer is now ready to be used by the parser
// e.g., parser.write(text, renderer);

The default_renderer maps specific Markdown tokens to the following HTML elements: