fix: improve oneDark theme for comment contrast and readability (#4655)

Signed-off-by: Abhijay007 <Abhijay007j@gmail.com>
This commit is contained in:
Abhijay Jain
2025-09-19 22:04:22 +05:30
committed by GitHub
parent 939bdb6c67
commit 598dd755b4
+21 -1
View File
@@ -4,6 +4,25 @@ import remarkGfm from 'remark-gfm';
import remarkBreaks from 'remark-breaks'; import remarkBreaks from 'remark-breaks';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'; import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism'; import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
// Improved oneDark theme for better comment contrast and readability
const customOneDarkTheme = {
...oneDark,
'code[class*="language-"]': {
...oneDark['code[class*="language-"]'],
color: '#e6e6e6',
fontSize: '14px',
},
'pre[class*="language-"]': {
...oneDark['pre[class*="language-"]'],
color: '#e6e6e6',
fontSize: '14px',
},
comment: { ...oneDark.comment, color: '#a0a0a0', fontStyle: 'italic' },
prolog: { ...oneDark.prolog, color: '#a0a0a0' },
doctype: { ...oneDark.doctype, color: '#a0a0a0' },
cdata: { ...oneDark.cdata, color: '#a0a0a0' },
};
import { Check, Copy } from './icons'; import { Check, Copy } from './icons';
import { wrapHTMLInCodeBlock } from '../utils/htmlSecurity'; import { wrapHTMLInCodeBlock } from '../utils/htmlSecurity';
@@ -62,7 +81,7 @@ const CodeBlock = memo(function CodeBlock({
return ( return (
<SyntaxHighlighter <SyntaxHighlighter
style={oneDark} style={customOneDarkTheme}
language={language} language={language}
PreTag="div" PreTag="div"
customStyle={{ customStyle={{
@@ -76,6 +95,7 @@ const CodeBlock = memo(function CodeBlock({
wordBreak: 'break-all', wordBreak: 'break-all',
overflowWrap: 'break-word', overflowWrap: 'break-word',
fontFamily: 'var(--font-sans)', fontFamily: 'var(--font-sans)',
fontSize: '14px',
}, },
}} }}
// Performance optimizations for SyntaxHighlighter // Performance optimizations for SyntaxHighlighter