Markdown

Markdown renderer for rich formatted content, with headings, lists, tables, code blocks, and KaTeX math expressions out of the box.

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} $$

API

PropTypeDefaultDescription
childrenstring—Required. Markdown source
includeMathbooleanfalseEnable LaTeX math rendering
breakNewLinesbooleanfalseTurn single newlines into line breaks
copyableCodeBlocksbooleantrueShow a copy button on code blocks
collapsibleCodeBlocksbooleantrueRender code blocks in the collapsible view with a View Code button
componentsRecord<string, MarkdownComponent>—Tag name to component overrides, applied over the built-in ones
directivesMarkdownDirective[]—Custom directives, each rendered by its own component
remarkPluginsPluggableList—Extra remark plugins, after the built-in ones
rehypePluginsPluggableList—Extra rehype plugins
allowedElementsstring[]—Only render these elements
disallowedElementsstring[]—Never render these elements
skipHtmlbooleanfalseIgnore raw HTML in the source
urlTransform(url: string) => string—Rewrites URLs; the default drops unsafe protocols (javascript:) and keeps tel: and sms:
classNamestring—Applied to the wrapping element

Styling

Markdown has no component tokens of its own. It reads the shared semantic color, typography and spacing tokens listed in Design tokens, so it follows theme changes made there.