From 669c56bccab0e95f4e7f131caf72c8cb302d1425 Mon Sep 17 00:00:00 2001
From: kangfenmao <kangfenmao@qq.com>
Date: Fri, 6 Sep 2024 17:58:15 +0800
Subject: [PATCH] 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.
---
 src/renderer/src/assets/styles/markdown.scss  | 20 +++++++++++++------
 .../src/pages/home/Markdown/CodeBlock.tsx     | 15 +++++---------
 2 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/src/renderer/src/assets/styles/markdown.scss b/src/renderer/src/assets/styles/markdown.scss
index 81c313fa18..d093d77e9c 100644
--- a/src/renderer/src/assets/styles/markdown.scss
+++ b/src/renderer/src/assets/styles/markdown.scss
@@ -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,13 +113,20 @@
     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;
+      code {
+        background: none;
+        padding: 0;
+        border-radius: 0;
+      }
     }
   }
 
diff --git a/src/renderer/src/pages/home/Markdown/CodeBlock.tsx b/src/renderer/src/pages/home/Markdown/CodeBlock.tsx
index 0b9fb122fe..67108795dd 100644
--- a/src/renderer/src/pages/home/Markdown/CodeBlock.tsx
+++ b/src/renderer/src/pages/home/Markdown/CodeBlock.tsx
@@ -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>
   )
 }