Markdown

The Markdown block allows you to import and include plain markdown in your MDX files.

Screenshot of Markdown block

When importing markdown files, it’s important to use the ?raw suffix on the import path to ensure the content is imported as-is, and isn’t being evaluated:

README.md
Loading...
Header.mdx
Loading...

Markdown

Loading...

Markdown is configured with the following props:

children

Type: string

Provides the markdown-formatted string to parse and display.

options

Specifies the options passed to the underlying markdown-to-jsx library.

Why not import markdown directly?

From a purely technical standpoint, we could include the imported markdown directly in the MDX file like this:

THIS WON'T WORK, THIS IS TO DEMONSTRATE AN ERROR
Loading...

However, there are small syntactical differences between plain markdown and MDX2. MDX2 is more strict and will interpret certain content as JSX expressions. Here’s an example of a perfectly valid markdown file, that would break if it was handled directly by MDX2:

A header
Loading...

Furthermore, MDX2 wraps all strings on newlines in p tags or similar, meaning that content would render differently between a plain .md file and an .mdx file.

A header
Loading...

Was this page helpful?

Markdown accepted ([link text](url), _italic_, **bold**, etc). Your anonymous feedback will be posted publicly on GitHub.

✍️ Edit on GitHub – PRs welcome!
Storybook
Join the community
6,622 developers and counting
WhyWhy StorybookComponent-driven UI
DocsGuidesTutorialsChangelogTelemetryStatus
CommunityAddonsGet involvedBlog
ShowcaseExploreProjectsComponent glossary
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI