Markdown Body

GitHub-style typography for rendered markdown content with automatic theme support

Markdown Body

The .markdown-body class provides GitHub-style typography for rendered markdown content. It uses marked.js to parse markdown and automatically adapts to DuskMoonUI themes.

Live Demo

See how markdown is rendered with the .markdown-body class. Toggle between Preview, Markdown, and HTML tabs:

Complete Markdown Example

A full markdown document demonstrating all supported elements

Project Documentation

Welcome to the project! This document demonstrates all supported markdown elements.

Getting Started

Install the package using your preferred package manager:

npm install @duskmoon-dev/core

Then import the CSS in your stylesheet:

@import "@duskmoon-dev/core";

Features

Here's what this component supports:

  • Typography: Headings, paragraphs, bold, italic, strikethrough
  • Lists: Ordered, unordered, and nested lists
  • Code: Inline code and code blocks
  • Tables: With header styling and zebra striping
  • Blockquotes: For callouts and citations

Code Example

Use the useState hook for state management:

function Counter() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

API Reference

Method Description Returns
init() Initialize the library void
configure(options) Set configuration Config
destroy() Clean up resources void

Note: Remember to call destroy() when unmounting to prevent memory leaks.

Last updated: January 2026

Typography

Headings

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Text Formatting

Text Formatting

Regular paragraph text with bold, italic, and bold italic formatting.

You can also use strikethrough for deleted text.

This has a link and some inline code.

Lists

Unordered Lists

Unordered Lists

  • First item
  • Second item
  • Nested item
  • Another nested item
    • Deep nested item
  • Third item

Ordered Lists

Ordered Lists

  1. First step
  2. Second step
  3. Sub-step a
  4. Sub-step b
  5. Third step

Code

Inline Code

Inline Code

Use the npm install command to install dependencies.

The useState hook returns a [state, setState] pair.

Code Blocks

Code Blocks

function greet(name) {
console.log(`Hello, ${name}!`);
}

greet('World');

Tables

Tables

Method Description Returns
init() Initialize the library void
configure() Set configuration options Config
destroy() Clean up resources void

Blockquotes

Blockquotes

This is a blockquote. It can contain multiple paragraphs.

Here's the second paragraph with bold text.

Nested Blockquotes

Nested Blockquotes

Outer blockquote.

Nested blockquote with more context.

Horizontal Rules

Horizontal Rules

Content above the rule.

Content below the rule.

Images

Images

Sample image
An example image with caption

Additional HTML Elements

These elements require HTML in your markdown or a markdown processor that supports them:

Keyboard Input

Keyboard Input

Press Ctrl + C to copy.

Use Cmd + Shift + P to open the command palette.

Abbreviations

Abbreviations

The HTML specification is maintained by the W3C.

Highlights

Highlights

This is highlighted text for emphasis.

Details/Summary

Details/Summary

Click to expand

This is the hidden content that appears when expanded.

Usage

Import Options

Full Library:

@import "@duskmoon-dev/core";

Individual Component:

@import "@duskmoon-dev/core/components/markdown-body";

With marked.js

import { marked } from 'marked';

const markdown = `
# Hello World
Some **bold** text and \`inline code\`.
`;

// Render markdown to HTML
const html = marked(markdown);

// Apply to element with .markdown-body class
document.querySelector('.markdown-body').innerHTML = html;

With React

import { marked } from 'marked';

function MarkdownContent({ content }) {
  const html = marked(content);

  return (
    <article
      className="markdown-body"
      dangerouslySetInnerHTML={{ __html: html }}
    />
  );
}

With Astro

---
import { marked } from 'marked';

const markdown = `# Hello World`;
const html = await marked(markdown);
---

<article class="markdown-body" set:html={html} />

Container Sizing

For optimal readability, constrain the container width:

.markdown-body {
  max-width: 980px;
  margin-inline: auto;
  padding-inline: 1rem;
}

Theme Support

The component automatically adapts to DuskMoonUI themes:

<!-- Light theme -->
<html data-theme="sunshine">
  <article class="markdown-body">...</article>
</html>

<!-- Dark theme -->
<html data-theme="moonlight">
  <article class="markdown-body">...</article>
</html>

Styled Elements Reference

ElementMarkdown SyntaxCSS Selector
Headings# H1 to ###### H6h1 - h6
Bold**text**strong
Italic*text*em
Strikethrough~~text~~del
Link[text](url)a
Inline Code`code`code
Code Block```pre > code
Unordered List- itemul > li
Ordered List1. itemol > li
Blockquote> quoteblockquote
Table| a | b |table
Horizontal Rule---hr
Image![alt](url)img

Accessibility

  • All colors use DuskMoonUI tokens that meet WCAG AA contrast requirements
  • Focus states are clearly visible for keyboard navigation
  • Reduced motion is respected via prefers-reduced-motion media query
  • Semantic HTML elements are styled appropriately
  • Table - Standalone table component
  • Card - Content container
  • Divider - Section separator