feat(markdown): 添加 Markdown 渲染组件
- 添加 MarkdownRenderer 组件支持 GFM 语法渲染 - 添加 CodeBlock 组件支持代码块语法高亮 - 集成 Prism.js 实现多语言语法高亮 - 支持代码复制功能
This commit is contained in:
gaoziman
parent
e161da75c7
commit
227a96b232
135
src/components/markdown/CodeBlock.tsx
Normal file
135
src/components/markdown/CodeBlock.tsx
Normal file
@ -0,0 +1,135 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useEffect, useRef, useState, useMemo } from 'react';
|
||||||
|
import { Copy, Check } from 'lucide-react';
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
import Prism from 'prismjs';
|
||||||
|
import 'prismjs/components/prism-javascript';
|
||||||
|
import 'prismjs/components/prism-typescript';
|
||||||
|
import 'prismjs/components/prism-jsx';
|
||||||
|
import 'prismjs/components/prism-tsx';
|
||||||
|
import 'prismjs/components/prism-python';
|
||||||
|
import 'prismjs/components/prism-java';
|
||||||
|
import 'prismjs/components/prism-c';
|
||||||
|
import 'prismjs/components/prism-cpp';
|
||||||
|
import 'prismjs/components/prism-csharp';
|
||||||
|
import 'prismjs/components/prism-go';
|
||||||
|
import 'prismjs/components/prism-rust';
|
||||||
|
import 'prismjs/components/prism-sql';
|
||||||
|
import 'prismjs/components/prism-bash';
|
||||||
|
import 'prismjs/components/prism-json';
|
||||||
|
import 'prismjs/components/prism-yaml';
|
||||||
|
import 'prismjs/components/prism-markdown';
|
||||||
|
import 'prismjs/components/prism-css';
|
||||||
|
import 'prismjs/components/prism-scss';
|
||||||
|
import 'prismjs/components/prism-markup';
|
||||||
|
|
||||||
|
interface CodeBlockProps {
|
||||||
|
code: string;
|
||||||
|
language?: string;
|
||||||
|
showLineNumbers?: boolean;
|
||||||
|
className?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 语言别名映射
|
||||||
|
const languageAliases: Record<string, string> = {
|
||||||
|
js: 'javascript',
|
||||||
|
ts: 'typescript',
|
||||||
|
py: 'python',
|
||||||
|
rb: 'ruby',
|
||||||
|
sh: 'bash',
|
||||||
|
shell: 'bash',
|
||||||
|
yml: 'yaml',
|
||||||
|
html: 'markup',
|
||||||
|
xml: 'markup',
|
||||||
|
svg: 'markup',
|
||||||
|
};
|
||||||
|
|
||||||
|
export function CodeBlock({
|
||||||
|
code,
|
||||||
|
language = 'text',
|
||||||
|
showLineNumbers = true,
|
||||||
|
className,
|
||||||
|
}: CodeBlockProps) {
|
||||||
|
const [copied, setCopied] = useState(false);
|
||||||
|
|
||||||
|
// 规范化语言名称
|
||||||
|
const normalizedLanguage = languageAliases[language.toLowerCase()] || language.toLowerCase();
|
||||||
|
|
||||||
|
// 使用 useMemo 缓存高亮后的 HTML，避免频繁重新高亮
|
||||||
|
const highlightedCode = useMemo(() => {
|
||||||
|
const grammar = Prism.languages[normalizedLanguage];
|
||||||
|
if (grammar) {
|
||||||
|
return Prism.highlight(code, grammar, normalizedLanguage);
|
||||||
|
}
|
||||||
|
return code;
|
||||||
|
}, [code, normalizedLanguage]);
|
||||||
|
|
||||||
|
const handleCopy = async () => {
|
||||||
|
try {
|
||||||
|
await navigator.clipboard.writeText(code);
|
||||||
|
setCopied(true);
|
||||||
|
setTimeout(() => setCopied(false), 2000);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to copy code:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const lines = code.split('\n');
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={cn('relative group rounded-lg overflow-hidden my-4', className)}>
|
||||||
|
{/* 顶部工具栏 */}
|
||||||
|
<div className="flex items-center justify-between px-4 py-2 bg-[#2d2d2d] text-gray-400 text-sm">
|
||||||
|
<span className="font-mono">{language || 'code'}</span>
|
||||||
|
<button
|
||||||
|
onClick={handleCopy}
|
||||||
|
className="inline-flex items-center gap-1.5 px-2 py-1 rounded hover:bg-white/10 transition-colors"
|
||||||
|
title="Copy code"
|
||||||
|
>
|
||||||
|
{copied ? (
|
||||||
|
<>
|
||||||
|
<Check size={14} className="text-green-400" />
|
||||||
|
<span className="text-green-400">Copied!</span>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Copy size={14} />
|
||||||
|
<span>Copy</span>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 代码区域 */}
|
||||||
|
<div className="relative overflow-x-auto bg-[#1e1e1e]">
|
||||||
|
{showLineNumbers && (
|
||||||
|
<div className="absolute left-0 top-0 bottom-0 w-12 bg-[#1e1e1e] border-r border-gray-700 select-none">
|
||||||
|
<div className="py-4 px-2 text-right">
|
||||||
|
{lines.map((_, index) => (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className="text-gray-500 text-sm font-mono leading-6"
|
||||||
|
>
|
||||||
|
{index + 1}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<pre
|
||||||
|
className={cn(
|
||||||
|
'p-4 overflow-x-auto',
|
||||||
|
showLineNumbers && 'pl-16'
|
||||||
|
)}
|
||||||
|
style={{ margin: 0, background: 'transparent' }}
|
||||||
|
>
|
||||||
|
<code
|
||||||
|
className={`language-${normalizedLanguage} text-sm leading-6`}
|
||||||
|
dangerouslySetInnerHTML={{ __html: highlightedCode }}
|
||||||
|
/>
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
222
src/components/markdown/MarkdownRenderer.tsx
Normal file
222
src/components/markdown/MarkdownRenderer.tsx
Normal file
@ -0,0 +1,222 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { memo } from 'react';
|
||||||
|
import ReactMarkdown from 'react-markdown';
|
||||||
|
import remarkGfm from 'remark-gfm';
|
||||||
|
import { CodeBlock } from './CodeBlock';
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
|
||||||
|
interface MarkdownRendererProps {
|
||||||
|
content: string;
|
||||||
|
className?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 将 components 配置提取到组件外部，避免每次渲染时创建新对象
|
||||||
|
const markdownComponents = {
|
||||||
|
// 代码块
|
||||||
|
code({ className, children, ...props }: { className?: string; children?: React.ReactNode }) {
|
||||||
|
const match = /language-(\w+)/.exec(className || '');
|
||||||
|
const isInline = !match && !className;
|
||||||
|
|
||||||
|
if (isInline) {
|
||||||
|
// 行内代码
|
||||||
|
return (
|
||||||
|
<code
|
||||||
|
className="bg-red-50 text-red-700 px-1.5 py-0.5 rounded text-sm font-mono"
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</code>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 代码块
|
||||||
|
return (
|
||||||
|
<CodeBlock
|
||||||
|
code={String(children).replace(/\n$/, '')}
|
||||||
|
language={match ? match[1] : 'text'}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
|
// 段落
|
||||||
|
p({ children }: { children?: React.ReactNode }) {
|
||||||
|
return (
|
||||||
|
<p className="mb-3 last:mb-0 leading-[1.7]">
|
||||||
|
{children}
|
||||||
|
</p>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
|
// 标题
|
||||||
|
h1({ children }: { children?: React.ReactNode }) {
|
||||||
|
return (
|
||||||
|
<h1 className="text-lg font-bold mt-5 mb-3 text-[var(--color-text-primary)]">
|
||||||
|
{children}
|
||||||
|
</h1>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
h2({ children }: { children?: React.ReactNode }) {
|
||||||
|
return (
|
||||||
|
<h2 className="text-base font-bold mt-4 mb-2 text-[var(--color-text-primary)]">
|
||||||
|
{children}
|
||||||
|
</h2>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
h3({ children }: { children?: React.ReactNode }) {
|
||||||
|
return (
|
||||||
|
<h3 className="text-sm font-semibold mt-3 mb-2 text-[var(--color-text-primary)]">
|
||||||
|
{children}
|
||||||
|
</h3>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
h4({ children }: { children?: React.ReactNode }) {
|
||||||
|
return (
|
||||||
|
<h4 className="text-sm font-semibold mt-2 mb-1 text-[var(--color-text-primary)]">
|
||||||
|
{children}
|
||||||
|
</h4>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
|
// 列表
|
||||||
|
ul({ children }: { children?: React.ReactNode }) {
|
||||||
|
return (
|
||||||
|
<ul className="list-disc pl-5 my-2 space-y-1">
|
||||||
|
{children}
|
||||||
|
</ul>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
ol({ children }: { children?: React.ReactNode }) {
|
||||||
|
return (
|
||||||
|
<ol className="list-decimal pl-5 my-2 space-y-1">
|
||||||
|
{children}
|
||||||
|
</ol>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
li({ children }: { children?: React.ReactNode }) {
|
||||||
|
return (
|
||||||
|
<li className="leading-relaxed text-sm">
|
||||||
|
{children}
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
|
// 链接
|
||||||
|
a({ href, children }: { href?: string; children?: React.ReactNode }) {
|
||||||
|
return (
|
||||||
|
<a
|
||||||
|
href={href}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="text-[var(--color-primary)] hover:underline"
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</a>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
|
// 粗体
|
||||||
|
strong({ children }: { children?: React.ReactNode }) {
|
||||||
|
return (
|
||||||
|
<strong className="font-semibold">
|
||||||
|
{children}
|
||||||
|
</strong>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
|
// 斜体
|
||||||
|
em({ children }: { children?: React.ReactNode }) {
|
||||||
|
return (
|
||||||
|
<em className="italic">
|
||||||
|
{children}
|
||||||
|
</em>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
|
// 引用
|
||||||
|
blockquote({ children }: { children?: React.ReactNode }) {
|
||||||
|
return (
|
||||||
|
<blockquote className="border-l-3 border-[var(--color-primary)] pl-3 my-3 italic text-sm text-[var(--color-text-secondary)]">
|
||||||
|
{children}
|
||||||
|
</blockquote>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
|
// 分割线
|
||||||
|
hr() {
|
||||||
|
return (
|
||||||
|
<hr className="my-4 border-[var(--color-border)]" />
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
|
// 表格
|
||||||
|
table({ children }: { children?: React.ReactNode }) {
|
||||||
|
return (
|
||||||
|
<div className="overflow-x-auto my-3">
|
||||||
|
<table className="min-w-full border border-[var(--color-border)] rounded-lg overflow-hidden text-sm">
|
||||||
|
{children}
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
thead({ children }: { children?: React.ReactNode }) {
|
||||||
|
return (
|
||||||
|
<thead className="bg-[var(--color-bg-tertiary)]">
|
||||||
|
{children}
|
||||||
|
</thead>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
tbody({ children }: { children?: React.ReactNode }) {
|
||||||
|
return (
|
||||||
|
<tbody className="divide-y divide-[var(--color-border)]">
|
||||||
|
{children}
|
||||||
|
</tbody>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
tr({ children }: { children?: React.ReactNode }) {
|
||||||
|
return (
|
||||||
|
<tr className="hover:bg-[var(--color-bg-hover)] transition-colors">
|
||||||
|
{children}
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
th({ children }: { children?: React.ReactNode }) {
|
||||||
|
return (
|
||||||
|
<th className="px-3 py-1.5 text-left text-xs font-semibold text-[var(--color-text-primary)]">
|
||||||
|
{children}
|
||||||
|
</th>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
td({ children }: { children?: React.ReactNode }) {
|
||||||
|
return (
|
||||||
|
<td className="px-3 py-1.5 text-xs text-[var(--color-text-secondary)]">
|
||||||
|
{children}
|
||||||
|
</td>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
|
// 图片
|
||||||
|
img({ src, alt }: { src?: string; alt?: string }) {
|
||||||
|
return (
|
||||||
|
<img
|
||||||
|
src={src}
|
||||||
|
alt={alt || ''}
|
||||||
|
className="max-w-full h-auto rounded-lg my-3"
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
// 使用 memo 包裹组件，避免不必要的重渲染
|
||||||
|
export const MarkdownRenderer = memo(function MarkdownRenderer({ content, className }: MarkdownRendererProps) {
|
||||||
|
return (
|
||||||
|
<div className={cn('markdown-content', className)}>
|
||||||
|
<ReactMarkdown
|
||||||
|
remarkPlugins={[remarkGfm]}
|
||||||
|
components={markdownComponents}
|
||||||
|
>
|
||||||
|
{content}
|
||||||
|
</ReactMarkdown>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
});
|
||||||
Loading…
Reference in New Issue
Block a user