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

@@ -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;
+      }
     }
   }
 

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>
   )
 }