set the language attribute for the code editor

I've also added the Elm highlighter from @codemirror/legacy-modes

.gitignore

@@ -1,5 +1,4 @@
 .make.*
-dist/code-editor.mjs
 dist/think-editor.js
 elm-stuff
 jj/status

dist/think-editor.css

@@ -9,6 +9,7 @@
     --editor-size: 50%;
 
     --background: hsl(70,100%,95%);
+    --default-background: white;
     --color: black;
     --button-bg: #ddd;
 }
@@ -16,6 +17,7 @@
 @media (prefers-color-scheme: dark) {
   body {
     --background: hsl(70,100%,8%);
+    --default-background: black;
     --color: white;
     --button-bg: #333;
   }
@@ -237,10 +239,9 @@ input {
             z-index: 1;
         }
 
-        & #code-editor {
+        & code-editor {
+            background: var(--default-background);
             display: block;
-            max-width: 50vw;
-            padding-bottom: 10em;
         }
     }
 

index.html

@@ -17,11 +17,13 @@
       "slug": "loaded-thing",
       "files": [
         {"path": ".", "is_dir": true, "name": ".."},
-        {"path": "src/poo.elm", "is_dir": false, "name": "poo.elm"}
+        {"path": "src/poo.elm", "is_dir": false, "name": "poo.elm"},
+        {"path": "src/poo.js", "is_dir": false, "name": "poo.js"},
+        {"path": "src/poo.py", "is_dir": false, "name": "poo.py"}
       ],
-      "file_path": "src/poo.elm",
+      "file_path": "src/poo.js",
       "is_dir": false,
-      "file_content": "this\nis\nmy\nfile",
+      "file_content": "function x() {\n  return 1;\n}",
       "csrf_token": "arg",
       "elm_packages": [
         { 

src/App.elm

@@ -2,6 +2,7 @@ port module App exposing (..)
 
 import Browser
 import Browser.Navigation
+import Dict
 import File exposing (File)
 import Html as H exposing (Html)
 import Html.Attributes as HA
@@ -523,6 +524,25 @@ main_nav model =
     ]
 
 editor_pane model =
+  let
+    extension =
+      model.file_path
+      |> String.split "."
+      |> List.drop 1
+      |> List.head
+      |> Maybe.withDefault ""
+
+    languages = Dict.fromList
+      [ ("js", "javascript")
+      , ("mjs", "javascript")
+      , ("py", "python")
+      , ("r", "r")
+      , ("R", "r")
+      , ("elm", "elm")
+      ]
+
+    language = Dict.get extension languages |> Maybe.withDefault ""
+  in
     H.section
       [ HA.id "editor" 
       , HE.preventDefaultOn "drop" (JD.at ["dataTransfer", "files"] (JD.list File.decoder) |> JD.map (\f -> (DropFiles Content f, True)) )
@@ -590,6 +610,7 @@ editor_pane model =
         [ H.node "code-editor" 
           [ HE.on "change" (JD.at ["target", "value"] JD.string |> JD.map SetFileContent)
           , HA.attribute "content" model.file_content
+          , HA.attribute "language" language
           ]
           [ H.text model.file_content ]
         , H.input