forked from carrydela/Rs_blog_front
修复代码高亮和换行
This commit is contained in:
@@ -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 {
|
||||||
|
|||||||
@@ -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>
|
||||||
),
|
),
|
||||||
|
|||||||
Reference in New Issue
Block a user