Browse Source

make light-mode blocks more readable

imwald
Silberengel 4 months ago
parent
commit
de24eac9a6
  1. 13
      src/components/Note/MarkdownArticle/MarkdownArticle.tsx

13
src/components/Note/MarkdownArticle/MarkdownArticle.tsx

@ -131,12 +131,11 @@ function CodeBlock({ id, code, language }: { id: string; code: string; language:
return ( return (
<div className="my-4 overflow-x-auto"> <div className="my-4 overflow-x-auto">
<pre className="bg-gray-100 dark:bg-gray-800 p-4 rounded-lg border border-gray-300 dark:border-gray-700"> <pre className="bg-gray-50 dark:bg-gray-900 p-4 rounded-lg border border-gray-200 dark:border-gray-700">
<code <code
ref={codeRef} ref={codeRef}
id={id} id={id}
className={`hljs language-${language || 'plaintext'}`} className={`hljs language-${language || 'plaintext'} text-gray-900 dark:text-gray-100`}
style={{ color: 'inherit' }}
> >
{code} {code}
</code> </code>
@ -188,7 +187,7 @@ function InlineCode({ code, keyPrefix }: { code: string; keyPrefix: string }) {
// On error, fall back to showing the code as-is // On error, fall back to showing the code as-is
if (elementRef.current) { if (elementRef.current) {
elementRef.current.textContent = code elementRef.current.textContent = code
elementRef.current.className = 'bg-muted px-1 py-0.5 rounded text-sm font-mono' elementRef.current.className = 'bg-muted px-1 py-0.5 rounded text-sm font-mono text-foreground'
} }
} }
} }
@ -208,7 +207,7 @@ function InlineCode({ code, keyPrefix }: { code: string; keyPrefix: string }) {
// Regular inline code // Regular inline code
return ( return (
<code key={keyPrefix} className="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <code key={keyPrefix} className="bg-muted px-1 py-0.5 rounded text-sm font-mono text-foreground">
{code} {code}
</code> </code>
) )
@ -2933,6 +2932,10 @@ export default function MarkdownArticle({
} }
.hljs { .hljs {
background: transparent !important; background: transparent !important;
color: #1f2937 !important;
}
.dark .hljs {
color: #f3f4f6 !important;
} }
.hljs-keyword, .hljs-keyword,
.hljs-selector-tag, .hljs-selector-tag,

Loading…
Cancel
Save