Home

Documentation

AKARI-Markdown.js is a Web Component wrapper that brings together marked, highlight.js, katex, and mermaid into a single, shadow-DOM encapsulated element. It is designed to handle streaming content (like LLM outputs) robustly.

Installation

Since the library is built as an ES Module with bundled CDN imports, you can simply import it directly into your project.

Using ES Modules

<script type="module">
  import './akari-markdown.js';
</script>

Basic Usage

Once imported, use the <akari-markdown> tag in your HTML.

Declarative (HTML)

<akari-markdown>
# Hello World

This is **markdown** content.
</akari-markdown>

Imperative (JavaScript)

const el = document.createElement('akari-markdown');
document.body.appendChild(el);

// Update content
el.value = "# Dynamic Content\n\nUpdates automatically.";

Note: The element uses a throttling mechanism (default 30ms) to prevent performance issues during rapid updates (e.g., streaming).

Features Syntax

1. Code Blocks

Standard Markdown syntax. Language detection is handled by highlight.js.

```javascript
console.log('Hello Akari');
```

2. Math Equations

Inline: $E = mc^2$
Block: $$ \int_0^\infty x^2 dx $$

3. Mermaid Diagrams

Use the mermaid language identifier. The component includes a debounce mechanism and integrity check to prevent rendering broken diagrams while typing.

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

API Reference

Properties

value (getter/setter): Gets or sets the Markdown content string. Triggers a render.

Attributes

no-render: If present on the element during startup, it will not render the initial textContent. Useful if you plan to set data via JS immediately.

Configuration

You can configure the component instance via the config setter.

const element = document.querySelector('akari-markdown');

element.config = {
    theme: 'dark',          // 'dark' (default) or 'default' (light) for Mermaid
    throttleInterval: 30,   // Render throttle in ms
    mermaidDebounce: 300,   // Delay before rendering Mermaid (ms)
    hooks: {
        // Pre-process raw markdown
        beforeParse: (text) => text.replace(/foo/g, 'bar'),
        
        // Post-process HTML before DOM insertion
        afterSanitize: (html) => html,
        
        // Called after render is complete
        onRendered: (shadowRoot) => console.log('Rendered!')
    }
};

Mermaid Error Handling

AKARI-Markdown.js captures Mermaid syntax errors internally. Instead of crashing, it displays a red error box with the error message and preserves the original source code below it.