Plus · Markdown Render
Markdown Render
Instantly render Markdown and MDX in web pages

When to use

Markdown is a document markup language that can implement basic common rich text functions such as titles, pictures, tables, links, bolding, etc. through simple tags. MDX is based on Markdown and allows the introduction of JSX to achieve more complex and customized document writing and display requirements.
The MarkdownRender component provided by Semi supports rendering Markdown and MDX. No special configuration is required. By passing in plain text, rich text content that conforms to Semi style specifications can be rendered.
Usually used in the following scenarios:
  • Document site writing and rendering
  • Front-end rendering when the server dynamically generates rich text content
  • A light interactive website that focuses on content display

Demos

MarkdownRender supported from v2.62.0

How to import

Basic usage

After importing MarkdownRender, just pass in Markdown or MDX plain text directly.
Introducing SemiMarkdownComponents and passing it into MarkdownRender, basic elements in the document such as text, titles, hyperlinks, pictures, tables, etc. will be rendered using Semi components. Not everyone needs these document elements, so in order to reduce the package size, they need to be introduced manually.

Modify element style

You can arbitrarily replace the display effect of document elements in Markdown or MDX documents. Just pass your rendering component override to the components props.
For example, now you need to set the color of all headings No. 1 to the main color
Basic element tag support that can be overridden a blockquote br code em h1 h2 h3 h4 h5 hr img li ol p pre strong ul table

Simple Markdown

When the Markdown you render is just pure markdown without any JSX code, you can pass format="md" to enable Markdown-only mode. In this mode, you don't need to escape special characters.

Add custom components

By passing in custom components to components Props, you can write JSX directly in Markdown, and the component will be rendered to the final page, supporting JS events. The default Markdown components can be obtained from MarkdownRender.defaultComponents and can be used for secondary packaging.
Note
Try to ensure that the JSX code in the rendered Markdown is trustworthy to prevent XSS.

Add plugins

Support all RemarkPlugin and RehypePlugins plugins of MDXJS through remarkPlugins rehypePlugins, please refer to MDXJS for details

API

PropertiesDescriptionTypeDefault Value
classNameclass namestring-
componentsUsed to override Markdown elements and add custom componentsRecord<string, JSXElementConstructor>-
formatThe incoming raw type, whether it is pure Markdown'md'|'mdx''mdx'
rawplain text in Markdown or MDXstring-
remarkPluginscustom Remark PluginRemark Plugin Array-
rehypePluginscustom Rehype PluginRehype Plugin Array-
stylestyleCSSProperties-

Design Token