markdown2

frontend/src/pages/ForumDetail.jsx

@@ -14,6 +14,8 @@ import rehypeRaw from 'rehype-raw';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import 'katex/dist/katex.min.css';
+import styles from './ForumDetail.module.less';
+import CodeBlock from '../components/CodeBlock';
 
 const { Title, Text } = Typography;
 const { TextArea } = Input;
@@ -133,14 +135,12 @@ const ForumDetail = () => {
     code({node, inline, className, children, ...props}) {
       const match = /language-(\w+)/.exec(className || '')
       return !inline && match ? (
-        <SyntaxHighlighter
-          style={vscDarkPlus}
+        <CodeBlock
           language={match[1]}
-          PreTag="div"
           {...props}
         >
           {String(children).replace(/\n$/, '')}
-        </SyntaxHighlighter>
+        </CodeBlock>
       ) : (
         <code className={className} {...props}>
           {children}
@@ -226,7 +226,7 @@ const ForumDetail = () => {
             fontSize: 16, 
             lineHeight: 1.8, 
             minHeight: 200,
-        }} className="markdown-body">
+        }} className={styles['markdown-body']}>
             <ReactMarkdown 
                 remarkPlugins={[remarkMath, remarkGfm]}
                 rehypePlugins={[rehypeKatex, rehypeRaw]}
@@ -275,7 +275,7 @@ const ForumDetail = () => {
                             </Space>
                             <Text style={{ color: '#444', fontSize: 12 }}>#{index + 1}</Text>
                         </div>
-                        <div style={{ color: '#eee', fontSize: isMobile ? 14 : 16 }}>
+                        <div style={{ color: '#eee', fontSize: isMobile ? 14 : 16 }} className={styles['markdown-body']}>
                             <ReactMarkdown 
                                 remarkPlugins={[remarkMath, remarkGfm]}
                                 rehypePlugins={[rehypeKatex, rehypeRaw]}