修复代码高亮和换行

This commit is contained in:
dela
2026-03-04 23:44:11 +08:00
parent 5a618aac12
commit ad30d37888
2 changed files with 7 additions and 37 deletions

View File

@@ -32,41 +32,9 @@
.hljs { .hljs {
background: #fafafa !important; background: #fafafa !important;
padding: 1.5rem; padding: 1.5rem;
overflow-x: auto; white-space: pre-wrap;
} word-break: break-word;
overflow-wrap: break-word;
.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;
} }
/* Prose customizations */ /* Prose customizations */
@@ -74,6 +42,8 @@
background-color: #fafafa; background-color: #fafafa;
border: 1px solid #e5e5e5; border: 1px solid #e5e5e5;
border-radius: 0; border-radius: 0;
white-space: pre-wrap;
word-break: break-word;
} }
.prose code { .prose code {

View File

@@ -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"> <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 <ReactMarkdown
remarkPlugins={[remarkGfm]} remarkPlugins={[remarkGfm]}
rehypePlugins={[rehypeHighlight]} rehypePlugins={[[rehypeHighlight, { detect: true }]]}
components={{ components={{
img: ({ src, alt }) => ( img: ({ src, alt }) => (
// eslint-disable-next-line @next/next/no-img-element // eslint-disable-next-line @next/next/no-img-element
@@ -24,7 +24,7 @@ export function PostContent({ content }: PostContentProps) {
/> />
), ),
pre: ({ children }) => ( 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} {children}
</pre> </pre>
), ),