fix: improve oneDark theme for comment contrast and readability (#4655)
Signed-off-by: Abhijay007 <Abhijay007j@gmail.com>
This commit is contained in:
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user