Make the CodeDemo UI look identical to rspress codeblock

Author: Folyd

theme/components/code-demo/index.module.scss

@@ -2,27 +2,26 @@
   margin: 2rem auto;
   max-width: 800px;
   padding: 1rem;
+  border-radius: 8px;
+  overflow: hidden;
 }
 
 .filename {
-  font-family: 'Fira Code', monospace;
+  font-family: system-ui, -apple-system, sans-serif;
   font-size: 0.9rem;
-  color: #d4d4d4;
-  background-color: #1e1e1e;
-  padding: 0.5rem 1rem;
+  color: #666;
+  background-color: #ecf0f7;
+  padding: 0.75rem 1.5rem;
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
-  border-bottom: 1px solid #333;
-  opacity: 0.8;
 }
 
 .codeContainer {
-  background-color: #1e1e1e;
+  background-color: #f7f8fa;
   border-radius: 8px;
   border-top-left-radius: 0;
   border-top-right-radius: 0;
   overflow: auto;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 
   &:has(+ .filename) {
     border-top-left-radius: 0;
@@ -39,7 +38,7 @@
   font-family: 'Fira Code', monospace;
   font-size: 0.9rem;
   line-height: 1.5;
-  color: #d4d4d4;
+  color: #333;
   display: block;
   white-space: pre;
 }

theme/components/code-demo/index.tsx

@@ -1,6 +1,12 @@
 import { type FC } from 'react';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { darcula as style } from 'react-syntax-highlighter/dist/esm/styles/prism';
+const style = {
+  'comment': { color: '#8B8B8B' },
+  'function': { color: '#8B5CF6' },
+  'string': { color: '#4CAF50' },
+  'keyword': { color: '#F92672' },
+  'number': { color: '#FF8B00' }
+};
 import styles from './index.module.scss';
 
 interface CodeDemoProps {
@@ -17,7 +23,7 @@ const CodeDemo: FC<CodeDemoProps> = ({ code, filename, width = '800px', height,
       {filename && <div className={styles.filename}>{filename}</div>}
       <div className={styles.codeContainer} style={{ height }}>
         <SyntaxHighlighter
-          language={language}
+          language="javascript"
           style={style}
           customStyle={{ margin: 0, padding: '1.5rem', background: 'transparent' }}
           codeTagProps={{