use PrismAsyncLight

packages/app/src/components/ReactMarkdownComponents/CodeBlock.module.scss

@@ -11,5 +11,5 @@
   color: bs.$gray-900;
   background: bs.$gray-300;
   border-radius: bs.$border-radius;
-  opacity: 0.6;
+  opacity: 0.8;
 }

packages/app/src/components/ReactMarkdownComponents/CodeBlock.tsx

@@ -1,10 +1,12 @@
-import { CodeComponent } from 'react-markdown/lib/ast-to-react';
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { oneLight } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+import type { CodeComponent } from 'react-markdown/lib/ast-to-react';
+import { PrismAsyncLight } from 'react-syntax-highlighter';
+import { oneDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 
 import styles from './CodeBlock.module.scss';
 
+
 export const CodeBlock: CodeComponent = ({ inline, className, children }) => {
+
   if (inline) {
     return <code className={`code-inline ${className ?? ''}`}>{children}</code>;
   }
@@ -20,14 +22,14 @@ export const CodeBlock: CodeComponent = ({ inline, className, children }) => {
       {name != null && (
         <cite className={`code-highlighted-title ${styles['code-highlighted-title']}`}>{name}</cite>
       )}
-      <SyntaxHighlighter
-        className={`code-highlighted ${styles['code-highlighted']}`}
+      <PrismAsyncLight
+        className="code-highlighted"
         PreTag="div"
-        style={oneLight}
+        style={oneDark}
         language={lang}
       >
         {String(children).replace(/\n$/, '')}
-      </SyntaxHighlighter>
+      </PrismAsyncLight>
     </>
   );
 };