fix(repl): Add syntax highlighting and fix styling for Python REPL

Integrated react-syntax-highlighter into PythonREPL to ensure code blocks within the REPL are properly highlighted and consistent with the site theme. Also cleaned up whitespace in the MDX source.

Author: ConstCorrectness

package-lock.json

@@ -22,6 +22,7 @@
     "react-dom": "^19.2.0",
     "react-py": "^1.11.5",
     "react-router-dom": "^7.13.0",
+    "react-syntax-highlighter": "^16.1.0",
     "rehype-highlight": "^7.0.2",
     "rehype-katex": "^7.0.1",
     "remark-gfm": "^4.0.1",
@@ -35,6 +36,7 @@
     "@types/react": "^19.2.5",
     "@types/react-dom": "^19.2.3",
     "@types/react-router-dom": "^5.3.3",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "@vitejs/plugin-react": "^5.1.1",
     "eslint": "^9.39.1",
     "eslint-plugin-react": "^7.37.5",

package.json

@@ -2,6 +2,8 @@ import React, { useEffect, useState } from 'react';
 import { usePython } from 'react-py';
 import { Box, Button, CircularProgress, Typography } from '@mui/material';
 import PlayArrowIcon from '@mui/icons-material/PlayArrow';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { atomDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
 
 interface PythonREPLProps {
   code: string;
@@ -21,7 +23,7 @@ export const PythonREPL: React.FC<PythonREPLProps> = ({ code: initialCode, packa
   }, [stderr]);
 
   return (
-    <Box sx={{ my: 4, border: '1px solid #444', borderRadius: 2, overflow: 'hidden' }}>
+    <Box sx={{ my: 4, border: '1px solid #444', borderRadius: 2, overflow: 'hidden', bgcolor: '#1e1e1e' }}>
       <Box sx={{ bgcolor: '#2d2d2d', p: 1, borderBottom: '1px solid #444', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
         <Typography variant="caption" sx={{ color: '#aaa', ml: 1 }}>Python 3 (WASM)</Typography>
         <Button 
@@ -35,18 +37,29 @@ export const PythonREPL: React.FC<PythonREPLProps> = ({ code: initialCode, packa
             }}
             disabled={isLoading || isRunning}
         >
-            Run
+            {isRunning ? 'Running...' : 'Run'}
         </Button>
       </Box>
-      <Box component="pre" sx={{ m: 0, p: 2, bgcolor: '#1e1e1e', overflowX: 'auto', fontSize: '0.9rem', fontFamily: 'monospace' }}>
-        <code>{initialCode}</code>
-      </Box>
+      
+      <SyntaxHighlighter 
+        language="python" 
+        style={atomDark}
+        customStyle={{ 
+            margin: 0, 
+            padding: '1.5rem', 
+            fontSize: '0.95rem',
+            backgroundColor: 'transparent'
+        }}
+      >
+        {initialCode.trim()}
+      </SyntaxHighlighter>
+
       {output.length > 0 && (
         <Box sx={{ p: 2, bgcolor: '#000', borderTop: '1px solid #444' }}>
             <Typography variant="overline" color="gray">Output:</Typography>
-            <pre style={{ margin: 0, whiteSpace: 'pre-wrap', color: '#4caf50' }}>
+            <Box component="pre" sx={{ m: 0, mt: 1, whiteSpace: 'pre-wrap', color: '#4caf50', fontFamily: 'monospace', fontSize: '0.9rem' }}>
                 {output.join('\n')}
-            </pre>
+            </Box>
         </Box>
       )}
     </Box>

src/components/PythonREPL.tsx

@@ -21,8 +21,7 @@ point = np.array([10, 10, 20])
 projected = perspective_projection(point)
 
 print(f"3D Point: {point}")
-print(f"2D Projected: {projected}")
-`} 
+print(f"2D Projected: {projected}")`} 
 />
 
 The formula used above is a simplified version of the perspective projection matrix used in WebGL: