Markdown

Render rich formatted content

import { Markdown } from "@plexui/ui/components/Markdown";

Examples

Overview

Headers

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Text samples

Emphasis, aka italics, with asterisks or underscores.

Strong emphasis, aka bold, with asterisks or underscores.

Combined emphasis with asterisks and underscores.

Strikethrough uses two tildes. Scratch this.


Lists

Unordered List

  • Item 1
  • Item 2
    • Nested Item 1
    • Nested Item 2

Ordered List

  1. First item
  2. Second item
    1. Subitem 1
    2. Subitem 2

Sample paragraph breaking up multiple <ol>.

  1. Third item
    1. Subitem 1
    2. Subitem 2
  2. Fourth item

Poorly formatted

  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4
  5. Item 5
  6. Item 10
  7. Item 11

Blockquote

This is a blockquote.

It can span multiple lines and include other elements like lists or even code.


Table

IDTitleOwnerUpdatedProgress
UX-17Notebook typography polishTyler2025-09-0765%
API-24Realtime auth fallbackDavid2025-09-0530%
MD-09Markdown emoji coverageJane2025-09-0695%
PL-42Storybook doc searchZach2025-09-0350%
ACC-12Keyboard trap auditPriya2025-09-0480%
DOC-11Design token glossaryJonah2025-09-0245%
INF-15Bundle size smoke testsElise2025-09-0125%

Links

Here is a sample link.

Inline Code

Here is some inline code: var x = 10;

Nested Elements

Nested Blockquote with Code Block

# Code inside a blockquote
print("Hello from blockquote code block")

Math

Display integral

$$ \int_{0}^{\infty} e^{-x} , dx = 1 $$

Basel problem

$$ \sum_{n=1}^{\infty} \frac{1}{n^2} = \frac{\pi^2}{6} $$

Matrix (bmatrix)

$$ \begin{bmatrix} 1 & 2 \ 3 & 4 \end{bmatrix} $$

Piecewise (cases)

$$ f(x) = \begin{cases} x^2 & x \ge 0 \ -x & x < 0 \end{cases} $$

Reference

PropTypeDefaultDescription
childrenstringMarkdown source
includeMathbooleanfalseEnable LaTeX math rendering