33 lines
931 B
JavaScript
33 lines
931 B
JavaScript
import React from 'react';
|
||
import ReactMarkdown from 'react-markdown';
|
||
import remarkGfm from 'remark-gfm';
|
||
import rehypeRaw from 'rehype-raw';
|
||
import rehypeSanitize from 'rehype-sanitize';
|
||
import './MarkdownRenderer.css';
|
||
|
||
/**
|
||
* 统一的Markdown渲染组件
|
||
*
|
||
* @param {string} content - Markdown内容
|
||
* @param {string} className - 自定义CSS类名（可选）
|
||
* @param {string} emptyMessage - 内容为空时显示的消息（可选）
|
||
*/
|
||
const MarkdownRenderer = ({ content, className = '', emptyMessage = '暂无内容' }) => {
|
||
if (!content || content.trim() === '') {
|
||
return <div className="markdown-empty">{emptyMessage}</div>;
|
||
}
|
||
|
||
return (
|
||
<div className={`markdown-renderer ${className}`}>
|
||
<ReactMarkdown
|
||
remarkPlugins={[remarkGfm]}
|
||
rehypePlugins={[rehypeRaw, rehypeSanitize]}
|
||
>
|
||
{content}
|
||
</ReactMarkdown>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default MarkdownRenderer;
|