如何在React Markdown中渲染自定义组件（基于Contentlayer文档场景）

核心思路 #

要在React Markdown中渲染<Callout>这类自定义组件，需通过components属性映射自定义标签，同时借助已启用的rehypeRaw插件解析Markdown中的原始HTML语法。

具体步骤 #

1. 导入自定义组件
   将你的Callout组件导入到当前文件：

   import Callout from './path/to/Callout'; // 替换为实际组件路径
   

2. 扩展ReactMarkdown的components配置
   在现有components对象中添加自定义标签的映射（注意：React Markdown会将HTML标签转为小写，所以用callout而非Callout）：

   <ReactMarkdown
     rehypePlugins={[rehypeRaw]}
     className={s.markdown}
     components={{
       code({ inline, children, ...props }) {
         if (!inline) {
           return (
             <SyntaxHighlighter
               style={coldarkDark}
               language={'typescript'}
             >
               {String(children).replace(/\n$/, '')}
             </SyntaxHighlighter>
           );
         }
         return <code {...props}>{children}</code>;
       },
       // 新增自定义组件映射
       callout({ children, ...props }) {
         return <Callout {...props}>{children}</Callout>;
       },
     }}
   >
     {currentDoc.body}
   </ReactMarkdown>
   

3. 处理带Props的自定义组件
   如果Markdown中存在带属性的自定义组件（如<Callout type="warning">注意！</Callout>），上述代码会自动将type等属性传递给Callout组件，无需额外配置。

注意事项 #

• 确保rehypeRaw插件已正确安装并启用，它是解析Markdown中原始HTML标签的关键。
• 自定义HTML标签在React Markdown中会被转为小写，因此映射时必须使用小写的标签名。

内容的提问来源于stack exchange，提问作者Emiliano