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 tableSimple 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 detailsAPI
| Properties | Description | Type | Default Value |
|---|---|---|---|
| className | class name | string | - |
| components | Used to override Markdown elements and add custom components | Record<string, JSXElementConstructor> | - |
| format | The incoming raw type, whether it is pure Markdown | 'md'|'mdx' | 'mdx' |
| raw | plain text in Markdown or MDX | string | - |
| remarkGfm | Whether to enable Github GFM syntax. Safari 16.3 and earlier does not support lookaround assertions and will report an error. | bool | true |
| remarkPlugins | custom Remark Plugin | Remark Plugin Array | - |
| rehypePlugins | custom Rehype Plugin | Rehype Plugin Array | - |
| style | style | CSSProperties | - |