@duskmoon-dev/el-markdown

A markdown renderer component using remark/rehype with syntax highlighting, mermaid diagram support, and streaming mode for LLM output.

Installation

bun add @duskmoon-dev/el-markdown

For mermaid diagram support (optional):

bun add mermaid

Usage

Auto-Register (Recommended)

The simplest way to use the component - just import and it's ready:

<!-- Via CDN -->
<script type="module" src="https://esm.sh/@duskmoon-dev/el-markdown/register"></script>

<!-- Now use the element -->
<el-dm-markdown> # Hello World This is **markdown** content. </el-dm-markdown>

Or with a bundler:

import '@duskmoon-dev/el-markdown/register';

Manual Registration

<script type="module">
  import { register } from '@duskmoon-dev/el-markdown';
  register();
</script>

<el-dm-markdown> # Hello World </el-dm-markdown>

From URL

<el-dm-markdown src="/docs/readme.md"></el-dm-markdown>

With Mermaid Diagrams

<el-dm-markdown>
  # Flowchart Example ```mermaid graph TD A[Start] --> B{Is it?} B -->|Yes| C[OK] B -->|No|
  D[End]</el-dm-markdown
>

Features

• GitHub Flavored Markdown: Tables, task lists, strikethrough, autolinks
• Soft Line Breaks: Single newlines render as line breaks by default
• Color Chips: Supported HEX, RGB, and HSL values in inline code show a color preview
• Front Matter: Leading YAML front matter renders as a highlighted YAML code block
• Syntax Highlighting: Powered by highlight.js via rehype-highlight
• Mermaid Diagrams: Optional support for flowcharts, sequence diagrams, etc.
• Multiple Themes: GitHub, Atom One Dark, Atom One Light
• Auto Theme: Respects prefers-color-scheme media query
• Indentation Removal: Automatically removes common indentation from inline content
• Streaming Mode: Real-time rendering for LLM output with automatic syntax error recovery

Themes

<el-dm-markdown theme="atom-one-dark"> ```js const dark = true;</el-dm-markdown>

Attributes

Properties

Methods

CSS Parts

Events

CSS Custom Properties

Supported Markdown Features

• Headings (h1-h6)
• Paragraphs
• Bold, italic, strikethrough
• Links and images
• Ordered and unordered lists
• Task lists (GFM)
• Blockquotes
• Code (inline and blocks)
• Syntax highlighting
• Tables (GFM)
• Horizontal rules
• Mermaid diagrams (optional)
• Color chips for inline HEX, RGB, and HSL values
• YAML front matter

Examples

Task List

<el-dm-markdown> ## Todo - [x] Complete task - [ ] Pending task - [ ] Another task </el-dm-markdown>

Table

<el-dm-markdown>
  | Feature | Status | |---------|--------| | Tables | Supported | | Strikethrough | ~~Yes~~ |
</el-dm-markdown>

Loading Remote Content

<el-dm-markdown src="https://raw.githubusercontent.com/user/repo/main/README.md"></el-dm-markdown>

Streaming Mode

Streaming mode is designed for rendering LLM output in real-time. It automatically handles incomplete markdown syntax during streaming and shows a blinking cursor.

Basic Streaming

const md = document.querySelector('el-dm-markdown');

// Start streaming mode
md.startStreaming();

// Append chunks as they arrive from LLM
for await (const chunk of llmStream) {
  md.appendContent(chunk);
}

// End streaming (performs final clean render)
md.endStreaming();

Using Content Property

const md = document.querySelector('el-dm-markdown');

md.streaming = true; // Or call startStreaming()
let content = '';

for await (const chunk of llmStream) {
  content += chunk;
  md.content = content;
}

md.streaming = false; // Or call endStreaming()

Listening to Stream Events

const md = document.querySelector('el-dm-markdown');

md.addEventListener('dm-stream-chunk', (e) => {
  console.log('Received chunk:', e.detail.chunk);
  console.log('Total content:', e.detail.content);
});

md.addEventListener('dm-stream-end', (e) => {
  console.log('Streaming complete:', e.detail.content);
});

Syntax Auto-Recovery

During streaming, incomplete markdown syntax is automatically fixed:

This ensures the markdown renders correctly even with partial content.

License

MIT