Per-language syntax highlighting

backend/src/api.ts

@@ -13,6 +13,12 @@ export class Session {
     this.ws = ws;
     this.config = langs[lang];
     this.term = null;
+    this.ws.send(
+      JSON.stringify({
+        event: "setMonacoLanguage",
+        monacoLanguage: this.config.monacoLang,
+      })
+    );
     this.run();
     ws.on("message", this.handleClientMessage);
   }

backend/src/langs.ts

@@ -1,5 +1,6 @@
 export interface LangConfig {
   cmdline: string[];
+  monacoLang: string;
   name: string;
 }
 
@@ -7,69 +8,86 @@ export const langs = {
   bash: {
     cmdline: ["bash"],
     name: "Bash",
+    monacoLang: "shell",
   },
   c: {
     cmdline: ["echo", "not implemented"],
     name: "C",
+    monacoLang: "c",
   },
   "c++": {
     cmdline: ["echo", "not implemented"],
     name: "C++",
+    monacoLang: "cpp",
   },
   clojure: {
     cmdline: ["clojure"],
     name: "Clojure",
+    monacoLang: "clojure",
   },
   emacs: {
     cmdline: ["emacs"],
     name: "Emacs Lisp",
+    monacoLang: "plaintext",
   },
   fish: {
     cmdline: ["env", "SHELL=/usr/bin/fish", "fish"],
     name: "Fish",
+    monacoLang: "plaintext",
   },
   go: {
     cmdline: ["echo", "not implemented"],
     name: "Go",
+    monacoLang: "go",
   },
   haskell: {
     cmdline: ["ghci"],
     name: "Haskell",
+    monacoLang: "plaintext",
   },
   java: {
     cmdline: ["echo", "not implemented"],
     name: "Java",
+    monacoLang: "java",
   },
   julia: {
     cmdline: ["julia"],
     name: "Julia",
+    monacoLang: "plaintext",
   },
   lua: {
     cmdline: ["lua"],
     name: "Lua",
+    monacoLang: "lua",
   },
   nodejs: {
     cmdline: ["node"],
     name: "Node.js",
+    monacoLang: "javascript",
   },
   python: {
     cmdline: ["python3"],
     name: "Python",
+    monacoLang: "python",
   },
   ruby: {
     cmdline: ["irb"],
     name: "Ruby",
+    monacoLang: "ruby",
   },
   rust: {
     cmdline: ["echo", "not implemented"],
     name: "Rust",
+    monacoLang: "rust",
   },
   vim: {
     cmdline: ["vim"],
     name: "Vimscript",
+    monacoLang: "plaintext",
   },
   zsh: {
     cmdline: ["env", "SHELL=/usr/bin/zsh", "zsh"],
     name: "Zsh",
+    monacoLang: "shell",
   },
 };

frontend/src/app.ts

@@ -39,6 +39,13 @@ socket.addEventListener("message", (event) => {
       }
       term.write(message.output);
       return;
+    case "setMonacoLanguage":
+      if (typeof message.monacoLanguage !== "string") {
+        console.error("Unexpected message from server:", message);
+        return;
+      }
+      monaco.editor.setModelLanguage(editor.getModel(), message.monacoLanguage);
+      return;
     default:
       console.error("Unexpected message from server:", message);
       return;
@@ -59,4 +66,9 @@ term.onData((data) =>
   socket.send(JSON.stringify({ event: "terminalInput", input: data }))
 );
 
-monaco.editor.create(document.getElementById("editor"));
+const editor = monaco.editor.create(document.getElementById("editor"));
+window.addEventListener("resize", () => editor.layout());
+
+document.getElementById("runButton").addEventListener("click", () => {
+  socket.send(JSON.stringify({ event: "runCode", code: editor.getValue() }));
+});

webpack.config.js

@@ -30,6 +30,7 @@ module.exports = (_, argv) => ({
   },
   output: {
     path: path.resolve(__dirname, "frontend/out"),
+    publicPath: "/js/",
     filename: "app.js",
   },
   performance: {