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
- First item
- Second item
- Subitem 1
- Subitem 2
Sample paragraph breaking up multiple <ol>.
- Third item
- Subitem 1
- Subitem 2
- Fourth item
Poorly formatted
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
- Item 10
- Item 11
Blockquote
This is a blockquote.
It can span multiple lines and include other elements like lists or even code.
Table
| ID | Title | Owner | Updated | Progress |
|---|---|---|---|---|
| UX-17 | Notebook typography polish | Tyler | 2025-09-07 | 65% |
| API-24 | Realtime auth fallback | David | 2025-09-05 | 30% |
| MD-09 | Markdown emoji coverage | Jane | 2025-09-06 | 95% |
| PL-42 | Storybook doc search | Zach | 2025-09-03 | 50% |
| ACC-12 | Keyboard trap audit | Priya | 2025-09-04 | 80% |
| DOC-11 | Design token glossary | Jonah | 2025-09-02 | 45% |
| INF-15 | Bundle size smoke tests | Elise | 2025-09-01 | 25% |
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
| Prop | Type | Default | Description |
|---|---|---|---|
children | string | — | Required. Markdown source |
includeMath | boolean | false | Enable LaTeX math rendering |
breakNewLines | boolean | false | Turn single newlines into line breaks |
copyableCodeBlocks | boolean | true | Show a copy button on code blocks |
collapsibleCodeBlocks | boolean | true | Render code blocks in the collapsible view with a View Code button |
components | Record<string, MarkdownComponent> | — | Tag name to component overrides, applied over the built-in ones |
directives | MarkdownDirective[] | — | Custom directives, each rendered by its own component |
remarkPlugins | PluggableList | — | Extra remark plugins, after the built-in ones |
rehypePlugins | PluggableList | — | Extra rehype plugins |
allowedElements | string[] | — | Only render these elements |
disallowedElements | string[] | — | Never render these elements |
skipHtml | boolean | false | Ignore raw HTML in the source |
urlTransform | (url: string) => string | — | Rewrites URLs; the default drops unsafe protocols (javascript:) and keeps tel: and sms: |
className | string | — | 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.