feat: Enhanced code block styling in Markdown editor

- Added styles for code blocks in markdown to match the application's design.
- Improved the rendering of code blocks in the Markdown editor by adding a border and changing the default display in dark mode.
This commit is contained in:
kangfenmao 2024-09-06 17:58:15 +08:00
parent 885c578582
commit b2b79f12a2
2 changed files with 19 additions and 16 deletions

View File

@ -101,7 +101,8 @@
font-family: 'Courier New', Courier, monospace;
}
p code {
p code,
li code {
background: var(--color-background-mute);
padding: 3px 5px;
border-radius: 5px;
@ -112,15 +113,22 @@
border-radius: 5px;
overflow-x: auto;
font-family: 'Fira Code', 'Courier New', Courier, monospace;
background-color: var(--color-background-mute);
&:not(pre pre) {
> code:not(pre pre > code) {
padding: 15px;
display: block;
}
}
pre {
margin: 0 !important;
}
code {
background: none;
padding: 0;
border-radius: 0;
}
}
}
blockquote {
margin: 1em 0;

View File

@ -49,23 +49,18 @@ const CodeBlock: React.FC<CodeBlockProps> = ({ children, className, ...rest }) =
style={theme === ThemeMode.dark ? atomDark : oneLight}
wrapLongLines={true}
customStyle={{
border: '0.5px solid var(--color-code-background)',
borderTopLeftRadius: 0,
borderTopRightRadius: 0,
marginTop: 0,
border: '0.5px solid var(--color-code-background)',
borderTop: 'none'
marginTop: 0
}}>
{String(children).replace(/\n$/, '')}
</SyntaxHighlighter>
</>
) : (
<SyntaxHighlighter
{...rest}
style={theme === ThemeMode.dark ? atomDark : oneLight}
wrapLongLines={true}
customStyle={{ border: '0.5px solid var(--color-code-background)', padding: '8px 12px' }}>
{String(children).replace(/\n$/, '')}
</SyntaxHighlighter>
<code {...rest} className={className}>
{children}
</code>
)
}