feat: beautify CodeBlock

1 files changed, 14 insertions, 2 deletions

diff --git a/src/lib/Markdown/CodeBlock.tsx b/src/lib/Markdown/CodeBlock.tsx
index 2718647..cbb3078 100644
--- a/src/lib/Markdown/CodeBlock.tsx
+++ b/src/lib/Markdown/CodeBlock.tsx
@@ -1,11 +1,23 @@
 import React from 'react';
 import { ParserPropTypes } from './types';
+import { Paper } from '@material-ui/core';
+
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    background: theme.palette.background.default,
+    padding: theme.spacing(2),
+    overflowX: 'auto',
+  },
+}));
 
 const CodeBlock: React.FC<ParserPropTypes> = ({ rawLines }) => {
+  const classes = useStyles();
   return (
-    <p style={{background: 'rgba(255, 255, 255, .1)', padding: '8px' }}>
+    <Paper variant="outlined" className={classes.root}>
       {rawLines.map(line => <> {line} <br/> </>)}
-    </p>
+    </Paper>
   );
 }