33 lines
931 B
React
33 lines
931 B
React
|
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;
|