Merge pull request #689 from sudhanshutech/pre/tag

Fix `pre` tag of html and its theme
layer5io · Jul 24, 2024 · 186a132 · 186a132
2 parents 8b0631d + c67ed11
commit 186a132
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/src/custom/Markdown/index.tsx b/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}

diff --git a/src/custom/Markdown/style.tsx b/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'
+}));