fixed padding on syntax highlihgting

1 files changed, 7 insertions, 2 deletions

diff --git a/extension/react-app/src/components/StyledCode.tsx b/extension/react-app/src/components/StyledCode.tsx
index 66135d65..485c70b6 100644
--- a/extension/react-app/src/components/StyledCode.tsx
+++ b/extension/react-app/src/components/StyledCode.tsx
@@ -1,12 +1,17 @@
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
-import { synthwave84 } from "react-syntax-highlighter/dist/esm/styles/prism";
+import { vscDarkPlus as highlightStyle } from "react-syntax-highlighter/dist/esm/styles/prism";
 
 interface StyledCodeProps {
   children: string;
+  language?: string;
 }
 
 const StyledCode = (props: StyledCodeProps) => (
-  <SyntaxHighlighter style={synthwave84}>
+  <SyntaxHighlighter
+    customStyle={{ margin: "0" }}
+    style={highlightStyle}
+    language={props.language || "python"}
+  >
     {(props.children as any).props.children}
   </SyntaxHighlighter>
 );