Fix code highlight theme change

app/src/components/editor/MarkdownPreview.test.tsx

@@ -120,6 +120,34 @@ describe('MarkdownPreview', () => {
     });
   });
 
+  it('renders code blocks with correct structure for theme switching', async () => {
+    const content = '```javascript\nconst hello = "world";\n```';
+
+    render(
+      <MarkdownPreview
+        content={content}
+        handleFileSelect={mockHandleFileSelect}
+      />
+    );
+
+    await waitFor(() => {
+      // Check that rehype-highlight generates the correct structure
+      const preElement = screen
+        .getByRole('code', { hidden: true })
+        .closest('pre');
+      const codeElement = preElement?.querySelector('code');
+
+      expect(preElement).toBeInTheDocument();
+      expect(codeElement).toBeInTheDocument();
+
+      // The code element should have hljs class for theme switching to work
+      expect(codeElement).toHaveClass('hljs');
+
+      // Should also have language class
+      expect(codeElement).toHaveClass('language-javascript');
+    });
+  });
+
   it('handles image loading errors gracefully', async () => {
     const content = '![Test Image](invalid-image.jpg)';
 

app/src/components/editor/MarkdownPreview.tsx

@@ -10,6 +10,7 @@ import * as prod from 'react/jsx-runtime';
 import { notifications } from '@mantine/notifications';
 import { remarkWikiLinks } from '../../utils/remarkWikiLinks';
 import { useWorkspace } from '../../hooks/useWorkspace';
+import { useHighlightTheme } from '../../hooks/useHighlightTheme';
 
 interface MarkdownPreviewProps {
   content: string;
@@ -28,12 +29,6 @@ interface MarkdownLinkProps {
   [key: string]: unknown;
 }
 
-interface MarkdownCodeProps {
-  children: ReactNode;
-  className?: string;
-  [key: string]: unknown;
-}
-
 const MarkdownPreview: React.FC<MarkdownPreviewProps> = ({
   content,
   handleFileSelect,
@@ -42,7 +37,10 @@ const MarkdownPreview: React.FC<MarkdownPreviewProps> = ({
     null
   );
   const baseUrl = window.API_BASE_URL;
-  const { currentWorkspace } = useWorkspace();
+  const { currentWorkspace, colorScheme } = useWorkspace();
+
+  // Use the highlight theme hook
+  useHighlightTheme(colorScheme === 'auto' ? 'light' : colorScheme);
 
   const processor = useMemo(() => {
     const handleLinkClick = (
@@ -107,13 +105,6 @@ const MarkdownPreview: React.FC<MarkdownPreviewProps> = ({
               {children}
             </a>
           ),
-          code: ({ children, className, ...props }: MarkdownCodeProps) => {
-            return (
-              <pre className={className}>
-                <code {...props}>{children}</code>
-              </pre>
-            );
-          },
         },
       } as Options);
   }, [currentWorkspace?.name, baseUrl, handleFileSelect]);