Merge pull request #31 from ut-code/syntax_highlight

Syntax Highlight

Author: aster-void

bun.lock

@@ -38,8 +38,12 @@
     "vite": "^7.1.7"
   },
   "dependencies": {
+    "@codemirror/lang-javascript": "^6.2.4",
+    "@codemirror/theme-one-dark": "^6.1.3",
+    "@codemirror/view": "^6.38.7",
     "@prisma/adapter-pg": "^6.19.0",
     "@prisma/client": "^6.19.0",
+    "svelte-codemirror-editor": "^2.1.0",
     "valibot": "^1.1.0"
   }
 }

package.json

@@ -9,6 +9,10 @@
   import { CodeManager } from "$lib/models/CodeManager.svelte";
   import BoardModals from "$lib/components/BoardModals.svelte";
   import CodeModals from "$lib/components/CodeModals.svelte";
+  import CodeMirror from "svelte-codemirror-editor";
+  import { javascript } from "@codemirror/lang-javascript";
+  import { oneDark } from "@codemirror/theme-one-dark";
+  import { EditorView } from "@codemirror/view";
 
   let editingCode = $state(lifeGameJS);
   let appliedCode = $state(lifeGameJS);
@@ -108,6 +112,20 @@
       editingCode = code;
     }
   }
+
+  const editorTheme = EditorView.theme({
+    "&": {
+      height: "100%",
+      maxHeight: "100%",
+    },
+    ".cm-scroller": {
+      overflow: "auto",
+      maxHeight: "100%",
+    },
+    ".cm-content, .cm-gutter": {
+      minHeight: "100%",
+    },
+  });
 </script>
 
 <div class="navbar bg-[#E0E0E0] shadow-sm">
@@ -248,10 +266,14 @@
       showEditor ? "basis-[40%] opacity-100" : "basis-0 opacity-0",
     ]}
   >
-    <textarea
-      bind:value={editingCode}
-      class="w-full h-full border-none p-4 font-mono bg-black text-[#0f0]"
-    ></textarea>
+    <div class="w-full h-full overflow-y-auto">
+      <CodeMirror
+        bind:value={editingCode}
+        lang={javascript()}
+        theme={oneDark}
+        extensions={[editorTheme]}
+      />
+    </div>
   </div>
 </div>