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
LLM docs
Package
npm install @plocks/codeExamples
6
Properties
34
Basics
Simple markdown rendering with headers, lists, and text formatting.
Loading demo…
import { Block } from '@plocks/ui';
import { Markdown } from '@plocks/code';
import content from './content.md';
export function Demo() {
return (
<Block fullWidth>
<Markdown>{content}</Markdown>
</Block>
);
}Code Blocks
Markdown rendering with syntax-highlighted code blocks.
Loading demo…
import { Block } from '@plocks/ui';
import { Markdown } from '@plocks/code';
import content from './content.md';
export function Demo() {
return (
<Block fullWidth>
<Markdown>{content}</Markdown>
</Block>
);
}Custom Components
Custom component mapping for markdown elements.
Loading demo…
import { Block, Card, Text } from '@plocks/ui';
import { Markdown, type MarkdownComponentMap } from '@plocks/code';
import content from './content.md';
// Keys match `MarkdownComponentMap`; anything not listed keeps the default renderer.
const CUSTOM_COMPONENTS: Partial<MarkdownComponentMap> = {
heading: ({ level, children }) => (
<Text
variant={level === 1 ? 'h1' : 'h2'}
size={level === 1 ? 'xl' : 'lg'}
fw={level === 1 ? 'bold' : 'semibold'}
c={level === 1 ? 'primary' : 'secondary'}
mb={level === 1 ? 12 : 8}
>
{children}
</Text>
),
paragraph: ({ children }) => (
<Text size="md" mb={8}>
{children}
</Text>
),
blockquote: ({ children }) => (
<Card p={12} variant="outline" bg="muted" mb={8}>
<Text size="sm" style={{ fontStyle: 'italic' }}>
{children}
</Text>
</Card>
),
};
export function Demo() {
return (
<Block fullWidth>
<Markdown components={CUSTOM_COMPONENTS}>{content}</Markdown>
</Block>
);
}Inline Usage
Using markdown inline within other text content.
Loading demo…
import { Block, Text } from '@plocks/ui';
import { Markdown } from '@plocks/code';
import content from './content.md';
export function Demo() {
const [inlineContent, formatting, code] = content.trim().split(/\n\s*\n/);
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>{formatting}</Markdown> and
back to regular.
</Text>
<Text size="md" as="div">
Code in context: Use <Markdown>{code}</Markdown> to declare a variable.
</Text>
</Block>
);
}Media & Tables
Markdown with images, links, tables, and horizontal rules.
Loading demo…
import { Block } from '@plocks/ui';
import { Markdown } from '@plocks/code';
import content from './content.md';
export function Demo() {
return (
<Block fullWidth>
<Markdown>{content}</Markdown>
</Block>
);
}Table Support
Markdown tables with proper formatting and styling.
Loading demo…
import { Block } from '@plocks/ui';
import { Markdown } from '@plocks/code';
import content from './content.md';
export function Demo() {
return (
<Block fullWidth>
<Markdown>{content}</Markdown>
</Block>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources