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

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

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

Enable Mermaid support for diagrams:

<el-dm-markdown mermaid>
  ```mermaid
  graph TD
    A[Start] --> B[Process]
    B --> C[End]
  ```
</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. You can disable this for trusted content:

<el-dm-markdown sanitize="false">
  <div class="custom-html">Custom HTML allowed</div>
</el-dm-markdown>

⚠️ 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