From ad30d3788837e61292e903f70d6025abe42cc510 Mon Sep 17 00:00:00 2001
From: dela <delahayecarry@outlook.com>
Date: Wed, 4 Mar 2026 23:44:11 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E4=BB=A3=E7=A0=81=E9=AB=98?=
 =?UTF-8?q?=E4=BA=AE=E5=92=8C=E6=8D=A2=E8=A1=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/globals.css                 | 40 ++++-------------------------
 src/components/post/PostContent.tsx |  4 +--
 2 files changed, 7 insertions(+), 37 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 1b1a494..7e5f1ee 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -32,41 +32,9 @@
 .hljs {
   background: #fafafa !important;
   padding: 1.5rem;
-  overflow-x: auto;
-}
-
-.hljs-comment,
-.hljs-quote {
-  color: #6b7280;
-  font-style: italic;
-}
-
-.hljs-keyword,
-.hljs-selector-tag,
-.hljs-built_in {
-  color: #1f2937;
-  font-weight: 600;
-}
-
-.hljs-string,
-.hljs-attr {
-  color: #374151;
-}
-
-.hljs-number,
-.hljs-literal {
-  color: #4b5563;
-}
-
-.hljs-title,
-.hljs-section {
-  color: #111827;
-  font-weight: 600;
-}
-
-.hljs-type,
-.hljs-class {
-  color: #1f2937;
+  white-space: pre-wrap;
+  word-break: break-word;
+  overflow-wrap: break-word;
 }
 
 /* Prose customizations */
@@ -74,6 +42,8 @@
   background-color: #fafafa;
   border: 1px solid #e5e5e5;
   border-radius: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
 }
 
 .prose code {
diff --git a/src/components/post/PostContent.tsx b/src/components/post/PostContent.tsx
index 1a99d79..54fdd58 100644
--- a/src/components/post/PostContent.tsx
+++ b/src/components/post/PostContent.tsx
@@ -13,7 +13,7 @@ export function PostContent({ content }: PostContentProps) {
     <div className="prose prose-lg max-w-none prose-headings:tracking-tight prose-headings:font-bold prose-p:leading-relaxed prose-p:text-neutral-700 prose-a:border-b prose-a:border-black prose-a:no-underline hover:prose-a:border-transparent prose-img:my-8 prose-pre:bg-[#f6f8fa] prose-pre:p-6 prose-code:font-mono prose-code:text-base">
       <ReactMarkdown
         remarkPlugins={[remarkGfm]}
-        rehypePlugins={[rehypeHighlight]}
+        rehypePlugins={[[rehypeHighlight, { detect: true }]]}
         components={{
           img: ({ src, alt }) => (
             // eslint-disable-next-line @next/next/no-img-element
@@ -24,7 +24,7 @@ export function PostContent({ content }: PostContentProps) {
             />
           ),
           pre: ({ children }) => (
-            <pre className="bg-[#f6f8fa] p-6 font-mono text-base overflow-x-auto text-black rounded-none border border-neutral-200">
+            <pre className="bg-[#f6f8fa] p-6 font-mono text-base text-black rounded-none border border-neutral-200 whitespace-pre-wrap break-words overflow-hidden">
               {children}
             </pre>
           ),