Markdown

Markdown component provides a way to render Markdown content with custom styling and component mapping. It supports standard Markdown syntax including headers, lists, code blocks, and more.

Source

View source code

LLM docs

LLM documentation

Package

@platform-blocks/react-ui-library

Examples

⁽⁶⁾

Properties

⁽²²⁾

Basic Usage

Simple markdown rendering with headers, lists, and text formatting.

Loading demo…

import
 
{
 
Block
,
 
Markdown
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
const
 
CONTENT
 
=
 
`# Hello Markdown
 
This is a **bold** statement and this is _italic_.
 
- Item one
- Item two
- Item three
 
> Blockquote with *inline emphasis* and **strong** text.
 
Inline code: \`const x = 42;\``
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Block
 fullWidth
>
      
<Markdown
>
{
CONTENT
}
</Markdown
>
      
<Text
 
size
=
"sm"
 
color
=
"secondary"
>
        
Rendered
 using the 
default
 
Markdown
 renderer
      
</Text
>
    
</Block
>
  
)
;
}

Code Blocks

Markdown rendering with syntax-highlighted code blocks.

Loading demo…

import
 
{
 
Block
,
 
Markdown
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
const
 
CONTENT
 
=
 
`# Code examples
 
Here's some JavaScript:
 
\`\`\`javascript
function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}
\`\`\`
 
And some TypeScript:
 
\`\`\`typescript
interface User {
  id: number;
  name: string;
  email: string;
}
 
const user: User = {
  id: 1,
  name: "John Doe",
  email: "john@example.com"
};
\`\`\`
 
Inline code: \`const result = fibonacci(10);\``
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Block
 fullWidth
>
      
<Markdown
>
{
CONTENT
}
</Markdown
>
      
<Text
 
size
=
"sm"
 
color
=
"secondary"
>
        
Showcases
 fenced code blocks with syntax highlighting
      
</Text
>
    
</Block
>
  
)
;
}

Custom Components

Custom component mapping for markdown elements.

Loading demo…

import
 
{
 
Block
,
 
Card
,
 
Markdown
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
const
 CUSTOM_COMPONENTS 
=
 
{
  h1
:
 
(
{
 children
,
 
.
.
.
props 
}
:
 
any
)
 
=>
 
(
    
<Text
 
size
=
"xl"
 
weight
=
"bold"
 
color
=
"primary"
 
mb
=
{
12
}
 
{
.
.
.
props
}
>
      
{
children
}
    
</Text
>
  
)
,
  h2
:
 
(
{
 children
,
 
.
.
.
props 
}
:
 
any
)
 
=>
 
(
    
<Text
 
size
=
"lg"
 
weight
=
"semibold"
 
color
=
"accent"
 
mb
=
{
8
}
 
{
.
.
.
props
}
>
      
{
children
}
    
</Text
>
  
)
,
  p
:
 
(
{
 children
,
 
.
.
.
props 
}
:
 
any
)
 
=>
 
(
    
<Text
 
size
=
"md"
 
mb
=
{
8
}
 
{
.
.
.
props
}
>
      
{
children
}
    
</Text
>
  
)
,
  blockquote
:
 
(
{
 children
,
 
.
.
.
props 
}
:
 
any
)
 
=>
 
(
    
<Card
 
p
=
{
12
}
 
variant
=
"outline"
 
bg
=
"muted"
 
mb
=
{
8
}
 
{
.
.
.
props
}
>
      
<Text
 
size
=
"sm"
 
style
=
{
{
 fontStyle
:
 
'italic'
 
}
}
>
        
{
children
}
      
</Text
>
    
</Card
>
  
)
,
}
;
 
const
 
CONTENT
 
=
 
`# Custom styled Markdown
 
## This is a subtitle
 
This paragraph uses custom styling and components.
 
> This blockquote is rendered with a custom Card component and muted background.
 
Regular paragraph text with default styling.
`
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Block
 fullWidth
>
      
<Markdown
 
components
=
{
CUSTOM_COMPONENTS
}
>
{
CONTENT
}
</Markdown
>
      
<Text
 
size
=
"sm"
 
color
=
"secondary"
>
        
Headings
,
 paragraphs
,
 and quotes use custom renderers
      
</Text
>
    
</Block
>
  
)
;
}

Inline Usage

Using markdown inline within other text content.

Loading demo…

import
 
{
 
Block
,
 
Markdown
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
const
 inlineContent 
=
 '
This
 is 
**
bold text
**
 and 
this
 is 
*
italic text
*
 with 
`inline code`
.
'
;
 
  
return
 
(
    
<Block
 fullWidth
>
      
<Text
 
size
=
"md"
 
as
=
"div"
>
        
Inline
 markdown
:
 
<Markdown
>
{
inlineContent
}
</Markdown
>
      
</Text
>
 
      
<Text
 
size
=
"md"
 
as
=
"div"
>
        
Mix
 with regular text
:
 
Here
's some regular text
,
 then 
<Markdown
>**
markdown formatting**
</Markdown
>
 and
        back to regular
.
      
</Text
>
 
      
<Text
 
size
=
"md"
 
as
=
"div"
>
        
Code
 in context
:
 
Use
 
<Markdown
>
`const x = 42;`
</Markdown
>
 to declare a variable
.
      
</Text
>
    
</Block
>
  
)
;
}

