Data Displayyew-duskmoon-uiimplemented1 demos

Markdown

Markdown renders Markdown content with GitHub-flavored syntax, front matter, color previews, and configurable soft line breaks.

Import@duskmoon-dev/components/markdown

2API sections

5documented props

6behavior scenarios

Key API

markdownbreakscolorChipsfrontMattervariant

Usage

When to use

Use it to clarify state, metadata, content hierarchy, or loading without creating a new workflow.
Pair it with semantic content so visual treatment never becomes the only source of meaning.

Implementation notes

StylesheetImport @duskmoon-dev/components/styles.css once in the app or docs shell.

StateStart with default props for static examples, then switch to controlled props when state must be shared.

ThemeThe preview inherits the active DuskMoon data-theme value from the docs layout.

Features

Visual hierarchy

Focuses on status, metadata, empty/loading states, or content grouping without owning application state.

Theme integration

Uses DuskMoon tokens so the component follows the active docs theme.

Primary API surface

Markdown is most often configured through `markdown`, `breaks`, `colorChips`, `frontMatter`.

Covered behavior

Renders GFM and soft line breaks by default

Feature Demos

Feature demos are authored for the component page, then supplemented with behavior scenarios from the component test coverage.

Preview

title: DmMarkdown feature showcase
tags:
  - react
  - markdown
accent: '#4C86FC'

DmMarkdown rendering

DuskMoon Markdown renders source text in the shared typography scope.
This line demonstrates breaks={true}.

Inline color chips

Color	Inline code
Brand blue	`#4C86FC`
White	`#fff`
Black	`#000`
Transparent red	`#FF000080`

Front matter, color chips, and line breaks

authored

Render YAML front matter, preview inline CSS colors, and explicitly enable soft line breaks.

Source

import "@duskmoon-dev/components/styles.css";
import { Markdown } from "@duskmoon-dev/components/markdown";

const source = `---
title: DmMarkdown feature showcase
tags:
  - react
  - markdown
accent: '#4C86FC'
---
# DmMarkdown rendering

DuskMoon Markdown renders source text in the shared typography scope.
This line demonstrates \`breaks={true}\`.

## Inline color chips

| Color | Inline code |
| --- | --- |
| Brand blue | \`#4C86FC\` |
| White | \`#fff\` |
| Black | \`#000\` |
| Transparent red | \`#FF000080\` |
`;

export function MarkdownFeaturesDemo() {
  return (
    <Markdown
      markdown={source}
      colorChips
      frontMatter="render"
      breaks={true}
    />
  );
}

API

The API reference below lists every parsed exported type or interface for Markdown. Start with `markdown`, `breaks`, `colorChips`, `frontMatter` for common usage.

Types: packages/components/src/components/markdown/Markdown.types.tsScenarios: packages/components/src/components/markdown/Markdown.test.tsx

MarkdownPropsinterface extends Omit<ComponentProps<"div">, "children">

Prop	Type	Required	Description
`markdown`	`string`	No	Markdown source to render.
`breaks`	`boolean`	No	Convert soft line endings to `<br>` elements. @default true
`colorChips`	`boolean`	No	Add a visual swatch to inline code containing a valid CSS color. @default true
`frontMatter`	`MarkdownFrontMatterMode`	No	Control handling of YAML front matter at the beginning of the source. @default "render"
`variant`	`string`	No	Optional color variant used to build the `markdown-body-{variant}` class.

MarkdownFrontMatterModetype

"render" | "hidden" | "disabled"