fix: code block styling for markdown renderer

Signed-off-by: aabidsofi19 <mailtoaabid01@gmail.com>

Author: aabidsofi19

src/custom/Markdown/index.tsx

@@ -5,6 +5,7 @@ import {
   BasicAnchorMarkdown,
   StyledMarkdown,
   StyledMarkdownBlockquote,
+  StyledMarkdownCode,
   StyledMarkdownH1,
   StyledMarkdownH2,
   StyledMarkdownH3,
@@ -54,7 +55,8 @@ export const RenderMarkdown: React.FC<RenderMarkdownProps> = ({ content }) => {
         li: ({ ...props }) => <StyledMarkdownLi>{props.children}</StyledMarkdownLi>,
         th: ({ ...props }) => <StyledMarkdownTh>{props.children}</StyledMarkdownTh>,
         td: ({ ...props }) => <StyledMarkdownTd>{props.children}</StyledMarkdownTd>,
-        pre: ({ ...props }) => <StyledMarkdownPre>{props.children}</StyledMarkdownPre>
+        pre: ({ ...props }) => <StyledMarkdownPre>{props.children}</StyledMarkdownPre>,
+        code: ({ ...props }) => <StyledMarkdownCode>{props.children}</StyledMarkdownCode>
       }}
     >
       {content}

src/custom/Markdown/style.tsx

@@ -98,3 +98,12 @@ export const StyledMarkdownPre = styled('pre')(({ theme }) => ({
   whiteSpace: 'pre-line',
   fontFamily: 'inherit'
 }));
+
+export const StyledMarkdownCode = styled('code')(({ theme }) => ({
+  background: theme.palette.background.code,
+  whiteSpace: 'pre-line',
+  padding: '1.5px',
+  paddingInline: '5px',
+  fontFamily: 'inherit',
+  borderRadius: 3
+}));

src/theme/palette.ts

@@ -255,6 +255,7 @@ export const lightModePalette: PaletteOptions = {
       tertiary: Colors.red[70]
     },
     code: Colors.charcoal[90],
+
     constant: {
       white: Colors.accentGrey[100],
       disabled: Colors.charcoal[70],
@@ -369,7 +370,7 @@ export const darkModePalette: PaletteOptions = {
       secondary: Colors.red[20],
       tertiary: Colors.red[10]
     },
-    code: Colors.accentGrey[90],
+    code: Colors.charcoal[10],
     constant: {
       white: Colors.accentGrey[100],
       disabled: Colors.charcoal[70],