Media & Tables

Markdown with images, links, tables, and horizontal rules.

Loading demo…

import
 
{
 
Block
,
 
Markdown
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
const
 
CONTENT
 
=
 `# 
Media
 in 
Markdown
 
## 
Images
 
!
[
PlatformBlocks
 
Logo
]
(
https:
//raw.githubusercontent.com/platform-blocks/react-ui-library/main/apps/react-ui-library.com/assets/favicon.png)
 
## 
Links
 
Visit
 the 
[
PlatformBlocks
 
Documentation
]
(
https:
//react-ui-library.com) for more examples.
 
## 
Tables
 
|
 
Feature
 
|
 
Status
 
|
 
Notes
 
|
|---------|--------|-------|
|
 
**
Text
 
Formatting
**
 
|
 ✅ 
|
 
Bold
,
 _italic_
,
 \`code\` 
|
|
 
Code
 
Blocks
 
|
 ✅ 
|
 
Syntax
 highlighting 
|
|
 
Tables
 
|
 ✅ 
|
 
Responsive
 layout 
|
|
 
Images
 
|
 ✅ 
|
 
Auto
-
sizing 
|
|
 
[
Links
]
(
https:
//react-ui-library.com) | ✅ | External navigation |
 
## 
Horizontal
 
Rule
 
Content
 above the line
.
 
---
 
Content
 below the line
.
`
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Block
 fullWidth
>
      
<Markdown
>
{
CONTENT
}
</Markdown
>
      
<Text
 
size
=
"sm"
 
color
=
"secondary"
>
        
Images
,
 links
,
 tables
,
 and horizontal rules render inline
      
</Text
>
    
</Block
>
  
)
;
}

Table Support

Markdown tables with proper formatting and styling.

Loading demo…

import
 
{
 
Block
,
 
Markdown
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
const
 
CONTENT
 
=
 `# 
Table
 examples
 
## 
Basic
 table
 
|
 
Name
 
|
 
Age
 
|
 
City
 
|
|------|-----|------|
|
 
John
 
Doe
 
|
 
30
 
|
 
New
 
York
 
|
|
 
Jane
 
Smith
 
|
 
25
 
|
 
Los
 
Angeles
 
|
|
 
Bob
 
Johnson
 
|
 
35
 
|
 
Chicago
 
|
 
## 
Table
 with formatting
 
|
 
Feature
 
|
 
Status
 
|
 
**
Priority
**
 
|
 
Notes
 
|
|---------|--------|-------------|--------|
|
 
Authentication
 
|
 ✅ 
|
 
**
High
**
 
|
 _Complete_ 
|
|
 
User
 
Management
 
|
 🔄 
|
 
**
Medium
**
 
|
 
In
 progress 
|
|
 
Analytics
 
|
 ❌ 
|
 
**
Low
**
 
|
 \`
Not
 started\` 
|
|
 
API
 
Integration
 
|
 ✅ 
|
 
**
High
**
 
|
 
[
Documentation
]
(
https:
//example.com) |
 
## 
Table
 with code
 
|
 
Language
 
|
 
Extension
 
|
 
Sample
 code 
|
|----------|-----------|-------------|
|
 
TypeScript
 
|
 \`
.
tsx\` 
|
 \`
const
 x
:
 
string
 
=
 
"hello"
;
\` 
|
|
 
JavaScript
 
|
 \`
.
js\` 
|
 \`
function
 
hello
(
)
 
{
 
return
 
"world"
;
 
}
\` 
|
|
 
Python
 
|
 \`
.
py\` 
|
 \`def 
hello
(
)
:
 
return
 
"world"
\` 
|
 
## 
Complex
 table
 
|
 
Component
 
|
 
**
Props
**
 
|
 _Description_ 
|
 
Example
 
|
|-----------|----------|-------------|---------|
|
 
Button
 
|
 \`variant\`
,
 \`size\`
,
 \`disabled\` 
|
 
Interactive
 button element 
|
 \`
<Button
 
variant
=
"filled"
>
Click
 me
</Button
>
\` 
|
|
 
Input
 
|
 \`placeholder\`
,
 \`value\`
,
 \`onChange\` 
|
 
Text
 input field 
|
 \`
<Input
 
placeholder
=
"Enter text"
 
/>
\` 
|
|
 
Card
 
|
 \`variant\`
,
 \`padding\` 
|
 
Container
 component 
|
 \`
<Card
 
variant
=
"outline"
>
Content
</Card
>
\` 
|
`
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Block
 fullWidth
>
      
<Markdown
>
{
CONTENT
}
</Markdown
>
      
<Text
 
size
=
"sm"
 
color
=
"secondary"
>
        
Multiple
 table layouts rendered with 
Markdown
      
</Text
>
    
</Block
>
  
)
;
}

Scan to open this page on your phonereact-ui-library.com/components/Markdown

</>

react-ui-library

100+ accessible, themeable components that work seamlessly across iOS, Android, and Web.

A Platform Blocks product.

Quick Links

Components Charts Hooks

Docs

Getting Started Localization llms.txt

Resources

FAQ Changelog Accessibility Sitemap