Merge pull request #689 from sudhanshutech/pre/tag

Fix `pre` tag of html and its theme

Author: sudhanshutech

src/custom/Markdown/index.tsx

@@ -12,6 +12,7 @@ import {
   StyledMarkdownH6,
   StyledMarkdownLi,
   StyledMarkdownP,
+  StyledMarkdownPre,
   StyledMarkdownTd,
   StyledMarkdownTh,
   StyledMarkdownTooltipP,
@@ -51,7 +52,8 @@ export const RenderMarkdown: React.FC<RenderMarkdownProps> = ({ content }) => {
         ul: ({ ...props }) => <StyledMarkdownUl>{props.children}</StyledMarkdownUl>,
         li: ({ ...props }) => <StyledMarkdownLi>{props.children}</StyledMarkdownLi>,
         th: ({ ...props }) => <StyledMarkdownTh>{props.children}</StyledMarkdownTh>,
-        td: ({ ...props }) => <StyledMarkdownTd>{props.children}</StyledMarkdownTd>
+        td: ({ ...props }) => <StyledMarkdownTd>{props.children}</StyledMarkdownTd>,
+        pre: ({ ...props }) => <StyledMarkdownPre>{props.children}</StyledMarkdownPre>
       }}
     >
       {content}

src/custom/Markdown/style.tsx

@@ -71,3 +71,8 @@ export const StyledMarkdownTd = styled('td')(({ theme }) => ({
   marginBlock: '0px',
   ...theme.typography.textB1Regular
 }));
+
+export const StyledMarkdownPre = styled('pre')(({ theme }) => ({
+  background: theme.palette.background.code,
+  whiteSpace: 'pre-line'
+}));