MarkdownContent is a content component that will transform a Markdown string into Atom Learning design system components.

Currently it suppports converts the following Markdown elements into components:

TypeComponentDefault component implemented
blockquote
code<Box as="pre" />
containerDirective
emphasis<em />
heading<Heading />
image<Image />
inlineCode<Box as="code" />
leafDirective
link<Link />
list<List />
listItem<List.Item />
paragraph<Text />
strong<strong />
text{value}
textDirective
thematicBreak<Divider />
Edit me!

Override with custom components

You can override the component MarkdownContent will render for each type by passing an object to the customComponents prop where each key is the name of a Markdown Type (see the table above) and the value is a reference to the component you want to render:

<MarkdownContent
content="This paragraph will have a red color"
customComponents={{
paragraph: ({ node, handleNode }) => (
<Text css={{ color: 'red' }}>{node.children.map(handleNode)}</Text>
)
}}
/>

Markdown directives

The MarkdownContent component supports Markdown directives. There are no directives built in by default, but you can define your own directives by using the customComponents prop.

See the following example that transform the following directive into a Button component:

<MarkdownContent
content=":button[This is a button]{href=https://atomlearning.co.uk isRounded=true}"
customComponents={{
textDirective: ({ node, handleNode }) => {
const { name, attributes, children } = node
if (name === 'button') {
return <Button {...attributes}>{children.map(handleNode)}</Button>
}
return null
}
}}
/>

API Reference

PropTypeDefaultRequired
contentstring

-

customComponents
{ [key: string]: FC<{ node: any; handleNode: HandleNode; }>; }
{}

-

cssCSSProperties

-

-