feat: Update code block component (#1279)

MartinWitt · Nov 23, 2023 · 57d5887 · 57d5887
1 parent d0df0de
commit 57d5887
Show file tree

Hide file tree

Showing 3 changed files with 99 additions and 15 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -24,6 +24,7 @@
     "graphql": "16.8.1",
     "react": "18.2.0",
     "react-avatar": "5.0.3",
+    "react-code-blocks": "^0.1.5",
     "react-dom": "18.2.0",
     "react-icons": "4.12.0",
     "react-markdown": "9.0.1",

diff --git a/frontend/src/component/JavaCodeBlock.tsx b/frontend/src/component/JavaCodeBlock.tsx
@@ -1,18 +1,12 @@
-import SyntaxHighlighter from 'react-syntax-highlighter';
-import { dracula } from 'react-syntax-highlighter/dist/esm/styles/hljs';
+import { CodeBlock, atomOneDark } from 'react-code-blocks';
 import React from 'react';
 export default function javaCodeBlock(props: { code: string }) {
   return (
-    <div>
-      <SyntaxHighlighter
-        language="java"
-        style={dracula}
-        sx={{ width: '300' }}
-        wrapLongLines
-        showInlineLineNumbers
-      >
-        {props.code}
-      </SyntaxHighlighter>
-    </div>
+    <CodeBlock
+      text={props.code}
+      language={'java'}
+      showLineNumbers={false}
+      theme={atomOneDark}
+    />
   );
 }