Markdown

markdown

Renders read-only Markdown blocks, inline formatting, links, quotes, lists, and fenced code.

Usage

Basic usage

Pass in the Markdown source text as children, zero-dependency read-only rendering, and typesetting Prose semantics token.

Quick sort

Here is a concise implementation:

function quickSort(arr) {
  if (arr.length <= 1) return arr;
  const [pivot, ...rest] = arr;
  return [
    ...quickSort(rest.filter((x) => x < pivot)),
    pivot,
    ...quickSort(rest.filter((x) => x >= pivot)),
  ];
}

Average complexity O(n log n), worst O(n²). Key points:

Randomly select pivot to avoid the worst case scenario
Inline code and external link render normally

Reference blocks are also supported, and the overall typesetting is Prose semantics token.

tsx

<Markdown>{`## Quick sort

Average complexity **O(n log n)**, key points:

- Randomly select *pivot* to avoid the worst case scenario
- Inline \`code\` and [external link](https://mdn.io) render normally

> Quote blocks are also supported. `}</Markdown>

Form

Supports the GFM style table, which is rendered as a stroke container + shallow bottom table header + row zebra pattern.

Component comparison

Component	Purpose	Editable
Markdown	Read-only rendering	No
MarkdownEditor	Rich text editing	Yes

Inline code and bold render normally outside the table.

tsx

<Markdown>{`## Component comparison

| Component | Purpose | Editable |
| --- | --- | --- |
| Markdown | Read-only rendering | No |
| MarkdownEditor | Rich text editing | Yes |
`}</Markdown>

Compact size

size="sm" is passed to the internal Prose, reducing the typography baseline to text-sm.

Quick sort

Here is a concise implementation:

function quickSort(arr) {
  if (arr.length <= 1) return arr;
  const [pivot, ...rest] = arr;
  return [
    ...quickSort(rest.filter((x) => x < pivot)),
    pivot,
    ...quickSort(rest.filter((x) => x >= pivot)),
  ];
}

Average complexity O(n log n), worst O(n²). Key points:

Randomly select pivot to avoid the worst case scenario
Inline code and external link render normally

Reference blocks are also supported, and the overall typesetting is Prose semantics token.

tsx

<Markdown size="sm">{markdownSource}</Markdown>

When to use

Use Markdown to render a source string as formatted, read-only content. Use [MarkdownEditor] when users must edit the source, Prose when content is already HTML or JSX, and Text for a single atomic passage. The exported parseBlocks helper supports custom rendering from the block-level AST.

Import

import { Markdown, parseBlocks } from "@hulianui/ui"

Props

Name	Type	Default	Description
size	`"sm" \| "base"`	`"base"`	Typography scale passed to the internal Prose component.
className	`string`	—	Additional container class name.

Slots

Slot	Type	Description
children	`string`	Markdown source text (read-only rendering; editing with MarkdownEditor)

Example

tsx

<div className="max-w-2xl">
  <Markdown>{`## Quicksort

\`\`\`js
function quickSort(arr) { /* ... */ }
\`\`\`

Average complexity is **O(n log n)**. Inline \`code\` and [external links](https://mdn.io) render normally.

> Blockquotes inherit Prose semantic tokens.`}</Markdown>
</div>

Usage guidelines

The dependency-free parser returns JSX and does not use dangerouslySetInnerHTML or innerHTML, avoiding the stored-XSS sink described in [[dompurify-vhtml-markdown-sanitize]]. If raw HTML support is added later, sanitize it with DOMPurify before rendering; never send untrusted input directly to innerHTML.
Markdown is read-only and exposes no editing callback. Use MarkdownEditor for bidirectional editing.

Text · Heading · Prose · AuroraText · AnimatedShinyText · AnimatedGradientText

Playground

Layout size

Quick sort

Here is a concise implementation:

function quickSort(arr) {
  if (arr.length <= 1) return arr;
  const [pivot, ...rest] = arr;
  return [
    ...quickSort(rest.filter((x) => x < pivot)),
    pivot,
    ...quickSort(rest.filter((x) => x >= pivot)),
  ];
}

Average complexity O(n log n), worst O(n²). Key points:

Randomly select pivot to avoid the worst case scenario
Inline code and external link render normally

Reference blocks are also supported, and the overall typesetting is Prose semantics token.

