Agregar syntax highlight para karel java (#153)

Crear modo para CodeMirror para karel java llamado kareljava.

El modo se determina cuando
* Presionas el boton del menu Codigo > Nuevo
* Compilas (porque puedes cambiar el lenguaje compilando, por ejemplo al pegar un código).
* Se recupera el código de la sesión anterior

![image](https://user-images.githubusercontent.com/19498800/188295924-f7659fe0-1528-4cda-afc5-310962bf5ac8.png)

Fixes: #118

index.html

@@ -63,7 +63,16 @@
       src="lib/Split.js/split.js"
       type="text/javascript"
     ></script>
-    <script charset="utf-8" src="js/syntax.js" type="text/javascript"></script>
+    <script
+      charset="utf-8"
+      src="js/syntaxpascal.js"
+      type="text/javascript"
+    ></script>
+    <script
+      charset="utf-8"
+      src="js/syntaxjava.js"
+      type="text/javascript"
+    ></script>
     <script charset="utf-8" src="js/karel.js" type="text/javascript"></script>
     <script charset="utf-8" src="js/mundo.js" type="text/javascript"></script>
     <script

js/main.js

@@ -56,6 +56,21 @@ $(document).ready(function () {
     );
   }
 
+  function setMode(mode) {
+    editor.setOption('mode', mode);
+  }
+
+  function setLanguage(language) {
+    switch (language) {
+      case 'pascal':
+        setMode('karelpascal');
+        break;
+      case 'java':
+        setMode('kareljava');
+        break;
+    }
+  }
+
   function setTheme(theme) {
     if (codeMirrorThemes.indexOf(theme) === -1) return;
     editor.setOption('theme', theme);
@@ -66,7 +81,7 @@ $(document).ready(function () {
 
   function getParser(str) {
     language = detectLanguage(str);
-
+    setLanguage(language);
     switch (language) {
       case 'pascal':
         return { parser: new karelpascal.Parser(), name: 'pascal' };
@@ -395,6 +410,7 @@ $(document).ready(function () {
     var restoredSource = sessionStorage.getItem('karel.js:karelsource');
     if (restoredSource) {
       editor.setValue(restoredSource);
+      setLanguage(detectLanguage(editor.getValue()));
     }
     var restoredWorld = sessionStorage.getItem('karel.js:karelworld');
     if (restoredWorld) {
@@ -916,15 +932,15 @@ $(document).ready(function () {
     editor.focus();
   });
   $('#pascalsyntax').click(function (event) {
-    // editor.getSession().setMode("ace/mode/karelpascal");
+    setLanguage('pascal');
     editor.setValue(
       'iniciar-programa\n    inicia-ejecucion\n        { TODO poner codigo aquí }\n        apagate;\n    termina-ejecucion\nfinalizar-programa',
       1,
     );
     editor.focus();
   });
   $('#javasyntax').click(function (event) {
-    // editor.getSession().setMode("ace/mode/kareljava");
+    setLanguage('java');
     editor.setValue(
       'class program {\n    program () {\n        // TODO poner codigo aqui\n        turnoff();\n    }\n}',
       1,

js/syntaxjava.js

@@ -0,0 +1,85 @@
+CodeMirror.defineMode('kareljava', function () {
+  function words(str) {
+    var obj = {},
+      words = str.split(' ');
+    for (var i = 0; i < words.length; ++i) obj[words[i]] = true;
+    return obj;
+  }
+  var keywords = words('class if else iterate while void define program');
+  var indent = words('{');
+  var dedent = words('}');
+  var builtin = words('move turnleft turnoff putbeeper pickbeeper return');
+  var operator = words('iszero pred succ');
+  var atoms = words(
+    'frontIsClear frontIsBlocked leftIsClear leftIsBlocked rightIsClear rightIsBlocked nextToABeeper notNextToABeeper anyBeepersInBeeperBag noBeepersInBeeperBag facingNorth facingSouth facingEast facingWest notFacingNorth notFacingSouth notFacingEast notFacingWest',
+  );
+
+  function tokenBase(stream, state) {
+    var ch = stream.next();
+    if (ch == '/' && stream.eat('/')) {
+      state.tokenize = tokenSimpleComment;
+      return tokenSimpleComment(stream, state);
+    }
+    if (ch == '/' && stream.eat('*')) {
+      state.tokenize = tokenComment;
+      return tokenComment(stream, state);
+    }
+    if (/[\(\);]/.test(ch)) {
+      return null;
+    }
+    if (/[\!\&\|]/.test(ch)) {
+      return 'operator';
+    }
+    if (/\d/.test(ch)) {
+      stream.eatWhile(/[\w\.]/);
+      return 'number';
+    }
+    stream.eatWhile(/[\w_]/);
+    var cur = stream.current();
+    var style = 'variable';
+    if (keywords.propertyIsEnumerable(cur)) style = 'keyword';
+    else if (builtin.propertyIsEnumerable(cur)) style = 'builtin';
+    else if (operator.propertyIsEnumerable(cur)) style = 'operator';
+    else if (atoms.propertyIsEnumerable(cur)) style = 'atom';
+    else if (indent.propertyIsEnumerable(cur)) style = 'indent';
+    else if (dedent.propertyIsEnumerable(cur)) style = 'dedent';
+    else if (state.lastTok == 'void' || state.lastTok == 'define')
+      style = 'def';
+    state.lastTok = cur;
+    return style;
+  }
+
+  function tokenSimpleComment(stream, state) {
+    stream.skipToEnd();
+    state.tokenize = null;
+    return 'comment';
+  }
+
+  function tokenComment(stream, state) {
+    var maybeEnd = false,
+      ch;
+    while ((ch = stream.next())) {
+      if (ch == '/' && maybeEnd) {
+        state.tokenize = null;
+        break;
+      }
+      maybeEnd = ch == '*';
+    }
+    return 'comment';
+  }
+
+  // Interface
+
+  return {
+    startState: function () {
+      return { tokenize: null, lastTok: null };
+    },
+
+    token: function (stream, state) {
+      if (stream.eatSpace()) return null;
+      return (state.tokenize || tokenBase)(stream, state);
+    },
+  };
+});
+
+CodeMirror.defineMIME('text/x-kareljava', 'kareljava');