Markdown

The Markdown component renders markdown content with syntax highlighting, GitHub Flavored Markdown support, and optional Mermaid diagram rendering.

Installation

npm install @duskmoon-dev/el-markdown

For Mermaid diagram support (optional):

npm install mermaid

Usage

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

<el-dm-markdown>
  # Hello World

  This is **bold** and *italic* text.
</el-dm-markdown>

Live Demo

Markdown Rendering with Front Matter, Color Chips, and Soft Breaks

Single newlines render as <br> elements because the Markdown renderer enables Marked’s breaks: true option by default.

<el-dm-markdown>
  ---
  title: DmMarkdown feature showcase
  tags:
    - rust
    - yew
  accent: '#4C86FC'
  ---
  # DmMarkdown rendering

  Soft break, first line
  Soft break, second line

  Color previews: `#4C86FC`, `#fff`, `#000`, and `#FF000080`.
</el-dm-markdown>

Properties

Property	Type	Default	Description
`content`	`string`	`''`	Markdown content to render (alternative to slot)
`sanitize`	`boolean`	`true`	Sanitize HTML in markdown
`highlight`	`boolean`	`true`	Enable syntax highlighting
`mermaid`	`boolean`	`false`	Enable Mermaid diagram rendering

Content Methods

Using Slot

<el-dm-markdown>
  # Heading

  Content goes here.
</el-dm-markdown>

Using Property

<el-dm-markdown content="# Heading\n\nContent goes here."></el-dm-markdown>

Using JavaScript

const md = document.querySelector('el-dm-markdown');
md.content = '# Dynamic Content\n\nUpdated via JavaScript.';

Features

GitHub Flavored Markdown

The component supports GFM features:

Tables
Task lists
Strikethrough
Autolinks
Footnotes
Soft line breaks by default
Color previews for HEX, RGB, and HSL values wrapped in backticks
Leading YAML front matter rendered as a highlighted code block

GFM Features

<el-dm-markdown>
  | Feature | Supported |
  |---------|-----------|
  | Tables  | ✅        |
  | Tasks   | ✅        |

  - [x] Task 1
  - [ ] Task 2
</el-dm-markdown>

Syntax Highlighting

Code blocks are automatically highlighted:

Code Syntax Highlighting

<el-dm-markdown>
  ```javascript
  function greet(name) {
    console.log(`Hello, ${name}!`);
  }
  ```
</el-dm-markdown>

Mermaid Diagrams

Mermaid diagrams are rendered automatically when the mermaid package is installed. Use no-mermaid to disable:

Mermaid Diagram

<el-dm-markdown>
  ```mermaid
  graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Process]
    B -->|No| D[End]
    C --> D
  ```
</el-dm-markdown>

Styling

The markdown component applies styling through the .markdown-body class from @duskmoon-dev/core.

CSS Custom Properties

Property	Description
`--dm-markdown-font-family`	Font family for content
`--dm-markdown-line-height`	Line height for paragraphs
`--dm-markdown-code-bg`	Background color for code blocks
`--dm-markdown-link-color`	Link color

Events

Event	Description
`dm-rendered`	Fired after markdown is rendered
`dm-error`	Fired if rendering fails

Event Handling

const md = document.querySelector('el-dm-markdown');
md.addEventListener('dm-rendered', (event) => {
  console.log('Markdown rendered:', event.detail);
});

Security

By default, the component sanitizes HTML to prevent XSS attacks. Trusted callers can disable sanitization with the JavaScript property:

const markdown = document.querySelector('el-dm-markdown');
markdown.sanitize = false;
markdown.content = '<div class="custom-html">Trusted HTML</div>';

⚠️ Warning: Only disable sanitization for trusted content sources.

Accessibility

Semantic HTML is generated from markdown
Headings maintain proper hierarchy
Images require alt text
Links are keyboard navigable
Code blocks have proper language labels