<Markdown size="base">{`\n## Title\n\nText **bold** and \`code\`\n`}</Markdown>

Usage

Basic usage

Pass in the Markdown source text as children, zero-dependency read-only rendering, and typesetting Prose semantics token.

Quick sort

Here is a concise implementation:

function quickSort(arr) {
  if (arr.length <= 1) return arr;
  const [pivot, ...rest] = arr;
  return [
    ...quickSort(rest.filter((x) => x < pivot)),
    pivot,
    ...quickSort(rest.filter((x) => x >= pivot)),
  ];
}

Average complexity O(n log n), worst O(n²). Key points:

Randomly select pivot to avoid the worst case scenario
Inline code and external link render normally

Reference blocks are also supported, and the overall typesetting is Prose semantics token.

tsx

<Markdown>{`## Quick sort

Average complexity **O(n log n)**, key points:

- Randomly select *pivot* to avoid the worst case scenario
- Inline \`code\` and [external link](https://mdn.io) render normally

> Quote blocks are also supported. `}</Markdown>

Form

Supports the GFM style table, which is rendered as a stroke container + shallow bottom table header + row zebra pattern.

Component comparison

Component	Purpose	Editable
Markdown	Read-only rendering	No
MarkdownEditor	Rich text editing	Yes

Inline code and bold render normally outside the table.

tsx

<Markdown>{`## Component comparison

| Component | Purpose | Editable |
| --- | --- | --- |
| Markdown | Read-only rendering | No |
| MarkdownEditor | Rich text editing | Yes |
`}</Markdown>

Compact size

size="sm" is passed to the internal Prose, reducing the typography baseline to text-sm.

Quick sort

Here is a concise implementation:

function quickSort(arr) {
  if (arr.length <= 1) return arr;
  const [pivot, ...rest] = arr;
  return [
    ...quickSort(rest.filter((x) => x < pivot)),
    pivot,
    ...quickSort(rest.filter((x) => x >= pivot)),
  ];
}

Average complexity O(n log n), worst O(n²). Key points:

Randomly select pivot to avoid the worst case scenario
Inline code and external link render normally

Reference blocks are also supported, and the overall typesetting is Prose semantics token.

tsx

<Markdown size="sm">{markdownSource}</Markdown>

Name

Type

Default

Description

size

"sm" | "base"

"base"

Typography scale passed to the internal Prose component.

className

string

—

Additional container class name.

Slot

Type

Description

children

string

Markdown source text (read-only rendering; editing with MarkdownEditor)

<div className="max-w-2xl"> <Markdown>{`## Quicksort \`\`\`js function quickSort(arr) { /* ... */ } \`\`\` Average complexity is **O(n log n)**. Inline \`code\` and [external links](https://mdn.io) render normally. > Blockquotes inherit Prose semantic tokens.`}</Markdown> </div>

Usage guidelines

The dependency-free parser returns JSX and does not use dangerouslySetInnerHTML or innerHTML, avoiding the stored-XSS sink described in [[dompurify-vhtml-markdown-sanitize]]. If raw HTML support is added later, sanitize it with DOMPurify before rendering; never send untrusted input directly to innerHTML.

Markdown is read-only and exposes no editing callback. Use MarkdownEditor for bidirectional editing.

Playground

Layout size

Quick sort

Here is a concise implementation:

function quickSort(arr) {
  if (arr.length <= 1) return arr;
  const [pivot, ...rest] = arr;
  return [
    ...quickSort(rest.filter((x) => x < pivot)),
    pivot,
    ...quickSort(rest.filter((x) => x >= pivot)),
  ];
}

Average complexity O(n log n), worst O(n²). Key points:

Randomly select pivot to avoid the worst case scenario
Inline code and external link render normally

Reference blocks are also supported, and the overall typesetting is Prose semantics token.

<Markdown size="base">{`\n## Title\n\nText **bold** and \`code\`\n`}</Markdown>

Markdown

Usage

Basic usage

Quick sort

Form

Component comparison

Compact size

Quick sort

When to use

Import

Props

Slots

Example

Usage guidelines

Related

Playground

Quick sort

Markdown

Usage

Basic usage

Quick sort

Form

Component comparison

Compact size

Quick sort

When to use

Import

Props

Slots

Example

Usage guidelines

Related

Playground

Quick sort